Doop is an open-source alternative to Paper.design where you can design alongside Claude Code, Codex, and other AI agents on a shared live canvas.
Designs live in HTML-based Frames that both you and connected agents can edit.
You can watch an agent build a screen as it works, inspect its rendered result, leave feedback, and keep design decisions available for later sessions.
Key Features
- Live AI design streaming: Watch an agent build HTML Frames on the canvas.
- MCP agent support: Connect Claude Code, Codex, Cursor, Claude Desktop, Copilot, and compatible MCP clients.
- Built-in Doop Agent: Assign design tasks without keeping an external MCP session open.
- Screenshot review: Agents can inspect rendered screenshots and revise their own work.
- Multiplayer editing: See cursors, presence, frame activity, and who changed each design.
- Task feedback: Comments and task replies can return to an agent as new work.
- Design memory: Save decisions, references, comments, and style guidance for later sessions.
- Website import: Import a public webpage as an editable HTML Frame.
- Private canvases: Control access with account permissions, invites, and link sharing.
- Website and app import: Import public webpages or capture selected screens from private apps.
- Self-hosting: Run the canvas, MCP server, storage, and screenshot renderer on your own infrastructure.
How Doop Works
A Doop project starts with a Canvas containing Frames. Each Frame is an artboard that renders real HTML inside a sandboxed iframe. Web pages, product screens, marketing graphics, and other HTML-based designs can appear directly on the canvas.
When an MCP agent joins, it can inspect the existing frames before creating anything. It can then create a frame, stream HTML into it, and request a rendered screenshot after the design appears. That screenshot lets the agent inspect clipping, spacing, contrast, hierarchy, and other visual problems before it finishes the task.
Your feedback enters that loop from the canvas. Reply to a task or comment on the work and Doop records an open request. An identified agent can claim the request during a later tool call, including an agent that joins after the original session ends.
| Stage | What Happens |
|---|---|
| Open a canvas | Create a canvas or open an existing project. |
| Connect an agent | Authenticate an MCP client through Doop OAuth. |
| Send the brief | Give the agent the canvas URL and the design task. |
| Watch the design | Frames update as the agent streams its HTML. |
| Review | The agent can request a screenshot and revise the frame. |
| Respond | Leave task feedback or edit the frame yourself. |
| Continue | The current agent or another connected agent can pick up later work. |
External MCP Agents and the Resident Doop Agent
Doop has two agent models. They share the canvas, but they differ in where the model runs and who supplies the model access.
Connect Claude Code, Codex, or another MCP agent
An external MCP agent keeps running in the product you already use. Claude Code continues through your Claude access, Codex continues through your OpenAI access, and Doop handles the authenticated canvas connection.
OAuth links that MCP connection to your Doop account. Agent presence and tasks carry your identity, and Doop does not need the model API key used by the external agent.
If you already use a coding agent, an external MCP connection requires no resident-model account inside Doop. Doop provides the visual design environment and collaboration space around that agent.
Assign work to Doop’s resident design team
Doop also runs resident agents on its server. You can queue a card, mention a role in a comment, or leave feedback for later work. The resident team includes a generalist plus UX, copy, brand, accessibility, and visual-polish roles. A card can pass through several design specialties in sequence.
Resident work needs model access on the Doop deployment. A self-hosted instance can use Anthropic or Azure OpenAI for server-hosted jobs, and Doop can also run resident work through an OpenAI model account.
The project includes a ChatGPT-subscription connector through the Codex backend. That connector carries a terms-of-service warning because running a ChatGPT subscription from a third-party server is not sanctioned by OpenAI’s terms. If you do not want that account risk, use an OpenAI API key for resident OpenAI jobs or disable the ChatGPT connector.
What You Can Do on the Canvas
- Stream designs live. Agent HTML appears progressively inside the Frame as Doop receives it.
- Inspect rendered output. A headless renderer returns frame screenshots that an agent can review before finishing.
- Track agent tasks. Status updates appear with agent identity, current activity, and task history.
- Send feedback back to agents. Comments and task replies become requests that an agent can claim.
- Keep design memory. Decisions, comments, approved references, and learned style preferences can persist on the canvas for later agent sessions.
- Work with several people and agents. Live presence, cursors, frame activity, and attribution show who changed each design.
- Import an existing website. A public page can become an editable HTML snapshot beside new variants.
- Sync private application screens. A browser-side capture script can send selected screens from apps behind authentication or a VPN.
- Use design assets. Connected agents can work with uploaded files, icons, logos, and stock imagery exposed through Doop tools.
- Publish frame renders. Frames can produce image URLs for documents, social posts, Open Graph images, and other places that need a rendered graphic.
How to Connect Claude Code
Create a Doop account, open a canvas, and register the hosted MCP server from a terminal.
claude mcp add --transport http doop https://doop.design/mcpOpen /mcp inside Claude Code and authenticate Doop if the browser approval does not appear automatically. After approval, give Claude Code the canvas URL and your design brief.
For example:
Open my Doop canvas and design a landing page hero for a developer tool. Use one primary CTA, a compact navigation bar, and space for a product screenshot.
Doop exposes a get_guide tool with frame conventions, review checkpoints, streaming guidance, and collaboration rules. A connected agent can read that guide before it starts, inspect the canvas, create or edit frames, and call get_frame_screenshot before finishing.
How to Connect Codex and Other MCP Clients
Codex uses the hosted MCP endpoint in ~/.codex/config.toml.
[mcp_servers.doop]
url = "https://doop.design/mcp"Authenticate it from the command line.
codex mcp login doopA generic Streamable HTTP configuration uses that endpoint.
{
"mcpServers": {
"doop": {
"type": "http",
"url": "https://doop.design/mcp"
}
}
}Cursor, Claude Desktop, Copilot in VS Code, and other compatible MCP clients can connect to the hosted server as well. The first authenticated call opens browser approval, and the resulting token links the agent to your Doop account.
Self-Hosted Access
If you want the canvas, MCP server, authentication, storage, and screenshot renderer on infrastructure you control, clone the repository and run the development build with Bun.
git clone https://github.com/kgoedecke/doop && cd doop
bun install
bun run devThe development web app runs on port 4300, and the API, WebSocket, and MCP services run on port 4400. PGlite stores local data in an embedded PostgreSQL-compatible database, which avoids provisioning an external database for local development.
For a production deployment, Doop includes Docker support.
BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -dA production instance should use PostgreSQL through DATABASE_URL and set BETTER_AUTH_URL to its public origin. The production container includes Chromium for frame screenshots. PGlite is intended for a single-process deployment with persistent local storage, not a scaled multi-instance deployment.
Point an external agent at your own deployment after the server is running.
claude mcp add --transport http doop http://localhost:4300/mcpImporting Websites and Private App Screens
Doop can inspect a public website and import it as an editable HTML Frame. You can keep the original page on the canvas, create new variants beside it, and let an agent compare its revisions with the imported design.
Private applications need a different capture method when the Doop server cannot reach them. The doop-sync browser script uses a write-only canvas key and captures screens from the browser that is already inside the authenticated application. It drops input values, strips scripts, and supports data-doop-mask for elements that need redaction before upload.
Each sync key writes only to its assigned canvas and can be revoked from the canvas sharing controls. If you use this feature on internal products, mark sensitive areas before capture and review what the browser sends to Doop.
Pros
- Live AI design on a shared canvas.
- Works with Claude Code, Codex, and other MCP clients.
- Agents can review screenshots before finishing.
- Human comments can become agent tasks.
- Design context can persist across sessions.
- Hosted, macOS, and self-hosted access.
Cons
- HTML Frames focus on web-based design work.
- Resident agents need model credentials.
- Production self-hosting needs PostgreSQL and Chromium.
Alternatives & Related Resources
- Figma Dev Mode MCP Server. Connect AI coding agents to Figma design files, components, variables, and layout data.
- OpenPencil. Open-source AI-native design editor with Figma file support and MCP access.
- Google Stitch. AI design canvas with an agent, design-system features, and web export.
- DesignMD. Extract DESIGN.md guidance from a live website for Claude, Codex, and other coding agents.
FAQs
Do I need an API key to use Doop with Claude Code or Codex?
No. Claude Code, Codex, and other external MCP agents authenticate with Doop through OAuth and continue running on their existing model access. Model credentials become relevant when you want Doop’s built-in resident Agent to perform tasks on its own.
What happens to feedback after an agent session ends?
The feedback stays on the canvas as an open request. A later agent session or another connected agent can pick it up when it next works on that canvas. You do not need to keep the original agent session running until someone responds.
Does self-hosting keep everything local?
Self-hosting keeps the Doop application, canvases, tasks, and database on infrastructure you control. It does not automatically make AI inference local. Content sent to Claude, OpenAI, or another model provider is processed under that provider’s service and data terms.
Can Doop replace Figma or Paper.design?
Doop focuses on HTML-based Frames and live collaboration between people and AI agents. It works well for web UI, landing pages, product screens, and other designs that map naturally to HTML and CSS. Native vector illustration and other specialized design-tool functions are outside that core model.
