Design Mode
Add to Chrome

Connect your AI agent over MCP

Design Mode talks to Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Continue, Zed — any AI coding agent that speaks Model Context Protocol. Pick one of three connection modes, paste the snippet, restart your agent.

What is Model Context Protocol (MCP)? MCP is Anthropic's open standard for letting AI agents call external tools safely. A "tool" is anything the agent can read from or write to — a database, a filesystem, a web service, or in this case, the design state of your live page. Design Mode exposes eight MCP tools so your agent can read every edit you made in the side panel, push patches back to the page, grab screenshots, and mark your comments resolved — all without copy-paste. MCP connection, mode, and token management now live on their own dedicated page inside the extension, opened from the header MCP chip.

Why three connection modes? Different teams have different constraints. Cloud is the no-install default for solo makers and anyone whose agent can't reach localhost. Local is for power users who want zero network egress and the lowest possible latency. Self-hosted is for teams who want Cloud ergonomics on their own infrastructure.

Cloud

Default. Hosted SSE relay.

Use mcp.designmode.app as the relay. The extension dials the relay over HTTPS, your agent connects via the same URL with a bearer token. Edits flow through; nothing persists.

Best for: anyone who'd rather not run a local process — including agents that can't reach localhost (sandboxed CI, remote VSCode tunnels, web-based agents).

Local

Fastest, fully offline.

Run the companion MCP server on your own machine. Nothing leaves the laptop.

Best for: power users with a terminal who want zero network egress and the lowest possible latency.

Self-hosted

Same protocol, your own infra.

Fork packages/mcp-cloud and deploy on any Node.js host with Redis — Vercel, Railway, Fly, your own VM. Point the extension at your URL and issue your own bearer tokens.

Best for: teams that want the Cloud-mode ergonomics but on infrastructure they operate.

Mode comparison

Setup steps, privacy posture, agent compatibility, and cost across the three modes.

Cloud

Local

Self-hosted

Setup

Install command
no install
Bearer token required
Auto-connects on panel open

Privacy

Network egress from your machine
Edits persisted server-side
Payload bodies dropped within ~60s
Anyone else operates the infra

Agent compatibility

Claude Desktop
Cursor
Claude Code
Agents in remote / sandboxed contexts

Cost

Price
Free

Config snippets

Paste the right block into your agent's config file, replace any dm_<your-token> placeholder with the bearer token from the extension's dedicated MCP page (Copy token), and restart the agent.

Give your agent the workflow

The config above connects your agent to Design Mode. This one file tells it what to do when you press Send to Agent: read your edits, comments, and token changes over MCP, map each to its source, and implement them — updating your Changes tab as it works. Drop it into your agent's commands folder and run /design-mode.

Download design-mode.mdOne file, works with every agent below.

Where to save it

Claude Code.claude/commands/design-mode.md
Cursor.cursor/commands/design-mode.md
Codex.codex/prompts/design-mode.md
Windsurf.windsurf/workflows/design-mode.md

Any other MCP client works too — save the file wherever it looks for slash-command or workflow prompts.

The eight MCP tools

Every mode exposes the same eight tools — your agent can read the current page diff, push patches back, grab screenshots, track change status, and resolve your comments as it works.

get_changes

Return the list of style/text/DOM changes for the current session.

apply_changes

Apply a structured patch back to the page from the agent.

set_change_status

Mark changes/comments to-do, in-progress, or resolved as you implement them — the user sees the status in their Changes tab.

clear_changes

Wipe the current change buffer — useful between iterations.

get_session_summary

High-level diff: what selectors changed, by how many properties.

export_changes

Markdown export with selector → property → value lines.

get_screenshot

Visible-tab PNG of the page in its current edited state.

mark_comment_resolved

Mark a pinned comment done (or reopen it) once the agent has acted on it.

Privacy: Local mode keeps everything on your machine. Cloud and Self-hosted modes pass messages through the relay without persisting payloads. Full privacy disclosure →

Compatible AI coding agents

Any agent that supports Model Context Protocol works with Design Mode. Confirmed:

  • • Claude Desktop
  • • Claude Code
  • • Cursor
  • • Windsurf
  • • Cline
  • • Continue
  • • Zed
  • • VS Code (with MCP extension)
  • • Any custom MCP client

Don't see your tool? If it speaks MCP, the Self-hosted or Cloud snippet above will work. File an issue on GitHub if you hit a quirk and we'll add a dedicated snippet.