The design MCP for Claude Code
One command connects Claude Code to a live design canvas.
Doop is a design MCP for Claude Code: an MCP server that gives your agent a real canvas to design on. Instead of pasting HTML into your terminal, Claude Code draws on a live multiplayer surface — every frame streams in keystroke by keystroke, the agent reviews its own work with screenshots, and your feedback flows back to it mid-task. Doop is open source and free while in beta.
What is a design MCP?
MCP (Model Context Protocol) is the open standard that lets AI agents call external tools. A design MCP server, therefore, extends a coding agent with design abilities: creating artboards, streaming in layouts, taking screenshots of its own output, and collaborating with the humans who briefed it.
Claude Code supports MCP servers natively — see Anthropic's MCP documentation for how connections work. Once Doop is added, your agent gets 25+ design tools it can call from any session, in any repo.
Connect Claude Code in one command
$ claude mcp add --transport http doop https://doop.design/mcp
Run /mcp inside Claude Code, pick doop, and approve the connection in the browser
window that opens. That's the whole setup: no API keys, no config files. The OAuth token carries your identity, so
the agent designs as you — attributed and accountable. The
get-started guide covers Codex, Claude Desktop, Copilot, and self-hosted setups
too.
What Claude Code can do with a design MCP
Connected to Doop, your agent can:
- Stream designs in live. Frames are real HTML artboards. The agent appends sections as it writes them, so you watch the design appear rather than waiting for a wall of code.
- Review its own work. A built-in headless renderer hands the agent screenshots of its frames, so it catches layout bugs before you have to.
- Pick up feedback mid-flight. Reply to any of the agent's tasks and your note becomes an open request on the canvas. The next tool call picks it up.
- Use real assets. Stock photo search, 200,000+ open-source icons, brand logos, and image uploads are all tools the agent can call directly.
- Share memory across agents. Decisions, style guides, and references persist on the canvas, so the next agent that joins designs in the same direction.
Why a canvas beats code-only design
Claude Code is already good at writing front-end code. The gap is everything around it: you can't see the design until you run it, the agent can't see it at all, and feedback means editing a prompt. A design MCP for Claude Code closes that loop. Both of you look at the same live surface, and iteration happens where the design is — not in the terminal scrollback.
It's also multiplayer. Teammates and their agents join the same canvas with live cursors and a shared task feed, Figma-style. For the broader landscape of agent design tooling, see our roundup of design tools for Claude Code and Claude Design alternatives.
Open source and self-hostable
Doop is a single Docker container plus Postgres,
open on GitHub under AGPL-3.0.
Point your agent at your own instance's /mcp endpoint and the entire workflow — OAuth, streaming,
screenshots — runs on your infrastructure.
FAQ
What is the best design MCP for Claude Code?
Doop is a design MCP server built specifically for Claude Code and other coding agents. Instead of describing designs in text, your agent draws on a live multiplayer canvas: frames stream in as it works, it reviews its own screenshots, and it picks up your feedback mid-flight.
Does the Doop MCP server need an API key?
No. Doop authenticates over MCP OAuth: the first tool call opens a browser window, you approve the connection, and from then on the agent designs as you. It keeps running on whatever model you already pay for.
Is Doop open source?
Yes. Doop is open source under AGPL-3.0 on GitHub (kgoedecke/doop). You can self-host the whole thing — canvas, MCP server, and Postgres — with one Docker container.
Does it work with agents other than Claude Code?
Yes. Any MCP client that speaks streamable HTTP with OAuth can join: Codex, Claude Desktop, Copilot in VS Code, and more. Humans and several agents can work on the same canvas at once.
Ready to try it? Create a free canvas, run the command above, and give your agent its first brief.