Configure MCP Server

Prerequisites

• Node.js 22.0.0 or later — required to run the MCP server process locally

Add MCP server

Add the DevBridge MCP server config to an AI application that supports the Model Context Protocol. Example applications:

• Claude Code
• Cursor
• Claude Desktop
• Windsurf
• VS Code

Server config

{
  "mcpServers": {
    "devbridge": {
      "command": "npx",
      "args": ["devbridge-mcp@latest"]
    }
  }
}

What happens on first run: When npx devbridge-mcp@latest runs for the first time, it automatically installs a native messaging host manifest so Chrome can communicate with the local MCP server. This is a one-time setup — subsequent runs start immediately.

Per-tool setup

Claude Code

1. In your project root, create or edit .mcp.json
2. Add the server config above
3. Restart Claude Code in this project — DevBridge will appear in the MCP tools list
4. Pre-approve all DevBridge tools by adding an allow rule to .claude/settings.local.json:

{
  "permissions": {
    "allow": ["mcp__devbridge__*"]
  }
}

Why this step matters: Claude Code requires explicit approval for each MCP tool. Without the allow rule, Claude Code prompts you on first use of each tool. In non-interactive environments (CI, headless sessions) tools that haven't been approved are silently rejected with "user rejected" — no prompt appears. The mcp__devbridge__* wildcard pre-approves all 18 DevBridge tools at once.

For more information, see Claude Code's MCP documentation.

Cursor

1. Open full Cursor settings
2. Navigate to the Tools tab
3. Click New MCP server
4. Add the server config above
5. Click the refresh button next to the devbridge server to reload the server config

Tool approval: Cursor prompts you to approve each MCP tool the first time it is used. Click Allow when prompted.

For more information, see Cursor's MCP documentation.

Claude Desktop

Add the server config above to claude_desktop_config.json, then restart Claude Desktop.

Note: Claude Desktop has a known issue where MCP servers are started twice. This may show a transient error indicator on launch, but DevBridge still works normally.

For more information, see Claude's MCP quickstart.

Windsurf

Add the server config above through Windsurf's MCP settings.

For more information, see Windsurf's MCP documentation.

VS Code

VS Code supports MCP via GitHub Copilot's agent mode. Add the following to your workspace .vscode/mcp.json (note the top-level key is servers, not mcpServers):

{
  "servers": {
    "devbridge": {
      "command": "npx",
      "args": ["devbridge-mcp@latest"]
    }
  }
}

Tool approval: VS Code prompts you to approve each MCP tool the first time it is used. Click Allow in the notification that appears.

For more information, see VS Code's MCP documentation.

→ Next: Quick Start