MCP

Connect DIVE to your coding agent

DIVE speaks the Model Context Protocol, so any MCP client can read your visual edits as structured changes and apply them to your code.

Cloud

Default

The quickest start. Create an anonymous credential in the extension and point your agent at the hosted relay. Nothing to install or run.

Local

On your machine

A companion server runs next to your agent on localhost. Traffic never leaves your computer, and Local adds live feedback rounds.

Self-hosted

Your infrastructure

Deploy the open-source relay on any Node.js host with Redis. Retention, logging and access stay under your control.

Let your agent set it up

Paste this prompt into your coding agent. It checks your setup, asks before changing anything, and never asks you to paste a token into chat.

Help me connect DIVE to this AI app. Read https://dive.samsad.dev/.well-known/agent-skills/design-mode/SKILL.md and https://dive.samsad.dev/docs/mcp-setup first. Check this app's real MCP support and current configuration before changing anything. Prefer Cloud at https://mcp.dive.samsad.dev/mcp; explain Local or Self-hosted if needed. Guide me to create an anonymous credential in the extension's MCP page and enter the bearer token locally through a protected client input or environment variable, never ask me to paste it into chat. With my approval, add the correct configuration without overwriting other servers, and tell me if a restart is needed. Discover the tools and test with get_session_summary({}), then get_changes({}) only if I approve reading the page. Do not modify, resolve or clear anything during setup. If this app cannot use the required MCP transport and authentication, explain the limitation and show me how to use Copy as Prompt instead.

Or configure your client by hand

Claude Code

Project .mcp.json

Merge this server into .mcp.json. Set DESIGN_MODE_TOKEN locally in the environment that launches Claude Code, using protected input rather than a literal token in a shell command. Claude Code expands ${DESIGN_MODE_TOKEN} in headers. Review project-server approval, then check /mcp; restart if the new server has not loaded.

Claude Code MCP documentation

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

Cursor

Project .cursor/mcp.json or user ~/.cursor/mcp.json

Merge this entry into your existing servers. Supply DESIGN_MODE_TOKEN through the environment used to launch Cursor; its ${env:NAME} syntax differs from Claude Code. Enable the server in Cursor's MCP settings and review each tool's arguments before approval.

Cursor MCP documentation

{
  "mcpServers": {
    "design-mode": {
      "url": "https://mcp.dive.samsad.dev/mcp",
      "headers": {
        "Authorization": "Bearer ${env:DESIGN_MODE_TOKEN}"
      }
    }
  }
}

VS Code / Copilot

Workspace .vscode/mcp.json, local extension-host chat

Merge both servers and inputs into your configuration. VS Code prompts for the token in a masked input; do not paste it into chat. Start the server with MCP: List Servers. Interactive inputs are not forwarded to Agent Host sessions; for those, follow Microsoft's current configuration reference instead.

VS Code / Copilot MCP documentation

{
  "servers": {
    "design-mode": {
      "type": "http",
      "url": "https://mcp.dive.samsad.dev/mcp",
      "headers": {
        "Authorization": "Bearer ${input:designModeToken}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "designModeToken",
      "description": "DIVE bearer token",
      "password": true
    }
  ]
}

Tools your agent gets

get_session_summary
get_changes
get_screenshot
export_changes
apply_changes
set_change_status
mark_comment_resolved
clear_changes

Local mode also adds wait_for_handoff for live feedback rounds. The full reference lives in the MCP setup guide.