kgoedecke/doop

What Doop is

Doop is a self-hostable multiplayer design canvas built for two kinds of collaborators: people in the browser and AI agents over MCP. A canvas (/c/<id>) holds frames, each rendering real HTML inside a sandboxed iframe. Humans draw, edit HTML through the inspector, comment and prototype; agents connected through the built-in MCP server create frames, stream HTML into them and appear with their own cursor and status.

Any MCP client can join — Claude Code, Codex, ChatGPT, Cursor or others — and agents act under the account that approved them, inheriting that account's canvas access. Doop also ships a built-in agent that picks up queued cards and @mention comments on its own, with specialist roles defined in shared/agents.ts.

Beyond agent editing, the editor covers comments and mentions, PNG/JPG/PDF export, website/live-app/GitHub-repo import, ready_for_dev approval states, clickable prototypes, Linear and Slack integrations, scheduled automations and a REST API. A SwiftUI iPhone/iPad client lives in ios/ and renders frames with the Blitz engine; it is still in development.

The hosted version is at doop.design; self-hosting runs the same code.

Quickstart

You need bun and Node on your PATH (Node is used to package the Claude Desktop extension).

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

This starts the web app at http://localhost:4300 and the API, WebSocket and MCP server behind it on port 4400 (the web port proxies /api, /ws, /mcp and related paths). No configuration is required to boot: data persists to an embedded PGlite database in data/pg, and optional integrations stay inactive until their environment variables are set in .env.example.

To connect an MCP client such as Claude Code to the local instance:

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

The command opens the MCP OAuth flow in a browser; approve it, then ask the agent to work on a canvas ID shown in the app's top bar. Generic MCP clients use the same URL: { "mcpServers": { "doop": { "type": "http", "url": "http://localhost:4300/mcp" } } }.

For a production install, either build the single-server image yourself or use the bundled Docker Compose file:

BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d

Both paths serve on port 4400. Production deployments should set a real DATABASE_URL, BETTER_AUTH_SECRET and BETTER_AUTH_URL, and can be health-checked at GET /healthz.

Constraints

• Database: the embedded PGlite fallback is single-process and suits one instance with a persistent volume at /app/data; real deployments should point DATABASE_URL at Postgres.
• Agent access: the /mcp endpoint requires OAuth (or an agent key under Settings → Agent keys for headless clients). Each agent inherits the approving account's canvas permissions, so revoking the key cuts it off.
• Built-in Doop Agent: the scripted welcome demo runs with no configuration, but the real resident agent needs a connected model account or a server-side ANTHROPIC_API_KEY with RESIDENT_TASK_LIMIT above 0. Free-tier tasks are limited and the account-level model connection takes over immediately after.
• Remote reachability: ChatGPT and the online Claude connector need a publicly reachable HTTPS server; localhost requires the desktop app or a tunnel.
• Accounts and admin: the web app requires a better-auth account. ADMIN_EMAILS promotion needs SMTP in production, and admin status does not widen canvas access.
• iOS app: in development, with validation and release requirements documented in the iOS README rather than guaranteed.
• License: AGPL-3.0 — self-hosting and modification are allowed, but offering a modified version as a service requires publishing changes. The Doop name and logo are trademarks and derived services must rebrand.

HotRepo's take

On 2026-11-02 the repository recorded 1509 stars and 162 new stars in the TypeScript daily ranking, where it reached position 14. That is a single day's record, so it shows a burst of attention around a project created in late August 2026 rather than a sustained trend.

The design is coherent for what it claims: agents interact with the same HTML frames, approval states and comment threads that humans use, and access control is enforced in one place (server/access.ts) shared between the API and MCP. Whether the live-streaming collaboration holds up with several agents at once is not something the available data shows; the README's own demos are the only evidence offered.