AI design agent · Jun 2026
An AI agent on a short leash
Designers wanted to change the product directly instead of handing over screenshots. I built a chat overlay that drives a coding agent inside the running app, and spent most of the effort on what it is not allowed to do.
- Role
- Sole author
- When
- Jun 2026
- Where
- PayGlocal
- Stack
- Next.jsClaude CodeNodetsup
The situation
Giving an AI agent write access to a payments codebase is risky: secrets, production builds and protected branches all need protecting.
What I built
- A draggable chat overlay that only exists in development, with streaming replies, sessions and a model picker.
- An element picker that sends the selected component’s React stack to the agent as context.
- A hook that blocks the agent from reading environment files, keys and other secrets.
- Publishing only through pull requests from design branches, never to protected branches.
- A build check that fails if agent code ever reaches a production bundle.
Try it
Design agent · simulated
Tool calls
- None yet.
Decisions
Guardrails in code, not in the prompt
Prompts can be talked around. The secret guard, tool allowlist and build check are enforced by code the agent cannot change.
Outcome
| What | Before | After | Change |
|---|---|---|---|
| Package | — | public on npm | MIT |
| Lines written | — | ~3.5K | sole author |
Next projectEvalpro →My M.Tech thesis: taking Evalpro, the programming autograder on IIT Bombay’s BodhiTree platform, from a working prototype to something real courses ran on.