Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Playwriter Browser MCP navigate to example.com and take a screenshot"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
一个独立的 MCP (Model Context Protocol) 服务，通过 Playwriter Chrome 扩展连接用户的真实浏览器，提供 37 个结构化浏览器自动化工具。
对于任意 Agent 来说，只需添加一个 MCP 配置，就能操控用户真实的 Chrome 浏览器（带完整登录态）—— 无需 --remote-debugging-port，不受 Chrome 136+ 安全限制。
方案 | 能用真实 Profile | 结构化工具 | 不需要调试端口 |
Playwright MCP ( | ❌ | ✅ 38 个工具 | ❌ |
Playwriter | ✅ | ❌ 仅 1 个 | ✅ |
Browser MCP (本项目) | ✅ | ✅ 37 个工具 | ✅ |
Browser MCP = Playwriter 的连接方式 + Playwright MCP 的工具生态。
Related MCP server: Chrome MCP Server
AI Agent (Claude Code / VisionClaw / ...)
│ MCP Protocol (HTTP / SSE)
▼
┌──────────────────────────────────┐
│ Browser MCP Server (port 3280) │
│ │
│ 37 个结构化工具: │
│ ├── browser_navigate │
│ ├── browser_snapshot │
│ ├── browser_click │
│ ├── browser_type │
│ ├── browser_take_screenshot │
│ ├── ... (共 37 个) │
│ │
│ 连接层: │
│ Playwriter API → connectOverCDP │
└──────────────┬───────────────────┘
│ WebSocket
▼
┌──────────────────────────────────┐
│ Playwriter Relay (port 19988) │
│ (已有的 relay 或自动启动) │
└──────────────┬───────────────────┘
│ chrome.debugger API
▼
┌──────────────────────────────────┐
│ Chrome 浏览器 (用户真实 Profile) │
│ ├── 已登录的网站 │
│ ├── Cookies / Sessions │
│ └── Playwriter 扩展 (已安装) │
└──────────────────────────────────┘Chrome 浏览器 — 安装 Playwriter 扩展
Node.js >= 18
Playwriter CLI — npm install -g playwriter
# 1. 安装依赖
npm install
# 2. 配置环境变量（可选）
cp .env.example .env
# 3. 启动
npm run dev服务启动后，MCP 端点在 http://localhost:3280/mcp。
如果 Chrome 登录了多个 Google 账号，需要指定连接哪个：
# 查看可用的 Profile
playwriter browser list
# 指定 Profile 启动
PLAYWRITER_EXTENSION_ID="profile:104623951740642372686" npm run dev工具 | 说明 |
| 导航到 URL，返回页面快照 |
| 返回上一页 |
工具 | 说明 |
| 获取页面 accessibility tree（带 |
| 截图（支持 png/jpeg、全页、指定元素） |
工具 | 说明 |
| 点击元素（通过 ref 定位） |
| 向元素输入文本 |
| 按下键盘按键（Enter、Tab、Escape 等） |
| 鼠标悬停在元素上 |
| 拖拽元素到目标 |
| 在下拉框中选择选项 |
| 批量填写表单（文本框、复选框、单选按钮） |
工具 | 说明 |
| 标签页管理（list / new / close / select） |
| 关闭当前页面 |
| 等待文本出现/消失或指定时间 |
| 调整浏览器窗口大小 |
工具 | 说明 |
| 在页面中执行 JavaScript |
| 运行 Playwright 代码片段 |
工具 | 说明 |
| 获取控制台日志 |
| 获取网络请求列表 |
工具 | 说明 |
| 上传文件到 file input |
| 处理 alert/confirm/prompt 弹窗 |
工具 | 说明 |
| 移动鼠标到坐标 |
| 在坐标处点击 |
| 从坐标 A 拖拽到坐标 B |
| 按下鼠标按键 |
| 释放鼠标按键 |
| 滚动鼠标滚轮 |
工具 | 说明 |
| 生成 Playwright locator（用于编写测试） |
| 验证文本在页面上可见 |
| 验证元素可见 |
| 验证列表包含指定项 |
| 验证元素的值 |
工具 | 说明 |
| 将页面保存为 PDF |
| 开始录制 Playwright trace |
| 停止录制并保存 trace 文件 |
工具 | 说明 |
| 安装 Chromium 浏览器二进制文件 |
| 诊断工具：检查连接状态（无需主动调用，连接是自动的） |
{
"mcpServers": {
"browser": {
"type": "http",
"url": "http://localhost:3280/mcp"
}
}
}在 VisionClaw 的 mcp-servers.json 中添加上述配置即可。Agent 无需任何额外操作，直接调用 browser_navigate 等工具，连接会自动建立。
AI 使用这套工具的典型流程：
1. browser_navigate({ url: "https://x.com" })
→ 自动连接浏览器，导航到 X，返回页面快照
2. browser_snapshot()
→ 获取 accessibility tree，包含 [ref] 标记
3. browser_click({ ref: "compose-btn" })
→ 点击发帖按钮
4. browser_type({ ref: "tweet-input", text: "Hello World!" })
→ 输入帖子内容
5. browser_click({ ref: "post-btn" })
→ 发布无需手动连接、创建 session、选择 tab —— 一切自动完成。
变量 | 默认值 | 说明 |
|
| MCP HTTP 服务端口 |
|
| Playwriter WebSocket relay 端口 |
|
| Relay 地址 |
| （自动检测） | 多 Profile 时指定连接哪个扩展 |
|
| 截图、PDF、trace 文件输出目录 |
传统方案需要 --remote-debugging-port 来让程序操控浏览器，但 Chrome 136+ 禁止在默认 Profile 上使用该参数。
本项目利用 Playwriter 的 Chrome 扩展，通过 chrome.debugger API 从浏览器内部获取 CDP 访问权限，再通过 WebSocket relay 转发给 Playwright。这样：
✅ 不需要 --remote-debugging-port
✅ 可以使用用户的真实 Chrome Profile（带登录态）
✅ 暴露 37 个结构化 MCP 工具（与 Playwright MCP 对齐）
✅ 连接自动建立，无需手动操作
npm install # 安装依赖
npm run dev # 开发模式启动
npm run build # 编译 TypeScript
npm run lint # 类型检查
npm test # 运行测试Perform click on a web page element identified by its ref from a snapshot
Inputs: ref (required), button, element, modifiers, +1 more.
Close the current page
Inputs: no named parameters.
Returns console messages captured from the page. Each level includes more severe levels (error < warning < info < debug).
Inputs: level (required).
Perform drag and drop between two elements
Inputs: endRef (required), startRef (required), endElement (required), startElement (required).
Evaluate JavaScript expression on the page or on a specific element
Inputs: function (required), ref, element.
Upload one or multiple files to a file input element
Inputs: paths (required), ref.
Fill multiple form fields at once
Inputs: fields (required).
Generate a Playwright locator for an element (useful for writing tests)
Inputs: ref (required), element.
Handle a JavaScript dialog (alert, confirm, prompt). Dialogs are queued as they appear. This tool handles the most recent unhandled dialog.
Inputs: accept (required), promptText.
Hover over an element on the page
Inputs: ref (required), element.
Returns network requests captured since page load
Inputs: filter, static.
Save the current page as a PDF file
Inputs: filename.
Press a key on the keyboard. Use key names like 'ArrowLeft', 'Enter', 'Escape', 'a', 'Control+c', etc.
Inputs: key (required).
Reset the browser connection. Use when tools fail with connection errors, page closed errors, or the browser becomes unresponsive.
Inputs: no named parameters.
Resize the browser window
Inputs: width (required), height (required).
Run a Playwright code snippet. The function receives page as its argument. Example: async (page) => { await page.goto('https://example.com'); return await page.title(); }
Inputs: code (required).
Select an option in a dropdown
Inputs: ref (required), values (required), element.
Capture accessibility snapshot of the current page. Returns a text representation of the page with [ref] markers for interactive elements. Use these refs with other tools like browser_click.
Inputs: no named parameters.
Start recording a Playwright trace. Stop with browser_stop_tracing to save the trace file.
Inputs: no named parameters.
Stop trace recording and save the trace file
Inputs: no named parameters.
List, create, close, or select a browser tab
Inputs: action (required), index.
Take a screenshot of the current page
Inputs: ref, type, element, filename, +1 more.
Type text into an editable element identified by ref
Inputs: ref (required), text (required), slowly, submit, +1 more.
Verify an element is visible on the page
Inputs: role (required), accessibleName (required).
Verify a list with specific items is visible on the page
Inputs: ref (required), items (required), element (required).
Verify text is visible on the page
Inputs: text (required).
Verify an element's value
Inputs: ref (required), type (required), value (required), element (required).
Wait for text to appear or disappear, or wait for a specified time
Inputs: text, time, textGone.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 30 tools
Most tools have clear distinct purposes, but browser_evaluate and browser_run_code overlap in executing JavaScript, and some verification tools could be merged. Descriptions help differentiate.
All tools follow a consistent 'browser_verb_noun' pattern with underscores, making naming predictable and readable.
30 tools is slightly high, but the domain of browser automation justifies the breadth. Some tools could be combined (e.g., verification tools) without loss.
Covers navigation, interaction, form handling, dialogs, screenshots, PDF, tracing, network, console, tabs, JS execution, and verification. Missing cookie/storage management but core workflows are fully covered.
Web scraping, browser automation, screenshots and AI data extraction for AI agents via MCP.
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
Control a real browser from AI agents: navigate, click, type, screenshot, read the page.
Cloud browsers for AI agents: saved logins, residential IPs, live human takeover, 57 browser tools.
