Integrated Browser MCP Server - Visual Studio Marketplace

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
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

(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

Install the extension from the VS Code Marketplace
Enable the browser tools in VS Code settings
```
"workbench.browser.enableChatTools": true
```
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).
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:

Open Integrated Browser MCP: Copy MCP URL — the full URL (with token) is copied to your clipboard.
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=<your-token>"
    }
  }
}

Replace <your-token> 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=<your-token>

Replace <your-token> 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

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

(back to top)

Acknowledgments

(back to top)