Agent Keyboard
vibhasjain/agent-keyboard
OPEN SOURCE · SELF-HOSTED · MIT

Build your app from within your app.

A prompt bar that edits the app it's on. Ask for a change — typed, dictated, or photographed — and a real Claude Code session on your server makes it and commits it.

GitHub
<script src="https://agent-keyboard.fly.dev/widget.js" data-site="halo" defer></script>
The demo is the product

Ask. Watch it ship.

Why

It should feel like sculpting.

I built this for myself — to change my app in the place I actually look at it, not some throwaway browser bolted into my IDE.

So it happens in situ: you ask, you watch it change, you ask again. Less typing at a wall, more shaping something right in front of you.

How it works

Your keys. Your boxes.

type dictate photo

You sign in once through Supabase and prompt the bar right on your app.

✻ One Fly server
A single Claude Code CLI with a durable session per site — it remembers your past changes and picks up right where you left off.
blog.git shop.git docs.git

One push to every repo you connect — your host redeploys.

Your app updates right where you're looking — live, on the same page you prompted from.
Steer it

It runs itself. You just ask.

Switch model or effort"switch to sonnet"
Install a skill on demand"add image generation"
Update its own Claude Codeit won't auto-update
Clear the context"clear context" — fresh session, confirms first
Questions

The honest version.

Is it a browser extension?

No — there's nothing to install in your browser. It's a single <script> tag you add to your app's own code, like an analytics snippet. The bar then appears right inside your running site once you're signed in. No extension, no separate app.

Who is it for?

Anyone who wants to change a site they own without opening their editor — founders tweaking a landing page, indie hackers and solo devs shipping on the go, small teams fixing copy or spacing from a phone, designers who'd rather describe a change than file a ticket. If you can describe it, you can ship it.

How long does setup take?

Minutes. Drop in the script tag and allow-list your repo — you can even ask the agent to wire it up for you. Standing up your own server (or forking this one) is the longer part, and it's a short, well-documented path.

Can I keep my existing workflow?

Yes — it complements your workflow, it doesn't replace it. It commits and pushes to the same repo you already use, and re-syncs to the latest before every change, so your editor, CI, and deploys keep working exactly as before. If you've used Claude Code, there's no learning curve — it's the same engine, just reachable from inside your app: a faster feedback loop for shipping small changes, not a new tool to adopt.

Is it safe to point an agent at my codebase?

It only touches repos you allow-list, and every commit is attributed to "Agent Keyboard." Want to review before it goes live? Point it at a staging branch. And you can always ask it to roll a change back.

What does it cost to run?

Mostly things you already pay for: the Claude Code subscription edits, Supabase's free tier does auth, a small Fly VM (often free) hosts. The OpenAI key is optional, for voice.