Your browser changes.
In your agent’s hands.

What MCP makes possible

Model Context Protocol connects AI apps to external tools. Design Mode gives a connected agent tools to read your recorded browser edits, inspect screenshots and update their status. The agent still needs separate access to your repository to change source code. Review the recorded changes and copy formats, then use the precise-prompts guide to add scope and acceptance checks.

No MCP support? Use Copy as Prompt in the Changes tab and paste the Markdown into your app. It is a snapshot, not a live connection.

Choose how to connect

Cloud endpoint · Streamable HTTP

https://mcp.designmode.app/mcp

Use the apex host and the /mcp path. The extension’s event-stream URL is not the agent endpoint. Keep bearer tokens out of chat, screenshots, shell history and committed configuration.

Mode comparison

Setup, MCP transport, client requirements and cost across the three modes. Local keeps this MCP transport on localhost; it is not a no-egress guarantee for the coding client or other enabled features. See the privacy disclosure for the separate data flows.

Configure your AI app

These Cloud examples use the client’s own configuration format. Merge the entry—do not replace other servers. Enter your token locally using a protected input or a securely supplied environment variable.

{
  "mcpServers": {
    "design-mode": {
      "type": "http",
      "url": "https://mcp.designmode.app/mcp",
      "headers": {
        "Authorization": "Bearer ${DESIGN_MODE_TOKEN}"
      }
    }
  }
}

Examples checked against first-party documentation on 29 September 2026. Client versions and organisation policies can change availability. Use the client setup reference for configuration details and troubleshooting when a connection check fails.

Tools your agent can use

Cloud, Local and Self-hosted expose these eight session tools. Read the discovered schema before each new kind of call.

Read progressively, act on a bounded scope

1. Start small. Get the session summary before fetching a full change report.
2. Fetch once, select locally. Call get_changes with no arguments and work from its unresolved items. It has no server-side pagination, status filter or max_chars parameter—do not invent them.
3. Zoom in only when needed. Request a screenshot with one returned selector or elementId, or a commentId for a pinned region. Export one supported format if useful.
4. Keep writes explicit. Update only selected item IDs after implementing and verifying source changes. Omitting ids from set_change_status targets everything.

get_session_summary({})
get_changes({})
get_screenshot({ "commentId": "<id from get_changes>" })
export_changes({ "format": "css" })

For opt-in Local live rounds, start wait_for_handoff with the exact pageUrl and timeoutMs ≤ 20000. Continue only with the returned sessionId and after cursor. Never fabricate a session ID or treat later edits as part of an earlier snapshot.