一起浏览MCP
带有MCP服务器的Playwright浏览器代理
桌面上的Playwright浏览器和MCP服务器。您可以启动一个令人兴奋的浏览器（用于人机交互）和一个配套的MCP服务器，该服务器可用于通过HTTP API或MCP服务器控制浏览器。
该项目为浏览器自动化和共同浏览提供了两项互补服务：
- A. 浏览器代理服务 它通过HTTP控制持久的Playwright浏览器实例。让你像往常一样登录你使用的服务。
- 一 MCP服务器 通过FastMCP框架向MCP客户端（如Claude Desktop）公开浏览器功能。可以在您提供的经过身份验证的会话中运行，使您的MCP命令作为经过身份验证用户具有更大的功能和实用性。
这两个服务都是用Deno和TypeScript构建的，可以无缝协作。
特性
- 多浏览器支持：使用Chromium（默认）或Firefox运行。
- 持久浏览器会话：单个浏览器实例在服务的生命周期内运行。
- 命名选项卡：使用唯一的ID在单个浏览器会话中控制多个页面（选项卡）。
- HTTP API：通过HTTP使用简单的JSON命令与浏览器交互。
- MCP集成：通过Cline、Windsurf、Claude Desktop或其他MCP客户端使用浏览器。
- 类型安全：使用Zod对传入命令进行稳健验证。
- 使用API令牌保护浏览器代理服务（HTTP）端点。
注意：目前支持Mac OS，但可以扩展到其他平台，只需稍作更改。
这是电脑用户/操作员吗？
不，现在不行。这是一款（令人兴奋的）网络浏览器，其行为类似于普通的人控浏览器，但也允许您通过HTTP API或MCP客户端控制会话。虽然您可以获取屏幕截图、下拉文档等，但这不是计算机使用/操作员服务。
把它想象成基于MCP的浏览器会话远程控制，用于在编码时拉取文档或其他任务。
核心组件
- 浏览器服务:
- browser.ts：主要浏览器代理服务实现 - types.ts：使用Zod定义命令结构和类型
- MCP服务器:
- mcp.ts：连接到浏览器服务的FastMCP实现
用法
开发人员快速入门
- 安装先决条件:
安装Playwright的浏览器包（假设您有 npx 已安装）：
# Install all browsers
npx playwright install
# Or install specific browsers
npx playwright install chromium
npx playwright install firefox安装Deno：
curl -fsSL https://deno.land/install.sh | sh看 Deno安装 了解更多详情。
- 启动浏览器服务:
deno task browser这将启动浏览器代理 http://localhost:8888 （或您环境中指定的端口）
- 配置您的MCP客户端:
{
"mcpServers": {
"browse-together": {
"command": "deno",
"args": ["run", "-A", "/Users/duane/Projects/browse-together-mcp/mcp.ts"]
},
}
}您也可以直接启动MCP服务器进行测试：
deno task mcp浏览器选择
您可以通过设置来选择要使用的浏览器 BROWSER_TYPE 环境变量或使用 --browser-type 标志：
# Use Firefox via environment variable
BROWSER_TYPE=firefox deno task browser
# Or via CLI flag
deno task browser --browser-type firefox选项1：通过HTTP API进行交互
向发送POST请求 /api/browser/:pageId JSON正文描述了动作。
示例：导航到URL
curl -X POST http://localhost:8888/api/browser/myTab \
-H "Content-Type: application/json" \
-d '{"action":"goto","url":"https://example.com"}'示例：单击元素
curl -X POST http://localhost:8888/api/browser/myTab \
-H "Content-Type: application/json" \
-d '{"action":"click","selector":"#submit-button"}'请参阅 中的API参考 002-browser.md 了解更多详情。
选项2：与MCP客户端一起使用
- 通过编辑您的MCP客户端（例如Cline、Windsurf、Claude Desktop）配置MCP服务器
claude_desktop_config.json:
{
"mcpServers": {
"browse-together": {
"command": "/path/to/deno",
"args": [
"run",
"--allow-read",
"--allow-net",
"--allow-env",
"--allow-sys",
"/path/to/browse-together-mcp/mcp.ts"
],
"env": {
"PORT": "8888"
}
}
}
}- 使用客户端中的MCP工具，命令如下：
Let's browse to jsr.io together.可用的MCP工具
MCP服务器向客户端公开以下工具：
- 转到：导航到URL
- 点击：点击一个元素
- 填充：填写表单字段
- 内容：获取页面HTML内容
- 获取：在浏览器上下文中执行获取请求
- listPages：列出所有活动的浏览器页面
- 关闭页面：关闭特定页面
文档
该项目是通过一系列描述增量规划步骤的文档进行氛围编码的：
- 初步设计决策 （注：项目结构说明可能已过时）
- 浏览器代理服务概述（多会话-历史）
- 单会话架构重构
- 类型安全计划（Zod）
- 页面弹性计划
- 使用的库
- 测试策略
- 配置
- 安全考虑
- Deno最佳实践
- MCP服务器实施计划
- FastMCP重构
其中一些步骤可能已经过时或不再相关，但作为参考和了解项目是如何构建的。
另请参见 vibe-coders.org 了解更多关于我们在犹他州桑迪的当地vibe编码小组的信息。
发展
- 运行浏览器代理：
deno task browser - 运行MCP服务器：
deno task mcp - 格式代码：
deno fmt - 检查依赖关系：
deno check --all browser.ts mcp.ts types.ts
建筑
+----------------+ +--------------+ +------------------+
| | | | | |
| Cline/LLM | ---- | MCP Server | ---- | Browser Service |
| (MCP Client) | | (mcp.ts) | HTTP | (browser.ts) |
| | | | | |
+----------------+ +--------------+ +------------------+
| |
FastMCP API Playwright API
| |
STDIO/SSE Chromium Browser该系统的工作原理如下：
- 这 浏览器服务 (
browser.ts)使用Playwright管理持久的Chromium浏览器实例 - 这 MCP服务器 (
mcp.ts)使用FastMCP提供标准MCP接口 - MCP服务器通过HTTP将命令转发到浏览器服务
- MCP客户端 像Claude Desktop一样，可以通过简单的工具调用使用所有浏览器功能
