Connect your AI agent

Three modes at a glance

Each mode exposes the same six MCP tools(get_changes, apply_changes, clear_changes, get_session_summary, export_changes, get_screenshot) — pick based on where the agent runs and what you're willing to operate.

Mode 1 — Local

The default. Your agent talks to a Node.js companion server running on your laptop, which in turn talks to the browser extension over a WebSocket. Everything stays on the machine — nothing leaves localhost.

Setup

1. Install the extension from the Chrome Web Store.
2. Open Settings → MCP, confirm the mode is Local (default).
3. Add one of the snippets below to your agent's MCP config and restart the agent. The extension will auto-connect on ws://localhost:9960 when the side panel is open.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "design-mode": {
      "command": "npx",
      "args": ["-y", "@design-mode/mcp-local"]
    }
  }
}

Cursor

Cursor Settings → MCP → add server:

{
  "design-mode": {
    "command": "npx",
    "args": ["-y", "@design-mode/mcp-local"]
  }
}

Claude Code

Run claude mcp add design-mode npx -y @design-mode/mcp-local from any terminal. Restart Claude Code.

Troubleshooting

• Port conflict on 9960 — set DM_PORT=<port> in your environment, and change the port in extension Settings → MCP to match.
• Indicator stays grey — make sure the side panel is open in at least one tab. The companion server only forwards while a panel is connected.
• Agent can't see the tools — fully quit and relaunch your agent after editing the config. Some agents cache the MCP list.

Mode 2 — Cloud (mcp.designmode.app)

For remote agents that can't reach your laptop — hosted Claude, ChatGPT's browser tool calls, a teammate on another machine, etc. The relay is a stateless Vercel deployment with Upstash Redis Streams; payloads are trimmed within ~60 seconds and never persisted.

Setup

1. In the extension, open Settings → MCP → switch mode to Cloud.
2. Click Connect to Cloud. A bearer token (dm_…) and tenant id are generated and stored in chrome.storage.local.
3. Click Copy Claude / Cursor / Claude Code config to put the right snippet on your clipboard with the token already substituted.
4. Paste into the agent's MCP config and restart.

Claude Desktop

{
  "mcpServers": {
    "design-mode": {
      "type": "http",
      "url": "https://mcp.designmode.app/mcp",
      "headers": { "Authorization": "Bearer dm_<your-token>" }
    }
  }
}

Cursor

{
  "design-mode": {
    "url": "https://mcp.designmode.app/mcp",
    "headers": { "Authorization": "Bearer dm_<your-token>" }
  }
}

Claude Code

Use claude mcp add --transport http design-mode https://mcp.designmode.app/mcp --header "Authorization: Bearer dm_<your-token>".

Quota & privacy

• Per-tenant daily quota — currently 25 tool calls per UTC day. Raise on request; the relay rejects overage with an explicit 429.
• Stream-only — your edits and screenshots flow through Redis Streams that are trimmed within ~60 seconds and not persisted to durable storage.
• Tokens are revocable — Revoke from the side panel and the active stream drops on the next heartbeat.
• Side panel must stay open for the agent to reach your browser. Closing it pauses cloud calls.

Mode 3 — Self-hosted

Same wire protocol as Cloud, your infra. Useful if you want to audit the relay, set your own quotas, or keep the bridge inside a corporate network.

Setup

1. Clone the repo and open packages/mcp-cloud/.
2. Provision an Upstash Redis from the Vercel Marketplace.
3. Set environment variables: KV_* (auto-populated by the Marketplace integration), DM_DAILY_QUOTA (default 25), and any custom CORS origins you need.
4. Deploy with vercel deploy --prod. Copy the production URL (e.g. https://design-mode-mcp-yourname.vercel.app).
5. In the extension, Settings → MCP → switch mode to Self-hosted, paste your URL, click Connect. Token + tenant generation works the same as Cloud.

Claude Desktop

{
  "mcpServers": {
    "design-mode": {
      "type": "http",
      "url": "https://<your-deploy>.vercel.app/mcp",
      "headers": { "Authorization": "Bearer dm_<your-token>" }
    }
  }
}

Cursor

{
  "design-mode": {
    "url": "https://<your-deploy>.vercel.app/mcp",
    "headers": { "Authorization": "Bearer dm_<your-token>" }
  }
}

Claude Code

Same as Cloud but with your URL: claude mcp add --transport http design-mode https://<your-deploy>.vercel.app/mcp --header "Authorization: Bearer dm_<your-token>".

The six MCP tools your agent gets

• get_changes — full snapshot of every edit on the current page (styles, text, DOM, comments) + the page URL/title.
• apply_changes — agent pushes styles to specific elements; they paint live and land in the Changes tab.
• clear_changes — wipe all edits on the current page.
• get_session_summary — short summary across every active session (extension status + change counts).
• export_changes — generate CSS / Tailwind / SCSS / JSX from the current change set.
• get_screenshot — PNG of the viewport or a single element (by selector or dm-* id).

Privacy

Local mode never leaves your machine. Cloud and Self-hosted modes stream through a relay that's designed to be transparent — payloads are short-lived Redis entries (trimmed within ~60s) and never persisted; logs carry only metadata. Read the full privacy policy.

Want to test the extension before setting any of this up? Walk through the interactive demo →