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 may show a confirmation dialog when opening or closing a page.
Click Allow to proceed. Read, screenshot, navigate, click, and type operations run without interruption.

Claude Code

Project-scoped — add .mcp.json to your project root:

{
  "mcpServers": {
    "integratedBrowser": {
      "type": "http",
      "url": "http://localhost:3100/mcp"
    }
  }
}

User-scoped — add to ~/.claude.json:

{
  "mcpServers": {
    "integratedBrowser": {
      "type": "http",
      "url": "http://localhost:3100/mcp"
    }
  }
}

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

Cline

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://localhost:3100/mcp"
    }
  }
}

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

Add to ~/.continue/config.yaml:

mcpServers:
  - name: integratedBrowser
    type: streamable-http
    url: http://localhost:3100/mcp

(back to top)

Available Tools

Tool	Description
`open_browser_page`	Open a URL in the Integrated Browser. Returns a `pageId` required by all other tools. Always pass a `url` — if the page is already open, VS Code will simply navigate to it. Pass `forceNew: true` to open a second tab.
`read_page`	Read the current page content as an accessibility tree (title, URL, element refs).
`screenshot_page`	Take a screenshot of the page or a specific element (`ref` or `selector`).
`navigate_page`	Navigate to a URL, or go `back` / `forward` / `reload`.
`click_element`	Click an element. Provide `element` (human description) plus `ref` from a snapshot or a `selector`.
`type_in_page`	Type text or press a key (e.g. `"Enter"`, `"Control+a"`). Target with `ref` or `selector`.
`list_pages`	List all pages opened in this session with their page IDs and URLs.
`close_page`	Close a page and remove it from the session.

(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

(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: 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 connection issues.

(back to top)

Known Limitations

list_pages shows the URL at open time, not the current URL after link clicks or form submissions. It updates on explicit navigate_page calls. Use read_page to get the live URL.
WSL + native Windows Claude Code: os.homedir() resolves to the WSL Linux home, not the Windows home. Add the MCP config manually to the Windows-side %APPDATA%\Claude\claude.json.
No multi-window support in v1 — tool calls always target the browser in the window where the extension activated.

(back to top)

Roadmap

[x] MCP HTTP server with stateful session management
[x] Browser bridge via vscode.lm.invokeTool
[x] open_browser_page, read_page, screenshot_page
[x] navigate_page (url / back / forward / reload)
[x] click_element, type_in_page
[x] list_pages, close_page
[x] Multi-tab support via forceNew
[ ] Auto-configure ~/.claude.json on first activation
[ ] Element selection push — intercept VS Code's browser element picker and forward the payload to Claude Code via MCP server-sent events

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