本地浏览器MCP服务器
一个模型上下文协议（MCP）服务器，使用Puppeter提供浏览器自动化功能，并使用Google Gemini 2.0 Flash生成AI图像。此服务器允许您控制本地Chrome浏览器实例，截图，执行单击和键入等交互，并生成自定义图像-非常适合测试网站和使用Cursor创建内容。
特性
- 🌐 浏览器导航：导航到URL、后退/前进、刷新页面
- 📸 截图：捕获整页、视口或特定元素的屏幕截图
- 🖱️ 单击操作：使用CSS选择器单击元素
- ⌨️ 文本输入：在输入字段和表单中键入文本
- 📜 滚动：向任何方向滚动页面
- ⏳ 等待操作：等待元素出现
- 📊 页面信息：获取当前页面标题、URL和视口信息
- 🎨 AI图像生成：使用Google Gemini 2.0 Flash预览生成自定义图像
安装
- 克隆/下载 将此存储库连接到本地计算机
- 安装依赖项:
npm install- 构建项目:
npm run build- 设置环境变量 （用于图像生成）：
创建一个 .env 项目根目录中的文件：
GOOGLE_AI_KEY=your_google_ai_api_key_here从获取API密钥 谷歌人工智能工作室.
使用游标
步骤1:启动HTTP服务器
建议使用此MCP服务器的方式是通过HTTP模式，以避免ES模块兼容性问题：
npm run start:http这将启动服务器 http://localhost:3045 并保持其运行。
步骤2：在游标中配置MCP
创建或更新您的 cursor-mcp-config.json 具有以下配置的文件：
{
"mcpServers": {
"local-browser": {
"command": "node",
"args": ["/absolute/path/to/your/project/mcp-http-bridge.js"],
"env": {
"NODE_ENV": "production"
}
}
}
}重要:
- 替换
/absolute/path/to/your/project/带有项目目录的实际绝对路径 - HTTP网桥(
mcp-http-bridge.js)将MCP请求路由到HTTP服务器 - 在使用Cursor中的工具之前，请确保HTTP服务器正在运行
步骤3：重新启动游标
更新配置后，重新启动Cursor以加载新的MCP服务器。
步骤4：开始使用工具
配置后，您可以在Cursor中使用以下工具：
浏览器导航
navigate_to_url-导航到任何URLgo_back-返回浏览器历史记录go_forward-在浏览器历史记录中前进refresh_page-刷新当前页面
屏幕截图和视觉捕捉
take_screenshot-捕获屏幕截图（整页、视口或特定元素）
页面交互
click_element-使用CSS选择器点击元素type_text-在输入框中键入文本scroll_page-向任何方向滚动页面wait_for_element-等待元素出现
页面信息
get_page_info-获取当前页面标题、URL和视口信息
AI图像生成
generate_image-使用Google Gemini 2.0 Flash预览生成自定义图像
快速入门示例
以下是如何快速开始：
- 启动HTTP服务器:
npm run start:http- 在Cursor中，尝试以下命令:
- “导航到google.com并截图” - “生成山上日落的图像” - “点击搜索按钮，键入‘hello world’”
工作流示例
以下是测试您创建的网站时的典型工作流程：
- 导航到本地开发服务器:
Use navigate_to_url with "http://localhost:3000"- 截图查看当前状态:
Use take_screenshot to capture the full page- 与您的网站互动:
Use click_element to click buttons
Use type_text to fill out forms
Use scroll_page to test scrolling behavior- 捕获结果:
Use take_screenshot again to see changes工具参考
navigate_to_url
将浏览器导航到特定的URL。
url（必填）：要导航到的URL
take_screenshot
截取当前页面的屏幕截图。
fullPage（可选）：仅捕获整页与视口selector（可选）：CSS选择器，用于截图特定元素
click_element
单击CSS选择器指定的元素。
selector（必填）：要单击的元素的CSS选择器waitFor（可选）：单击后等待毫秒（默认值：1000）
类型文本
在输入框中键入文本。
selector（必填）：输入元素的CSS选择器text（必填）：键入文本clear（可选）：键入前清除字段（默认值：true）
wait_for_element
等待页面上出现元素。
selector（必填）：要等待的CSS选择器timeout（可选）：超时时间（毫秒）（默认值：5000）
滚动页面
滚动页面。
direction（必填）：“向上”、“向下”、“顶部”或“底部”amount（可选）：向上/向下滚动的像素（默认值：500）
get_page_info
获取当前页面的相关信息（标题、URL、视口大小）。
刷新页面
刷新当前页面。
go_back
在浏览器历史记录中导航回来。
go_forward
在浏览器历史记录中向前导航。
generate_image
使用Google Gemini 2.0 Flash Preview生成自定义AI图像。
description（必填）：要生成的图像的文本描述
生成的图像会自动保存到 generated-images/ 目录，可以通过HTTP下载 http://localhost:3045/download/{filename}.
发展
- 构建:
npm run build - 开发模式:
npm run dev（注意变化） - 开始:
npm start（可见浏览器）或npm run start:headless背景 - HTTP测试服务器:
npm run start:http（可见）或npm run start:http:headless背景
浏览器行为
- 可见模式：浏览器窗口打开，您可以看到正在发生的事情
- 无头模式：浏览器在后台运行（设置
MCP_HEADLESS=true) - 单独配置文件：用途
/tmp/chrome-mcp-data避免与主Chrome发生冲突 - 默认视口：1280x720像素
- 截图：返回base64编码的PNG图像
故障排除
浏览器无法启动
- 确保您的系统上安装了Chrome
- 检查没有其他进程阻止Chrome
- 尝试重新启动HTTP服务器：
npm run start:http - 清除Chrome数据目录：
rm -rf /private/tmp/chrome-mcp-data
未找到元素
- 验证CSS选择器是否正确
- 使用浏览器开发工具测试选择器
- 尝试等待元素加载
wait_for_element
MCP工具在Cursor中不可用
- 确保HTTP服务器正在运行：
npm run start:http - 检查一下
cursor-mcp-config.json具有正确的绝对路径 - 配置更改后重新启动Cursor
- 验证HTTP网桥文件是否存在：
mcp-http-bridge.js
图像生成不起作用
- 确保
GOOGLE_AI_KEY设置在您的.env文件 - 从获取API密钥 谷歌人工智能工作室
- 检查HTTP服务器是否正在运行（图像生成需要HTTP模式）
权限问题
- 确保MCP服务器有权启动Chrome
- 检查内置JavaScript文件的文件权限
- 在macOS上，您可能需要在“系统偏好设置”>“安全与隐私”中允许Chrome
安全说明
- 此服务器启动具有完全系统访问权限的真实浏览器
- 仅与受信任的网站和内容一起使用
- 浏览器在运行时禁用了一些安全功能以实现自动化
- 始终在受控环境中运行
许可证
MIT许可证-有关详细信息，请参阅许可证文件。