A fast, lightweight Model Context Protocol (MCP) server that empowers LLMs with browser automation via Puppeteer’s structured accessibility data, featuring optional vision mode for complex visual understanding and flexible, cross-platform configuration. - ⚡ Fast & lightweight. Utilizes Puppeteer's label index, not pixel-based input and accessibility DOM tree. - 👁️ Vision Mode Support. Optional vi
Add this skill
npx mdskills install bytedance/ui-tars-desktopComprehensive browser automation MCP server with excellent tool coverage and flexible deployment options
1## Browser Use MCP Server23[](https://www.npmjs.com/package/@agent-infra/mcp-server-browser) [](https://smithery.ai/server/@bytedance/mcp-server-browser) [](https://app.codecov.io/gh/bytedance/UI-TARS-desktop/components/mcp_server_browser)45[](https://cursor.com/install-mcp?name=browser-use&config=eyJjb21tYW5kIjoibnB4IEBhZ2VudC1pbmZyYS9tY3Atc2VydmVyLWJyb3dzZXJAbGF0ZXN0In0%3D) [<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%253Amcp%252Finstall%253F%257B%2522name%2522%253A%2522browser%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540agent-infra%252Fmcp-server-browser%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%253Amcp%252Finstall%253F%257B%2522name%2522%253A%2522browser%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540agent-infra%252Fmcp-server-browser%2540latest%2522%255D%257D)678A fast, lightweight Model Context Protocol (MCP) server that empowers LLMs with browser automation via Puppeteer’s structured accessibility data, featuring optional vision mode for complex visual understanding and flexible, cross-platform configuration.9101112### Key Features1314- **⚡ Fast & lightweight**. Utilizes Puppeteer's label index, not pixel-based input and accessibility DOM tree.15- **👁️ Vision Mode Support**. Optional visual understanding capabilities for complex layouts and visual elements when structured data isn't sufficient.16- **🤖 LLM-optimized**. No vision models needed, operates purely on structured data, less context reducing context token usage.17- **🧩 Flexible Runtime Configuration**. Customize viewport size, coordinate system factors, and User-Agent at runtime via HTTP headers.18- **🌐 Cross-Platform & Extensible**. Support for remote and local browsers, the use of a custom browser engine.192021### Requirements2223- Node.js 18 or newer24- VS Code, Cursor, Windsurf, Claude Desktop or any other MCP client252627### Getting started2829#### Local (Stdio)3031First, install the Browser MCP server with your client. A typical configuration looks like this:3233```js34{35 "mcpServers": {36 "browser": {37 "command": "npx",38 "args": [39 "@agent-infra/mcp-server-browser@latest"40 ]41 }42 }43}44```4546<details><summary><b>Install in VS Code</b></summary>4748You can also install the Browser MCP server using the VS Code CLI:4950```bash51# For VS Code52code --add-mcp '{"name":"browser","command":"npx","args":["@agent-infra/mcp-server-browser@latest"]}'53```5455After installation, the Browser MCP server will be available for use with your GitHub Copilot agent in VS Code.56</details>5758<details>59<summary><b>Install in Cursor</b></summary>6061Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, use `command` type with the command `npx @agent-infra/mcp-server-browser`. You can also verify config or add command like arguments via clicking `Edit`.6263```js64{65 "mcpServers": {66 "browser": {67 "command": "npx",68 "args": [69 "@agent-infra/mcp-server-browser@latest"70 ]71 }72 }73}74```75</details>7677<details>78<summary><b>Install in Windsurf</b></summary>7980Follow Windsuff MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use following configuration:8182```js83{84 "mcpServers": {85 "browser": {86 "command": "npx",87 "args": [88 "@agent-infra/mcp-server-browser@latest"89 ]90 }91 }92}93```94</details>9596<details>97<summary><b>Install in Claude Desktop</b></summary>9899Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user), use following configuration:100101```js102{103 "mcpServers": {104 "browser": {105 "command": "npx",106 "args": [107 "@agent-infra/mcp-server-browser@latest"108 ]109 }110 }111}112```113</details>114115#### Remote (SSE / Streamable HTTP)116117At the same time, use `--port $your_port` arg to start the browser mcp can be converted into SSE and Streamable HTTP Server.118119```bash120# normal run remote mcp server121npx @agent-infra/mcp-server-browser --port 8089122123# run with DISPLAY environment for VNC or other virtual display124DISPLAY=:0 npx @agent-infra/mcp-server-browser --port 8089125```126127You can use one of the two MCP Server remote endpoint:128- Streamable HTTP(Recommended): `http://127.0.0.1::8089/mcp`129- SSE: `http://127.0.0.1::8089/sse`130131132And then in MCP client config, set the `url` to the SSE endpoint:133134```js135{136 "mcpServers": {137 "browser": {138 "url": "http://127.0.0.1::8089/sse"139 }140 }141}142```143144`url` to the Streamable HTTP:145146```js147{148 "mcpServers": {149 "browser": {150 "type": "streamable-http", // If there is MCP Client support151 "url": "http://127.0.0.1::8089/mcp"152 }153 }154}155```156157#### In-memory call158159If your MCP Client is developed based on JavaScript / TypeScript, you can directly use in-process calls to avoid requiring your users to install the command-line interface to use Browser MCP.160161```js162import { Client } from '@modelcontextprotocol/sdk/client/index.js';163import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';164165// type: module project usage166import { createServer } from '@agent-infra/mcp-server-browser';167// commonjs project usage168// const { createServer } = await import('@agent-infra/mcp-server-browser')169170const client = new Client(171 {172 name: 'test browser client',173 version: '1.0',174 },175 {176 capabilities: {},177 },178);179180const server = createServer();181const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();182183await Promise.all([184 client.connect(clientTransport),185 server.connect(serverTransport),186]);187188// list tools189const result = await client.listTools();190console.log(result);191192// call tool193const toolResult = await client.callTool({194 name: 'browser_navigate',195 arguments: {196 url: 'https://www.google.com',197 },198});199console.log(toolResult);200```201202### Configuration203204Browser MCP server supports following arguments. They can be provided in the JSON configuration above, as a part of the `"args"` list:205206```207> npx @agent-infra/mcp-server-browser@latest -h208 -V, --version output the version number209 --browser <browser> browser or chrome channel to use, possible values: chrome, edge, firefox.210 --cdp-endpoint <endpoint> CDP endpoint to connect to, for example "http://127.0.0.1:9222/json/version"211 --ws-endpoint <endpoint> WebSocket endpoint to connect to, for example "ws://127.0.0.1:9222/devtools/browser/{id}"212 --executable-path <path> path to the browser executable.213 --headless run browser in headless mode, headed by default214 --host <host> host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.215 --port <port> port to listen on for SSE and HTTP transport.216 --proxy-bypass <bypass> comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"217 --proxy-server <proxy> specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"218 --user-agent <ua string> specify user agent string219 --user-data-dir <path> path to the user data directory.220 --viewport-size <size> specify browser viewport size in pixels, for example "1280, 720"221 --output-dir <path> path to the directory for output files222 --vision Run server that uses screenshots (Aria snapshots are used by default)223 -h, --help display help for command224```225226#### Runtime Configuration227228The browser runtime requires configuration for `Viewport Size`, `Vision Model Coordinate Factors`, and `User Agent`. These can be passed through corresponding HTTP headers:229230| Header | Description |231|--------|-------------|232| `x-viewport-size` | Browser viewport size, format: `width,height` separated by comma |233| `x-vision-factors` | Vision model coordinate system factors, format: `x_factor,y_factor` separated by comma |234| `x-user-agent` | User Agent string, defaults to system User Agent if not specified |235> **Note:** Header names are case-insensitive.236237Example:238239```http240x-viewport-size: 1920,1080241x-vision-factors: 1.0,1.0242x-user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36243```244245246### Docker247248We have unified the deployment of VNC and MCP under a single URL endpoint, The Dockerfile and DockerHub image will be published together! [video](https://github.com/user-attachments/assets/e04e60aa-c9f9-4732-ac33-66e41d68056b)249250<!--- API generated by update-readme.js -->251252### API253254#### Tools255256| Tool Name | Description | Parameters |257|-----------|-------------|------------|258| `browser_click` | Click an element on the page, before using the tool, use `browser_get_clickable_elements` to get the index of the element, but not call `browser_get_clickable_elements` multiple times | **index** (number, optional): Index of the element to click |259| `browser_close` | Close the browser when the task is done and the browser is not needed anymore | |260| `browser_close_tab` | Close the current tab | |261| `browser_evaluate` | Execute JavaScript in the browser console | **script** (string, required): JavaScript code to execute, () => { /* code */ } |262| `browser_form_input_fill` | Fill out an input field, before using the tool, Either 'index' or 'selector' must be provided | **selector** (string, optional): CSS selector for input field, priority use index, if index is not provided, use selector<br/>**index** (number, optional): Index of the element to fill<br/>**value** (string, required): Value to fill<br/>**clear** (boolean, optional): Whether to clear existing text before filling |263| `browser_get_clickable_elements` | Get the clickable or hoverable or selectable elements on the current page, don't call this tool multiple times | |264| `browser_get_download_list` | Get the list of downloaded files | |265| `browser_get_markdown` | Get the markdown content of the current page | |266| `browser_get_text` | Get the text content of the current page | |267| `browser_go_back` | Go back to the previous page | |268| `browser_go_forward` | Go forward to the next page | |269| `browser_hover` | Hover an element on the page, Either 'index' or 'selector' must be provided | **index** (number, optional): Index of the element to hover<br/>**selector** (string, optional): CSS selector for element to hover |270| `browser_navigate` | Navigate to a URL | **url** (string, required): |271| `browser_new_tab` | Open a new tab | **url** (string, required): URL to open in the new tab |272| `browser_press_key` | Press a key on the keyboard | **key** (string, required): Name of the key to press or a character to generate, such as Enter, Tab, Escape, Backspace, Delete, Insert, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, PageUp, PageDown, Home, End, ShiftLeft, ShiftRight, ControlLeft, ControlRight, AltLeft, AltRight, MetaLeft, MetaRight, CapsLock, PrintScreen, ScrollLock, Pause, ContextMenu |273| `browser_read_links` | Get all links on the current page | |274| `browser_screenshot` | Take a screenshot of the current page or a specific element | **name** (string, optional): Name for the screenshot<br/>**selector** (string, optional): CSS selector for element to screenshot<br/>**index** (number, optional): index of the element to screenshot<br/>**width** (number, optional): Width in pixels (default: viewport width)<br/>**height** (number, optional): Height in pixels (default: viewport height)<br/>**fullPage** (boolean, optional): Full page screenshot (default: false)<br/>**highlight** (boolean, optional): Highlight the element |275| `browser_scroll` | Scroll the page | **amount** (number, optional): Pixels to scroll (positive for down, negative for up), if the amount is not provided, scroll to the bottom of the page |276| `browser_select` | Select an element on the page with index, Either 'index' or 'selector' must be provided | **index** (number, optional): Index of the element to select<br/>**selector** (string, optional): CSS selector for element to select<br/>**value** (string, required): Value to select |277| `browser_switch_tab` | Switch to a specific tab | **index** (number, required): Tab index to switch to |278| `browser_tab_list` | Get the list of tabs | |279| `browser_vision_screen_capture` | Take a screenshot of the current page for vision mode | |280| `browser_vision_screen_click` | Click left mouse button on the page with vision and snapshot, before calling this tool, you should call `browser_vision_screen_capture` first only once, fallback to `browser_click` if failed | **factors** (array, optional): Vision model coordinate system scaling factors [width_factor, height_factor] for coordinate space normalization. Transformation formula: x = (x_model * screen_width * width_factor) / width_factor y = (y_model * screen_height * height_factor) / height_factor where x_model, y_model are normalized model output coordinates (0-1), screen_width/height are screen dimensions, width_factor/height_factor are quantization factors, If the factors are unknown, leave it blank. Most models do not require this parameter.<br/>**x** (number, required): X pixel coordinate<br/>**y** (number, required): Y pixel coordinate |281282#### Resources283284| Resource Name | URI Pattern | Description | MIME Type |285|---------------|-------------|-------------|-----------|286| Browser console logs | `console://logs` | | text/plain |287| Browser Downloads | `download://{name}` | | Automatic identification based on file extension |288| Browser Screenshots | `screenshot://{name}` | | Automatic identification based on file extension |289290<!--- End of API generated section -->291292### Development293294Access http://127.0.0.1:6274/:295296```bash297npm run dev298```299300### Extended CLI Entry301302```js303#!/usr/bin/env node304305const {306 BaseLogger,307 setConfig,308 addMiddleware,309} = require('@agent-infra/mcp-server-browser/request-context');310311class CustomLogger extends BaseLogger {312 info(...args) {313 console.log('custom');314 console.log(...args);315 }316}317318addMiddleware((req, res, next) => {319 console.log('req', req.headers);320 next();321});322323setConfig({324 logger: new CustomLogger(),325});326327// start server328require('@agent-infra/mcp-server-browser/index');329```330
Full transparency — inspect the skill content before installing.