AI导哈

浏览器自动化服务

一个基于HTTP的MCP服务器，提供通过Playwright实现的浏览器自动化功能，支持网页导航和标题获取。

  • by ahmetatar
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ahmetatar/mcp2browser

使用说明

MCP2浏览器

一种通过HTTP提供浏览器自动化功能的模型上下文协议（MCP）服务器。该服务器通过MCP协议公开浏览器检查工具，允许AI助手与网页交互。

特性

  • 打开网页：使用Playwright导航到任何URL
  • 获取页面标题：检索当前打开页面的标题
  • 基于HTTP的MCP服务器在Express上运行

先决条件

  • Node.js（v16或更高版本）
  • npm或纱线

安装

  1. 克隆存储库：
git clone <repository-url>
cd mcp2browser
  1. 安装依赖项：
npm install
  1. 构建项目：
npm run build
  1. 启动服务器：
npm start

服务器将在上开始运行 http://localhost:3000/mcp

与VS代码一起使用

要在VS Code中将此MCP服务器与GitHub Copilot一起使用，您需要在MCP设置中对其进行配置。

配置步骤

选项1：使用MCP：添加服务器命令

  1. 按 Cmd+Shift+P （macOS）或 Ctrl+Shift+P （Windows/Linux）打开命令面板
  2. 键入并选择“MCP:添加服务器”
  3. 输入服务器名称： browser-mcp
  4. 选择运输类型： HTTP (streamable-http)
  5. 输入服务器URL: http://localhost:3000/mcp

选项2：手动配置

  1. 按打开VS代码设置（JSON） Cmd+Shift+P （macOS）或 Ctrl+Shift+P （Windows/Linux）并搜索“首选项：打开用户设置（JSON）”

  2. 将MCP服务器配置添加到您的设置中：

{
  "github.copilot.chat.mcp.servers": {
    "browser-mcp": {
      "type": "http",
      "url": "http://localhost:3000/mcp",
      "transport": "streamable-http"
    }
  }
}

  1. 确保MCP服务器正在运行（请参阅上面的安装步骤）

  2. 重新启动VS Code或重新加载窗口(Cmd+R 在macOS上， Ctrl+R 在Windows/Linux上）

示例用法

配置后，您可以通过VS Code中的GitHub Copilot Chat与浏览器工具进行交互：

示例1：打开网页

User: Open the page https://github.com
Copilot: [Uses the openPage tool to navigate to GitHub]

示例2：获取页面标题

User: What's the title of the current page?
Copilot: [Uses the getPageTitle tool to retrieve the title]

示例3：组合工作流

User: Open https://example.com and tell me what the page title is
Copilot: [Opens the page and then retrieves the title]

可用工具

openPage

在无头浏览器中打开网页。

输入：

  • url （string）：要导航到的URL

输出：

  • status （string）：表示成功的状态消息

getPageTitle

检索当前打开的网页的标题。

输入： 无

输出：

  • title （string）：当前页面的标题

发展

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode (with nodemon auto-reload)
npm run dev

# Start the server (production)
npm start

这 dev 该脚本使用nodemon来监视TypeScript文件的更改，并使用ts节点自动重启服务器，使开发更加高效。

建筑

  • index.ts：主Express服务器设置
  • mcp-route.ts：MCP协议实施和工具定义
  • 使用Playwright实现浏览器自动化
  • 通过HTTP为MCP实现StreamableHTTPServerTransport

故障排除

问题：服务器未在VS代码中连接

  • 确保服务器正在上运行 http://localhost:3000/mcp
  • 检查VS代码设置是否配置正确
  • 更改MCP设置后重新启动VS Code

问题：工具未出现在Copilot中

  • 验证VS代码设置中的MCP服务器配置
  • 检查服务器日志是否有任何错误
  • 确保GitHub Copilot扩展是最新的

许可证

麻省理工学院

相关 MCP