Vscode Integrated Browser Mcp

[![MIT License][license-shield]][license-url] [![LinkedIn][linkedin-shield]][linkedin-url]

Integrated Browser MCP

A VS Code extension that exposes the Integrated Browser as an MCP server for AI agents

Explore the docs »

Report Bug · Request Feature

Table of Contents

About The Project

Built With

Getting Started

Prerequisites Installation Claude Code Cline Continue.dev

Available Tools Settings Commands Known Limitations Roadmap License Contact Acknowledgments

About The Project

VS Code 1.112+ provides powerful browser agent tools — open pages, read accessibility trees, take screenshots, click elements, type text — but only exposes them to VS Code's built-in Copilot chat agent. External AI agents have no access to these tools.

This extension bridges that gap. It runs an MCP server inside VS Code's extension host (where VS Code APIs are accessible) and proxies tool calls from any MCP-compatible AI agent to VS Code's internal browser capabilities — without duplicating the browser implementation or losing the visual feedback of the integrated panel.

Works with any agent that supports the MCP streamable HTTP transport running on the same machine: Claude Code, Cline, Continue.dev, and others.

Built With

[![TypeScript][TypeScript]][TypeScript-url] [![VS Code Extension API][VSCode]][VSCode-url] [![Model Context Protocol SDK][MCP]][MCP-url] [![Express][Express]][Express-url] [![Zod][Zod]][Zod-url]

(back to top)

Getting Started

Prerequisites

• VS Code 1.112 or later
• An MCP-compatible AI agent (Claude Code, Cline, Continue.dev, or similar)

Installation

1. Install the extension from the VS Code Marketplace

1. Enable the browser tools in VS Code settings

``json "workbench.browser.enableChatTools": true ``

1. Open the Integrated Browser panel at least once

The browser tools are only registered after the panel has been opened. Open it via the Command Palette (Ctrl+Shift+P) → Integrated Browser: Open, then enter any URL (e.g. https://example.com).

1. Connect your MCP client — see the sections below for your agent.

> [!NOTE] > VS Code shows a consent dialog the first time each tool is used in a session. Click Allow to proceed — subsequent calls in the same session run silently. > > To eliminate dialogs entirely, run Integrated Browser MCP: Enable CDP from the Command Palette after installation. It modifies argv.json and requires a VS Code restart.

Claude Code

The extension auto-registers itself with Claude Code on first activation. No manual config needed — on startup it writes the correct URL (including session token) to ~/.claude.json and prompts you to confirm.

Run claude in your project — the integratedBrowser MCP server will be listed automatically.

> [!TIP] > If you need the URL (e.g. after reinstalling), run Integrated Browser MCP: Copy MCP URL from the Command Palette to copy it to the clipboard.

Cline

The server requires a session token that is unique per machine. Get your URL from the Command Palette:

1. Open Integrated Browser MCP: Copy MCP URL — the full URL (with token) is copied to your clipboard.
2. Open Cline's MCP settings and add a Remote Server via the UI (choose Streamable HTTP from the transport dropdown), or edit the config file directly.

Config file locations:

• Linux/macOS: ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Windows: %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

{
  "mcpServers": {
    "integratedBrowser": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:3100/mcp?token="
    }
  }
}

Replace `` with the value from the Copy MCP URL command.

> [!IMPORTANT] > The "type": "streamableHttp" field is required. Without it Cline silently falls back to the legacy SSE transport and the connection will fail.

Continue.dev

Get your URL from the Command Palette (Integrated Browser MCP: Copy MCP URL), then add to ~/.continue/config.yaml:

mcpServers:
  - name: integratedBrowser
    type: streamable-http
    url: http://127.0.0.1:3100/mcp?token=

Replace `` with the value from the Copy MCP URL command.

(back to top)

Available Tools

Page management

| Tool | Description | | --- | --- | | open_browser_page | Open a URL. Returns a pageId required by all other tools. Pass forceNew: true to open a second tab. | | list_pages | List all pages opened in this session with their IDs and URLs. | | close_page | Close a page and remove it from the session. | | navigate_page | Navigate to a URL, or go back / forward / reload. | | get_url | Get the current URL of a page. | | list_visible_pages | List browser tabs currently visible in VS Code (not limited to this session). | | attach_visible_page | Attach a visible tab to the session by URL, returning a pageId. |

Reading

| Tool | Description | | --- | --- | | read_page | Read the page as an accessibility tree (title, URL, element refs). | | get_dom | Get raw HTML of the page or a specific element (selector). | | markdown | Extract page content as clean Markdown. Optionally scope to a CSS selector. | | eval_js | Evaluate a JavaScript expression and return the result. Same trust model as the DevTools console — don't pass untrusted input. |

Interaction

| Tool | Description | | --- | --- | | click_element | Click an element by ref (from read_page) or selector. | | type_in_page | Type text or press a key (e.g. "Enter", "Control+a"). Target with ref or selector. | | hover_element | Hover over an element. | | drag_element | Drag from one element to another. | | handle_dialog | Accept or dismiss a browser dialog (alert / confirm / prompt). | | scroll | Scroll by a delta or to an absolute position. |

Visual

