MCP Integration

Connect AI agents like Claude Desktop, Claude Code, Cursor, VS Code Copilot, and OpenCode 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.

---

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 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", "@vibebrowser/mcp"]
    }
  }
}

Restart Claude Desktop after saving.

See MCP Quickstart for more details.

---

Cursor

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

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

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

---

VS Code (GitHub Copilot)

Add to your VS Code settings.json:

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

---

Windsurf

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

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

See Windsurf 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", "@vibebrowser/mcp"],
      "enabled": true
    }
  }
}

Or add via CLI:

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

See OpenCode MCP docs for more options.

---

Claude Code (claude-code)

Option 1: Use the CLI (recommended):

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

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

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

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

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

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

See Claude Code MCP docs for more options.

---

Gemini CLI

Add to ~/.gemini/settings.json:

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

---

Available Tools

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

Navigation Tools

Tool	Description
navigate_to_url	Navigate to a specific URL
navigate	Browser history navigation (back, forward, refresh)

Tab Management Tools

Tool	Description
create_new_tab	Open a new browser tab, optionally with a URL
switch_to_tab	Switch focus to a specific tab by ID
set_working_tab	Set the working tab for subagents without changing focus

Interaction Tools (Index-Based)

Tool	Description
click_by_index	Click an element by its index number from the page snapshot
fill_by_index	Fill a form field by its index number
select_by_index	Select an option from a dropdown by index
scroll	Scroll the page (up, down, left, right, or to element)
media_control_by_index	Control video/audio elements (play, pause, mute, etc.)

Advanced Interaction Tools

Tool	Description
keypress	Send keyboard input (Enter, Escape, Tab, shortcuts, etc.)
hover_element	Hover over an element to trigger tooltips or menus

Utility Tools

Tool	Description
wait	Wait for a specified duration (useful for page loads)
sub_agent	Execute a task in an isolated context with a new page
parallel	Execute multiple tool calls in parallel (OpenCode pattern)
web_fetch	Fetch and extract content from a URL without browser interaction

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 Desktop       Cursor          VS Code         OpenCode
     |                  |                |               |
     v                  v                v               v
 [vibe-mcp]        [vibe-mcp]       [vibe-mcp]      [vibe-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.

---

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", "@vibebrowser/mcp", "--port", "19999"]
    }
  }
}

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

Debug mode

Enable debug logging to diagnose issues:

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

---

Links

• npm Package
• GitHub Repository
• Extension Installation