MCP Integration

Connect AI agents like Claude Code, Cursor, VS Code Copilot, OpenCode, Codex, Gemini CLI, and more to control your browser through the Model Context Protocol (MCP).

What is MCP?

The Model Context Protocol (MCP) is an open standard that allows AI applications to connect to external tools and data sources. Vibe's MCP integration lets multiple AI agents control your browser simultaneously.

Why Use Vibe MCP?

Feature	Vibe MCP	Playwright MCP	BrowserMCP
Multi-Agent Support	Yes	No	No
Uses Your Browser Profile	Yes	No	No
Logged-In Sessions	Yes	No	No
No Separate Browser	Yes	No	No
Local & Private	Yes	Yes	Partial

Key advantage: Vibe MCP is the only solution that supports multiple AI agents controlling the same browser simultaneously. Run Claude Desktop, Cursor, and VS Code all at once.

Current Limitation: Multiple Browsers

The local vibebrowser-mcp relay currently models one connected extension session, not an explicit browser selector.

• If you enable MCP External Control in more than one browser or profile on the same machine, browser targeting is undefined.
• tabs / list_pages show the tabs from whichever extension session currently owns the relay connection.
• open, navigate, new_page, and other commands run against that same session.
• If you observe one command affecting more than one browser, treat that as a bug rather than supported behavior.

Current workaround:

• Enable MCP External Control in only one browser/profile per relay port.
• If you need to target a specific extension instance, use remote mode with an explicit UUID instead of the default local relay path.

---

Quick Setup

Step 1: Install the Vibe Extension

Follow the extension installation guide to install Vibe in your browser.

Step 2: Enable MCP External Control

1. Click the Vibe extension icon in your browser toolbar
2. Open Settings
3. Scroll to the MCP External Control section
4. Toggle Enable MCP External Control to ON
5. The status should show "Connected" with a green indicator

Step 3: Configure Your AI Application

Add the Vibe MCP server to your AI application's configuration.

---

Configuration by AI Client

Claude Code (claude-code)

Option 1: Use the CLI (recommended):

claude mcp add --transport stdio vibe -- npx -y --package @vibebrowser/mcp vibebrowser-mcp

Option 2: Project-level .mcp.json (for team sharing):

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

Option 3: User-level config in ~/.claude.json:

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

After adding, run /mcp in Claude Code to verify the connection.

See Claude Code MCP docs for more options.

---

OpenCode

Add to your opencode.json (or opencode.jsonc) in your project root:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "vibe": {
      "type": "local",
      "command": ["npx", "-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"],
      "enabled": true
    }
  }
}

Or add via CLI:

opencode mcp add vibe -- npx -y --package @vibebrowser/mcp vibebrowser-mcp

See OpenCode MCP docs for more options.

---

Cursor

1. Open Cursor Settings (Cmd/Ctrl + ,)
2. Go to Features → MCP Servers
3. Click Add Server and add:

{
  "vibe": {
    "command": "npx",
    "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
  }
}

Or edit ~/.cursor/mcp.json directly.

---

Claude Desktop

Edit your Claude Desktop config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

Restart Claude Desktop after saving.

See MCP Quickstart for more details.

---

VS Code (GitHub Copilot)

Add to your VS Code settings.json:

{
  "github.copilot.chat.mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

---

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

See Windsurf MCP docs for more options.

---

Gemini CLI

Option 1: Use the CLI:

gemini mcp add vibe -- npx -y --package @vibebrowser/mcp vibebrowser-mcp

Option 2: Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]
    }
  }
}

See Gemini CLI MCP docs for more options.

---

Codex (OpenAI)

Option 1: Use the CLI (recommended):

codex mcp add vibe -- npx -y --package @vibebrowser/mcp vibebrowser-mcp

Option 2: Add to ~/.codex/config.toml:

[mcp_servers.vibe]
command = "npx"
args = ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp"]

See Codex MCP docs for more options.

---

Available Tools

When connected, AI agents have access to the following browser automation tools:

