Doop MCP
An open design canvas where Claude Code, Codex, ChatGPT and Cursor draw layouts through MCP together with people
- 1,805 ★ on the repository
- Last commit
- AGPL-3.0
Extended access
Why this level
- The agent draws and edits layouts as the person who approved OAuth and gets that person's rights on canvases
- The built-in agent runs on the connected subscription or model key and spends its limits
- An open server with shared access stores layouts and comments in a database, so set `BETTER_AUTH_SECRET` and canvas privacy
Install
- Works in
Manual install
git clone https://github.com/kgoedecke/doop && cd doop && bun install && bun run devThe web app is on http://localhost:4300 and the API and MCP on port 4400. The bun package manager is required, the server itself runs on Node.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent draws and edits layouts as the person who approved OAuth and gets that person's rights on canvases
- The built-in agent runs on the connected subscription or model key and spends its limits
- An open server with shared access stores layouts and comments in a database, so set `BETTER_AUTH_SECRET` and canvas privacy
This is third-party code. Review the repository files before installing.
What it does
Doop is a shared canvas in the spirit of Paper.design. A design lives on a canvas of frames: artboards that render real HTML in sandboxed iframes. People edit them in the browser, and agents work through the built-in MCP server at `/mcp`. Cursors, presence, frame edits and agent status are visible to everyone at once. The server gives an agent 38 built-in tools plus two Linear tools. For example, `get_canvas` shows each frame's position and size, `set_canvas_pages` manages canvas pages, and `get_prototype` and `set_prototype_start` work with clickable prototypes. An agent connects over OAuth: you sign in to Doop in the browser and approve, and from then on it acts as you with your rights. A built-in Doop Agent picks up task cards and designs on its own using the model account connected to your profile: a ChatGPT subscription or an OpenAI, Claude, Gemini or OpenRouter key. Design memory stores exemplar frames and style rules that every agent follows. You can run Doop yourself with `bun run dev` or `docker compose up`, and a cloud version exists at doop.design.
Who it is for. For designers and developers who want to draw layouts with agents on a shared canvas instead of swapping screenshots.
Good fit when
- You want Claude Code to draw a section layout, watch it appear on the canvas and edit next to it
- Several people and agents work on one design and everyone needs cursors, comments and an activity feed
- You need clickable prototypes with transitions between frames, which an agent sets with `data-doop-*` attributes
- You want the design tool and your layouts on your own server
Not a fit when
- You only need to export finished Figma designs to code: Doop draws layouts from scratch on its own canvas
- You are one person with one agent and no collaboration: a canvas with a WebSocket room would be overkill
- You cannot host a server with Postgres or sign in to the doop.design cloud
- You need an offline vector graphics editor with a professional toolset
Example request
Open the Doop canvas, call get_canvas and draw a pricing section for a travel booking app in a new frameMCP
- Transport
- http
- Authentication
- OAuth
Environment variables
BETTER_AUTH_SECRETrequired, secret- Session secret, required in production.
BETTER_AUTH_URL- Public server origin, OAuth URLs are built from it.
DATABASE_URLsecret- Postgres connection; without it the embedded PGlite is used.
Limitations
A headless client cannot use the browser OAuth sign-in and needs an agent key in a Bearer header. The built-in Doop Agent needs a model connected in the profile and has no free tasks by default. Production needs a managed Postgres in `DATABASE_URL`, while the embedded PGlite suits local trials. The AGPL-3.0 license requires publishing changes if you run a modified service for others.
How to disable. Remove the server from the client with `claude mcp remove doop` or `codex mcp remove doop`. Stop a self-hosted install with `docker compose down`.
FAQ
How do I connect Doop to Claude Code?
Run `claude mcp add --transport http doop http://localhost:4300/mcp` for a local setup. A browser window opens, you sign in to Doop and approve access over OAuth. For the cloud, use the address from the Connect AI dialog.
How do I run Doop myself?
Run `git clone https://github.com/kgoedecke/doop`, then `bun install` and `bun run dev`. The web app opens on port 4300 and the API and MCP run on 4400. For Docker use `BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d`.
Which agents work with Doop?
Claude Code and Codex connect with `claude mcp add` and `codex mcp add`, while Claude, ChatGPT and Cursor use the Connect AI dialog. Any MCP client works, and scripts, n8n and CI use an agent key in a Bearer header.
How does Doop differ from Paper.design?
Doop is open under AGPL-3.0, deploys on your own machine with one command and is open to agents through MCP. The canvas is shared, so people and agents see each other's cursors, comments and activity feed.
Which model runs the built-in Doop Agent?
The one in your profile: a ChatGPT subscription or an OpenAI, Claude, Gemini or OpenRouter key. A server-side `ANTHROPIC_API_KEY` also works and grants as many free tasks as `RESIDENT_TASK_LIMIT` sets, none by default.
Discussion
No questions or reviews yet.
Related
MCP serversAn open-source Claude Design alternative that builds prototypes, decks, dashboards and video through your local agents
Oh My Design (3x-haust)
Oh My Design
A plugin that runs a design task with one /ultradesign command: inspect, build, render, repair and verify
OpenPencil's MCP server: agents inspect designs, edit layers and export assets, including .fig files, without Figma.
Local WebUI for Claude Code, Codex, OpenCode, pi, Hermes and OpenClaw: agents reply with live, interactive React components
A workspace for Claude Code: ten commands lead from a product idea to React screens and a handoff package with ready prompts for implementation
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Doop (this card) | no | OAuth | 1,805 | |
| Figma MCP Bridge | no | not required | 888 | a bridge to Figma files for an agent, not a separate collaborative canvas |
| Figma To Code MCP: from Figma layout to code | no | API key | 7 | converts finished Figma designs to code and does not draw layouts from scratch |
README in short
Doop combines a browser canvas of HTML frames, an MCP server for agents and real-time collaboration. The project offers a cloud version and self-hosting, and its built-in agent has its own task queue.