Toolkit · Embed in your own site

Live Activity Tool

A "now coding" / "now gaming" badge you can drop into your own portfolio site — like a Discord Rich Presence status, but for your personal homepage. A small agent on your PC reports what you're doing; a badge component on your site shows it live.

Python agent · Windows Next.js API route React component MIT licensed

Get it on GitHub

How it works

Three small pieces, each doing one job.

🖥

A Python agent on your PC

Checks your active window every few seconds, maps it to a friendly label like "Coding in VS Code" or "Playing CS2", and posts that to your site's API.

🔌

An API route on your site

Receives the agent's update (protected by a shared secret so only your agent can post), stores it, and auto-expires it to "Offline" if the agent stops reporting.

🏷

A badge component

Polls the API and renders a small pill in the corner of your site — an icon, your current activity, and a live duration timer.

Live demo (mocked)

The badge in the bottom-right corner of this page is running on fake, hardcoded data — this page isn't connected to a real PC. Wiring it up to your actual live status is a config change away, documented in the repo.

Privacy note: the agent only ever sends a coarse label like "Coding in VS Code" — never your actual file names, window titles, or document contents.

Integrating it into your own site

Spin up a free Upstash Redis database and add its credentials plus a shared secret to your site's environment variables.
Copy the API route file into your Next.js project's app/api/status/route.ts.
Copy the badge component in and drop <ActivityBadge /> into your layout.
On your own PC, run the Python agent, pointing it at your deployed API URL and matching secret.