doop

Doop is the open-source alternative to Paper.design — a multiplayer design canvas for humans and AI agents. Every design lives on a shareable Canvas (/c/<id>) holding Frames — artboards that render real HTML in sandboxed iframes. People edit in the browser; AI agents edit through the built-in MCP server, streaming their designs in live. Everyone sees everything as it happens: cursors, presence, frame edits, agent status, and an activity feed.

• Design with agents, not prompts-and-refresh — connect Claude Code (or any MCP client) once, then watch it sketch, stream and self-review designs on your canvas, next to your cursor.
• A built-in Doop Agent — queue a card or @mention a role and it designs on its own, no client to connect. Runs on the server's ANTHROPIC_API_KEY for a handful of free tasks, then on the ChatGPT subscription (or OpenAI key) each user connects (setup); the first-canvas welcome performance is scripted and runs without any of it.
• True multiplayer — live cursors, presence, per-frame editing indicators, undo/redo, comments pinned to elements, and an activity feed, all over one WebSocket room.
• Design memory — pin exemplar frames, capture decisions, and let the distiller propose durable style rules that every agent follows.
• Private by default — invite collaborators by email or flip on link sharing per canvas; agents inherit exactly their human's access.
• Self-host in one command — docker compose up, or bun run dev with zero configuration (embedded Postgres, no external services required).

Quickstart

git clone https://github.com/kgoedecke/doop && cd doop
bun install
bun run dev

Doop builds and installs with bun (bun.lock is the only lockfile); the server itself runs on Node.

• Web app: http://localhost:4300
• API + WebSocket + MCP server: http://localhost:4400 (the web port proxies /api, /ws, /mcp to it)

Everything works with no configuration: data persists to an embedded Postgres (PGlite) in data/pg, and every optional integration (SMTP, stock photos, object storage, analytics) degrades gracefully until its variable in .env.example is set. The one you will most likely want is ANTHROPIC_API_KEY, which turns on the built-in Doop Agent — agents you connect yourself over MCP need no key.

Or self-host the production build with Docker:

BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d   # app + Postgres on :4400

Production build without Docker: bun run build && bun run start (single server on :4400 serving everything). Set DATABASE_URL to use a real Postgres — same code path as PGlite.

Prefer not to run anything? doop.design is the hosted version.

Canvas chat, imports and exports

The canvas Chat tab keeps a shared conversation alongside the design. Mention an agent role to queue a design card; its reply threads back into the chat.

The import source picker offers Website, Live app (the sync snippet), and GitHub repo. Right-click a frame and choose Export… to download PNG or JPG. A progress toast tracks the render; the desktop app opens its native save panel.

Linear

Connect Linear from Integrations to read issues through MCP or install Doop as a delegated agent. Delegated tickets create a canvas and a design card, then report the result back to Linear. See Linear setup for OAuth and webhook configuration.

Hook up Claude Code

One command connects Claude Code (or any MCP client) to your canvas:

claude mcp add --transport http doop http://localhost:4300/mcp

That triggers the standard MCP OAuth flow — a browser window opens, you approve, and from then on the agent works as you. Ask it to design something on your canvas id and watch it happen live. Everything in this shot is the real flow: Claude Code announced itself with set_status, created a frame, and is streaming the pricing section in — presence avatar, "for Kai Moreno" attribution, the frame chip, the working strip, and the task in the Agents panel.

Watch an agent design

The first canvas after signup comes with a performance: the Doop Agent streams a welcome design in while you watch — status in the working strip, a task in the panel, a pulsing border on the frame it's building.

That welcome performance is scripted (server/demo.ts) — a pre-authored frame replayed through the same machinery real agents use, so it runs with no configuration at all. The Doop Agent proper needs a key.

The Doop Agent

Doop ships a built-in design team that lives in the server and picks work up on its own: queue a board card, @mention a role on an element comment, or leave feedback on a task, and it runs without a human in the loop. Roles (Doop builds; specialists own one pass each — UX, copy, brand, accessibility) are defined in shared/agents.ts, and a card can be routed through several in order.

The server pays for the free tier, on Anthropic by default:

ANTHROPIC_API_KEY=sk-ant-...   # in .env, or the environment of your deployment

Same key gates the guideline distiller (server/distill.ts), which proposes durable style rules from your canvas.

The free tier can run on Azure OpenAI instead — useful when your organisation's credits or compliance rules live there:

DOOP_AGENT_PROVIDER=azure
AZURE_OPENAI_ENDPOINT=https://my-resource.openai.azure.com
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_DEPLOYMENT=my-deployment

The distiller stays on ANTHROPIC_API_KEY either way and quietly turns off without it.

Past the free tasks: connect your own ChatGPT

When a user's RESIDENT_TASK_LIMIT free tasks are gone, they don't lose the agent — they connect a model account and the Doop Agent keeps running on it. A connected account takes over immediately, from the very next task: the free tier is a trial that gets people here, not a balance to spend down first, and connecting stops costing the server anything from that moment. The connection is account-level, so it lives at /settings (Home → Settings); the free-tier wall links there rather than carrying its own copy, and "Connect an AI agent" on a canvas stays about MCP clients only. Six kinds of account:

• ChatGPT subscription — OAuth against auth.openai.com, then inference through the Codex backend that Plus/Pro/Business plans include. Tokens live in model_accounts and never reach a browser.
• OpenAI API key — pay-as-you-go on the user's own OpenAI account, no subscription involved.
• OpenRouter API key — one key for a curated multi-vendor roster: Kimi, Qwen, GLM, DeepSeek, MiniMax, MiMo and Gemini Flash (the menu lives in shared/modelMenu.ts). Models without image input still work, in a degraded mode: the agent skips screenshot review, verifies through the frame HTML instead, and the picker labels them "no visual review".
• Gemini API key — Google's Gemini models through their OpenAI-compatible endpoint, plus Nano Banana image generation.
• Gemini cloud pilot — an operator-managed prototype running the official Gemini CLI in an isolated worker using Google sign-in. Disabled by default; see the pilot setup and verification guide.
• Claude API key — pay-as-you-go on the user's own Anthropic account.

Azure OpenAI is deliberately not a connectable account kind, and the OpenRouter/Gemini endpoints are fixed constants: a user-supplied endpoint would be a URL the server fetches with the run's full context — an SSRF vector — so custom endpoints stay server-level configuration only.

Either way the user picks their model tier in Settings from that provider's curated menu — on OpenAI, gpt-6-astra (the newest flagship; on a ChatGPT subscription it needs Plus or better and OpenAI is still rolling it out per account), gpt-5.6-sol (flagship), gpt-5.6-terra (the default workhorse) or gpt-5.6-luna (cheap and fast). They are paying for it, so the choice is theirs; DOOP_AGENT_OPENAI_MODEL, DOOP_AGENT_OPENROUTER_MODEL and DOOP_AGENT_GEMINI_MODEL only set the default they start on. Note that gpt-5.4 and gpt-5.4-mini retire from ChatGPT-authenticated Codex on 31 August 2026, so pinning a 5.4 id via that env var will bre