kgoedecke/doop

Doop – Collaborative Design Canvas with AI Agents

What it is

• An open‑source, web‑based design tool where humans and AI agents can edit the same canvas in real time. Each canvas contains frames (HTML artboards) that are rendered in sandboxed iframes. Users see live cursors, presence indicators, undo/redo, comments, and an activity feed.

Why it matters

• Moves AI‑assisted design from the typical prompt‑then‑refresh workflow to a continuous, collaborative experience. An AI “Doop Agent” can be invited to a canvas, queue work, and stream its design output live alongside human edits.

Core features

Feature	What you get
Live multiplayer	WebSocket‑driven cursors, presence, per‑frame edit locks, undo/redo, comment pins, activity feed.
Built‑in Doop Agent	A server‑side AI design team (UX, copy, brand, accessibility) that can be triggered via cards, @‑mentions, or feedback.
MCP integration	Supports Claude Code (or any MCP client) via an OAuth‑protected /mcp endpoint; agents stream design actions directly into frames.
Design memory & distiller	Pin exemplar frames; a “guideline distiller” proposes durable style rules that future agents follow.
Privacy‑first sharing	Canvases are private by default; owners invite collaborators by email or enable link‑share edit mode.
One‑command self‑host	docker compose up or bun run dev (Node + embedded Postgres via PGlite).
Pluggable AI back‑ends	Free tier runs on Anthropic (or Azure OpenAI). Users can attach their own OpenAI subscription or API key for unlimited tasks.
Admin & SSO	Role‑based admin UI, optional OIDC SSO, email‑based signup with optional SMTP verification.

Technology stack

• Frontend: React (served by the same Node server), runs on http://localhost:4300.
• Backend: Node.js server exposing HTTP API, WebSocket, and MCP endpoint (/mcp).
• Database: Embedded Postgres via PGlite for quick local dev; can be swapped for an external Postgres in production.
• Package manager: bun (only bun.lock present).
• AI integration: Calls to Anthropic, Azure OpenAI, or OpenAI (ChatGPT) using server‑side keys; agents are orchestrated in server/agentModel.ts and server/openaiAgent.ts.
• Containerisation: Dockerfile builds a production image that includes a headless Chromium for frame screenshots.

Getting started (quick‑start)

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

# run locally (dev server + embedded DB)
bun run dev   # web UI: http://localhost:4300
               # API/WebSocket/MCP: http://localhost:4400

Or with Docker (single‑command production):

BETTER_AUTH_SECRET=$(openssl rand -hex 32) docker compose up -d   # exposes :4400

Set ANTHROPIC_API_KEY (or an OpenAI key) in .env to enable the built‑in Doop Agent.

How to hook an AI agent

# Example for Claude Code (any MCP client works similarly)
claude mcp add --transport http doop http://localhost:4300/mcp

The client goes through the standard MCP OAuth flow, then can issue commands such as:

Work on canvas <canvas-id>
call get_canvas …

The agent’s actions appear live on the canvas.

Typical use cases

• Rapid UI mock‑ups where a designer wants an AI to generate layout, copy, or branding suggestions on the fly.
• Collaborative brainstorming sessions: multiple humans and one or more agents iterate on the same design.
• Teams that need a private, self‑hosted alternative to SaaS design tools that also embed AI assistance.

Limitations / considerations

• The free‑tier Doop Agent runs on a server‑provided Anthropic key and is limited by RESIDENT_TASK_LIMIT; beyond that users must attach their own OpenAI subscription or API key.
• Connecting a ChatGPT subscription from a third‑party server is not officially sanctioned by OpenAI and may lead to rate‑limits or account suspension; the API‑key path is the fully supported route.
• Production deployments require a real Postgres instance (the embedded PGlite is single‑process only) and a strong BETTER_AUTH_SECRET.
• SMTP configuration is needed for email verification and admin promotion; without it signup is open and admin roles cannot be safely assigned.
• Azure OpenAI can only be used as a server‑level provider (not as a per‑user account) due to potential SSRF concerns.

Where to learn more

• Hosted demo: https://doop.design
• Documentation & contribution guide: CONTRIBUTING.md
• Community chat: Discord link in the README.

---

All information above is taken directly from the repository’s README; no external assumptions have been added.