MCP setup

Design Mode talks to AI coding agents over Model Context Protocol. You pick one of three connection modes (Cloud, Local, Self-hosted), paste the snippet, and restart your agent. Full snippets and the live mode comparison live on the /mcp page; this page links into it.

Pick a mode

Cloud is the default (no install). Local is offline + lowest latency. Self-hosted is for teams who want Cloud ergonomics on their own infrastructure. See the live comparison on /mcp.

Paste the snippet for your agent

The /mcp page has the exact JSON for Claude Desktop (claude_desktop_config.json), Cursor (~/.cursor/mcp.json), Claude Code (.claude/settings.json), and any other MCP-aware client.

Restart and verify

Restart your agent. The six Design Mode MCP tools (get_changes, apply_changes, clear_changes, get_session_summary, export_changes, get_screenshot) will appear. The side panel's MCP status chip will turn green once an agent attaches.

Related docs

Install Design Mode

Design Mode is a free Chrome extension. Install once, pin the side panel, open any page and start designing. No account, no setup wizard.

Troubleshooting

Most issues fall into a handful of patterns. Here's the short list.

The Changes tab

The Changes tab is where every edit you make in the side panel lands. It's the foundation of the handoff — to a teammate, to a tracker, to an AI agent.