Navigation Tools

Tool	Description
navigate_page	Navigate to a URL, or move back/forward/reload

Tab Management Tools

Tool	Description
list_pages	List open browser pages/tabs
new_page	Open a new page, optionally with a URL
close_page	Close a specific page by ID

Interaction Tools (Index-Based)

Tool	Description
click	Click an element by canonical ref from page snapshot
fill	Fill a field by canonical ref from page snapshot
fill_form	Fill multiple fields in one call
type_text	Type into the focused input
scroll_page	Scroll the page up or down
media_control	Control video/audio elements (play, pause, mute, etc.)

Advanced Interaction Tools

Tool	Description
press_key	Send keyboard input (Enter, Escape, Tab, shortcuts, etc.)
hover	Hover over an element to trigger tooltips or menus
drag	Drag from one point/element to another

Page Inspection & Debug Tools

Tool	Description
take_screenshot	Take a screenshot of the current page
take_md_snapshot	Extract indexed markdown from the current page
take_a11y_snapshot	Extract the indexed accessibility tree with A<n> refs
take_html_snapshot	Extract indexed HTML from the current page
evaluate_script	Run a JavaScript function in the page context
list_network_requests	List recent network requests for a page/tab
get_network_request	Get details for one captured network request

Utility Tools

Tool	Description
wait	Wait for a specified duration (useful for page loads)

Google Workspace Tools

These tools require Google Workspace connection in Settings:

Tool	Description
gmail_search	Search emails in Gmail
gmail_get_message	Get a specific email message
gmail_get_thread	Get an email thread
gmail_create_draft	Create a draft email
gmail_send_message	Send an email
calendar_view	View calendar events
calendar_create	Create a calendar event

---

Architecture

Claude Code      Cursor          VS Code        Codex       Gemini CLI
     |                  |                |            |             |
     v                  v                v            v             v
 [vibebrowser-mcp] [vibebrowser-mcp] [vibebrowser-mcp] [vibebrowser-mcp] [vibebrowser-mcp]
     |                  |                |            |             |
     +------------------+----------------+------------+-------------+
                        |
                        v
                  [Relay Daemon]  <-- Auto-spawned, handles multiplexing
                        |
                        v
                 [Vibe Extension]
                        |
                        v
                   [Your Chrome]

The relay daemon automatically starts when the first MCP client connects and handles multiplexing requests from multiple AI agents to a single browser extension.

Important: this multiplexing is agent-level, not browser-selection-level. Multiple agents can share one connected browser session, but the local relay does not yet expose a first-class way to pick between multiple browsers that all have the extension enabled.

---

Troubleshooting

"No connection to Vibe extension"

1. Make sure the Vibe extension is installed in Chrome
2. Click the extension icon and enable "MCP External Control" in Settings
3. Check that the status shows "Connected"

Extension shows "Disconnected"

The extension reconnects automatically every 30 seconds. You can also:

1. Toggle MCP External Control OFF and ON again
2. Reload the extension from chrome://extensions

Port conflicts

Vibe MCP uses ports 19888 (agents) and 19889 (extension). If you have conflicts:

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp", "--port", "19999"]
    }
  }
}

Make sure to update the port in extension settings to match.

Multiple browsers are open

If Chrome, Brave, or multiple browser profiles all have Vibe MCP External Control enabled, the local relay does not currently guarantee which browser session vibebrowser-mcp or vibebrowser-cli will target.

Today, the safe setup is:

1. Enable MCP External Control in one browser/profile only.
2. Disable it in the others, or point them at different relay ports.
3. Use remote mode with an explicit UUID when you need deliberate browser-instance selection.

Debug mode

Enable debug logging to diagnose issues:

{
  "mcpServers": {
    "vibe": {
      "command": "npx",
      "args": ["-y", "--package", "@vibebrowser/mcp", "vibebrowser-mcp", "--debug"]
    }
  }
}

---

Links

• npm Package
• GitHub Repository
• Extension Installation