| Tool | Description | | --- | --- | | screenshot_page | Take a screenshot. Supports fullPage, waitMs, ref, and selector. | | screenshot_slice | Take a viewport-sized screenshot of a specific scroll slice (supports negative indexing). | | emulate | Set the browser viewport size. |

Console

| Tool | Description | | --- | --- | | get_console | Read captured console.log / warn / error / info / debug output. Filter by levels. | | clear_console | Clear the console capture buffer. |

Element selection

| Tool | Description | | --- | --- | | get_element_selection | Return the element last captured via the Pick Element for Agent button — tag, text, HTML, and bounding rect. The button appears in the bottom-right corner of every browser page. Requires CDP (run Enable CDP first). | | clear_element_selection | Clear the stored element selection. |

(back to top)

Settings

| Setting | Default | Description | | --- | --- | --- | | integratedBrowserMcp.port | 3100 | Port the MCP server listens on | | integratedBrowserMcp.autoStart | true | Start the server automatically on VS Code launch | | integratedBrowserMcp.extendedLogging | false | Emit verbose CDP/element-picker diagnostics to the output channel (always on in the Extension Development Host) |

(back to top)

Commands

All commands are available via the Command Palette (Ctrl+Shift+P).

| Command | Description | | --- | --- | | Integrated Browser MCP: Start Server | Start the MCP server manually. Useful when autoStart is disabled. | | Integrated Browser MCP: Stop Server | Stop the running MCP server. | | Integrated Browser MCP: Copy MCP URL | Copy the full MCP server URL (including session token) to the clipboard. Use this to configure Cline, Continue.dev, or other MCP clients. | | Integrated Browser MCP: Pick Element for Agent | Activates the element picker in the active browser tab (same as clicking the floating ⬡ Pick for Agent button). Click any element to capture it; retrieve via get_element_selection. Requires CDP. | | Integrated Browser MCP: Enable CDP (dialog-free browser tools) | Writes enable-proposed-api to argv.json so all browser tools run without consent dialogs after a VS Code restart. | | Integrated Browser MCP: List Available LM Tools (debug) | Print all LM tools registered in VS Code to the Browser MCP Debug output channel. Helpful for verifying that the browser tools are active when troubleshooting. |

(back to top)

Known Limitations

• list_pages URL is stale after in-page navigation — link clicks and form submissions don't update the stored URL. Use get_url or read_page for the live URL.
• open_browser_page navigates the existing tab by default — without forceNew: true, VS Code reuses the current Integrated Browser tab instead of opening a new one. Use forceNew: true when you need two tabs open simultaneously.
• No multi-window support — tool calls always target the browser in the window where the extension activated.
• MCP server security — the server binds to 127.0.0.1 and requires a session token on all /mcp requests. The token is auto-written to ~/.claude.json on first activation. Do not expose port 3100 externally; any local process that learns the token can invoke eval_js and execute arbitrary JavaScript in the browser.

(back to top)

Roadmap

• [x] MCP HTTP server with stateful session management
• [x] Browser bridge via vscode.lm.invokeTool
• [x] Page management: open_browser_page, list_pages, close_page, navigate_page, get_url, list_visible_pages, attach_visible_page
• [x] Reading: read_page, get_dom, markdown, eval_js
• [x] Interaction: click_element, type_in_page, hover_element, drag_element, handle_dialog, scroll
• [x] Visual: screenshot_page (fullPage / waitMs), screenshot_slice, emulate
• [x] Console capture: get_console, clear_console
• [x] CDP layer — dialog-free tool execution when proposed browser API is available
• [x] Auto-configure ~/.claude.json on first activation
• [x] One-click CDP setup via Enable CDP command
• [x] Element selection — floating "Pick for Agent" button in every browser page; agent retrieves via get_element_selection
• [ ] Reliable multi-tab support — stable CDP session tracking and element picker across multiple open tabs (in progress)
• [ ] Multi-window support — per-window MCP server / port registry (deferred)

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Dawid Nitka - [LinkedIn][linkedin-url]

Project Link: https://github.com/Nagell/vscode-integrated-browser-mcp

(back to top)

Acknowledgments

• Model Context Protocol SDK
• VS Code Extension API — Language Model Tools
• Best-README-Template

(back to top)

[license-shield]: https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge [license-url]: ./LICENSE [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555 [linkedin-url]: https://www.linkedin.com/in/dawidnitka

[TypeScript]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white [TypeScript-url]: https://www.typescriptlang.org/ [VSCode]: https://img.shields.io/badge/VS%20Code%20API-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white [VSCode-url]: https://code.visualstudio.com/api [MCP]: https://img.shields.io/badge/MCP%20SDK-000000?style=for-the-badge&logo=modelcontextprotocol&logoColor=white [MCP-url]: https://github.com/modelcontextprotocol/typescript-sdk [Express]: https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white [Express-url]: https://expressjs.com/ [Zod]: https://img.shields.io/badge/Zod-3E67B1?style=for-the-badge&logo=zod&logoColor=white [Zod-url]: https://zod.dev/

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Nagell
• Source: Nagell/vscode-integrated-browser-mcp
• License: MIT
• Homepage: https://marketplace.visualstudio.com/items?itemName=Nagell.vscode-integrated-browser-mcp

Install and usage instructions live in the source repository linked above.