Your agents design. You direct.

Draft is a drawboard for your agent. Claude Code, Codex and opencode draw through MCP or CLI. Watch each change land, edit any layer by hand, and leave comments your agent reads back. Self-hosted and open source.

Host your own Sign in

The Draft editor showing a phone-sized wallet design. A dashed amber outline surrounds a row of four quick-action buttons, and a banner reads: Latest change by codex: Added quick actions row. The history panel lists revisions by codex and claude-code. — codex just added the quick-actions row. Draft outlines exactly what an agent changed, names who did it, and keeps every revision so you can step back.

It sees what it made

Every agent gets a screenshot tool. It renders the frame to an image, looks at it, and fixes cramped spacing or overflowing text before it tells you it’s done.

The same render comes with a share link, so the agent can put a picture of the work straight into your chat. It opens on any device, no sign-in needed.

what the agent calls

screenshot({ document: "d_6o0l1z", node: "home" })
→ PNG of the frame, 780 × 1688
→ share link, valid 30 days
→ editor link to the exact layer

A rendered phone screen for a wallet app: a navy-to-blue balance card showing 48,250 baht, four quick-action buttons, and a list of recent transactions. — The exact image the agent got back.

Review like a team

Pin a comment to any layer. Agents read open comments before they revise, reply when they’ve changed something, and resolve the thread.

Every change is a revision with an author: you, claude-code, codex. Preview any of them, compare against the live design, or restore it.

The Draft editor with the Comments panel open. The owner asked to add quick actions under the balance; codex replied that it added a four-button row. — Your note on the balance card, and codex’s reply after it made the change.

Connect any agent

On the machine running Draft, one command registers it with your coding agent and gives that agent its own key, so its name appears on every change it makes.

terminal

draft connect claude     # Claude Code
draft connect codex      # Codex
draft connect opencode   # opencode

For claude.ai, ChatGPT or Cursor, add a custom connector with this address. The app asks you to approve it once, and you can make it view-only.

connector URL

https://draft.krittaprot.com/mcp

Host it yourself

Draft is one small Node.js server. Run it on your laptop while you work, or on an always-on Mac and reach it from anywhere through your own domain. Your designs stay on your disk.

terminal · needs Node.js 20+ and pnpm

git clone https://github.com/krittaprot/draft
cd draft && pnpm install --frozen-lockfile && pnpm build
node dist/server.js serve   # http://127.0.0.1:3290

The first run prints where your owner key is saved; sign in with it, then connect your agents. The README covers MCP, CLI drawing, the Mac app, and self-hosting on your own domain.

Licence: MIT. Read it, fork it, host it.
Your data: Designs are files on your disk, with every revision kept. Nothing leaves your server unless you share a link.
Model: Frames, auto-layout (rows, columns, gap, padding, hug and fill), text, images, SVG icons, gradients and shadows. Export any frame as PNG, SVG or HTML with flexbox.
Sign-in: Google for the people you allow, OAuth for connector apps, named keys for coding agents.
Install it: Native Mac app, or install the web app: in Safari choose File → Add to Dock; on iPhone, Share → Add to Home Screen.
Always on: ./scripts/install-service.sh keeps it running on an always-on Mac; ./scripts/setup-tunnel.sh puts it on your own domain through Cloudflare.

Give your agents a canvas. Keep the final say.

Get it on GitHub