浏览器自动化服务器

Steel MCP Server是一个基于Puppeteer和Steel的模型上下文协议服务器,使LLMs如Claude能够通过浏览器自动化工具进行网页导航和交互。

  • by chumu52
  • 本地部署
  • 更新于
在 GitHub 查看 chumu52/steel-mcp-server

使用说明

钢铁MCP服务器

https://github.com/user-attachments/assets/25848033-40ea-4fa4-96f9-83b6153a0212

一个模型上下文协议(MCP)服务器,使Claude等LLM能够通过基于Puppeteer的工具和Steel浏览网络。基于Web Voyager框架,它为所有标准的Web操作提供了工具——点击/滚动/打字等和截图。

让克劳德帮助你完成以下任务:

  • “搜索食谱并保存配料表”
  • “跟踪包裹交付状态”
  • “查找并比较特定产品的价格”
  • “填写在线工作申请”

🚀 快速开始

下面是在Claude Desktop中运行Steel Voyager的简化指南。您只需调整环境选项,即可在Steel Cloud和本地/自托管实例之间切换。

先决条件

  1. 安装了最新版本的Git和Node.js
  2. 克劳德桌面版 安装
  3. (可选) 钢铁Docker镜像 如果您计划自托管,请在本地运行
  4. (可选)如果运行Steel Cloud,请携带API密钥。买一个 这里.

A) 快速入门(钢云)

  1. 克隆并构建项目:

    git clone https://github.com/steel-dev/steel-mcp-server.git
    cd steel-mcp-server
    npm install
    npm run build
    
  2. 配置Claude桌面(~/Library/Application Support/Claude/claude_desktop_config.json)通过添加服务器条目:

    {
      "mcpServers": {
        "steel-puppeteer": {
          "command": "node",
          "args": ["path/to/steel-voyager/dist/index.js"],
          "env": {
            "STEEL_LOCAL": "false",
            "STEEL_API_KEY": "YOUR_STEEL_API_KEY_HERE",
            "GLOBAL_WAIT_SECONDS": "1"
          }
        }
      }
    }
    
    • 将“YOUR_STEEL_API_KEY_HERE”替换为有效的STEEL API密钥。
    • 确保云模式的“STEEL_LOCAL”设置为“false”。
  3. 启动克劳德桌面。它将在云模式下自动启动此MCP服务器。

  4. (可选)您可以在您的 仪表盘.


B) 快速入门(本地/自托管钢)

  1. 确保您的本地或自托管Steel服务正在运行(例如,使用开源Steel Docker映像)。

  2. 克隆并构建项目(如果尚未完成,则与上述相同):

    git clone https://github.com/steel-dev/steel-mcp-server.git
    cd steel-mcp-server
    npm install
    npm run build
    
  3. 配置Claude桌面(~/Library/Application Support/Claude/claude_desktop_config.json)对于本地模式:

    {
      "mcpServers": {
        "steel-puppeteer": {
          "command": "node",
          "args": ["path/to/steel-voyager/dist/index.js"],
          "env": {
            "STEEL_LOCAL": "true",
            "STEEL_BASE_URL": "http://localhost:3000",
            "GLOBAL_WAIT_SECONDS": "1"
          }
        }
      }
    }
    
    • “STEEL_LOCAL”必须为“true”。
    • 如果在云服务器上自托管,请配置“STEEL_BASE_URL”以指向您的本地/自托管STEEL URL。
  4. 启动Claude Desktop,它将连接到您本地运行的Steel,并以本地模式启动Steel Voyager。

  5. (可选)要在本地查看会话,您可以访问您的自托管仪表板(本地主机:5173)或特定于您的Steel运行时环境的日志。


就是这样!一旦Claude Desktop启动,它将在幕后编排MCP服务器,并允许您通过Steel Voyager与web自动化功能进行交互。

有关设置的更多信息,或者如果您遇到问题,请查看MCP设置文档:https://modelcontextprotocol.io/quickstart/user

组件

工具

  • 导航

    • 导航到浏览器中的任何URL
    • 输入:
      • url (字符串,必填):要导航到的URL(例如“https://example.com").
  • 搜索

    • 通过导航到“”执行谷歌搜索https://www.google.com/search?q=encodedQuery".
    • 输入:
      • query (string,必填):在谷歌上搜索的文本。
  • 点击

    • 使用编号标签单击页面上的元素
    • 输入:
      • label (number,必填):要单击的元素的标签号。
  • 类型

    • 使用编号标签在输入字段中键入文本
    • 输入:
      • label (number,必填):输入字段的标签号。
      • text (字符串,必填):要在字段中键入的文本。
      • replaceText (boolean,可选):如果为true,则替换字段中的任何现有文本。
  • scroll_down

    • 向下滚动页面
    • 输入:
      • pixels (整数,可选):要向下滚动的像素数。如果未指定,则滚动一整页。
  • scroll_up

    • 向上滚动页面
    • 输入:
      • pixels (整数,可选):向上滚动的像素数。如果未指定,则滚动一整页。
  • go_back

    • 导航到浏览器历史记录中的上一页
    • 无需输入
  • 等待

    • 等待最多10秒,对于加载缓慢或需要更多时间显示动态内容的页面非常有用。
    • 输入:
      • seconds (number,必填):等待的秒数(0到10)。
  • 保存_未标记_截图

    • 捕获当前页面,不使用边界框或突出显示,并将其存储为资源。
    • 输入:
      • resourceName (string,可选):用于存储屏幕截图的名称(例如“before_login”)。如果省略,将自动生成通用名称。

资源

  • 截图: 每个保存的屏幕截图都可以通过MCP资源URI以以下形式访问: • screenshot://RESOURCE_NAME

    每当您指定“save_nodemarkd_screenshot”工具,或者当操作(对于大多数工具)以带注释的屏幕截图结束时,服务器都会存储这些屏幕截图。这些图像可以通过标准的MCP资源检索请求进行检索。

(注意:虽然控制台日志仍被收集用于分析和调试,但在此实现中它们不会作为可检索资源公开。它们出现在服务器的日志中,但不会通过MCP资源URI提供服务。)

主要特点

  • 使用Puppeteer实现浏览器自动化
  • 用于浏览器会话管理的钢铁集成
  • 通过编号标签进行视觉元素识别
  • 屏幕截图功能
  • 基本的网络交互(导航、点击、表单填写)
  • 通过滚动实现延迟加载支持
  • 本地和远程Steel实例支持

理解边界框

在与页面交互时,Steel Puppeteer添加了视觉叠加来帮助识别交互元素:

  • 每个交互元素(按钮、链接、输入)都有一个唯一的编号标签
  • 彩色框勾勒出元素的边界
  • 标签出现在元素上方或内部,便于参考
  • 在指定用于单击或键入操作的元素时使用这些数字

配置

Steel Voyager可以在两种模式下运行:“本地”或“云”。此行为由环境变量控制。以下是一个简明的概述:

环境变量 默认值 描述
STEEL_LOCAL “false” 确定STEEL Voyager是在本地(true)模式还是云(false)模式下运行。
STEEL_API_KEY (none) 仅当STEEL_LOCAL=“false”时才需要。用于对Steel端点的请求进行身份验证。
STEEL_BASE_URL “https://api.steel.dev“ Steel API的基本URL。如果自托管Steel服务器(本地或您自己的云环境中),请覆盖此URL。如果Steel_LOCAL=”true“且未设置Steel_base_URL,则默认为”http://localhost:3000".
GLOBAL_WAIT_SECONDS (无) 可选。每次工具操作后等待的秒数(例如,允许缓慢加载页面)。

本地模式

  1. 将STEEL_LOCAL设置为“true”。
  2. (可选)如果您在自定义域上托管STEEL服务器,请将STEEL_BASE_URL设置为指向STEEL服务器。否则,Steel Voyager将默认为http://localhost:3000.
  3. 在此模式下不需要API密钥。
  4. 木偶将通过ws://0.0.0.0:3000连接

例子:

导出STEEL_LOCAL=“true”

导出STEEL_BASE_URL=“http://localhost:3000“#仅当覆盖

云模式

  1. 将STEEL_LOCAL设置为“false”。
  2. 设置STEEL_API_KEY,以便STEEL Voyager可以通过STEEL云服务进行身份验证(如果您更改了STEEL_BASE_URL,则可以通过您的自托管STEEL进行身份验证)。
  3. STEEL_BASE_URL默认为https://api.steel.dev;如果您在另一个端点上运行自托管Steel实例,请覆盖此选项。
  4. Puppeter将通过以下方式连接wss://connect.steel.dev?sessionId=…&apiKey=…

例子:

导出STEEL_LOCAL=“false”

导出STEEL_API_KEY=“YOUR_STEEL_API_KEY_HERE”

Claude桌面配置

要将Steel Voyager与Claude Desktop一起使用,请将类似内容添加到您的配置文件中(通常位于 ~/库/应用支持/Claude/Claude_desktop_config):

{
  "mcpServers": {
    "steel-puppeteer": {
      "command": "node",
      "args": ["path/to/steel-puppeteer/dist/index.js"],
      "env": {
        "STEEL_LOCAL": "false",
        "STEEL_API_KEY": "your_api_key_here"
      }
    }
  }
}

调整环境变量以匹配所需的模式:

•如果在本地/自托管运行,请保留 "STEEL_LOCAL": "true" 并且可选 "STEEL_BASE_URL": "http://localhost:3000".
•如果在云模式下运行,请删除 "STEEL_LOCAL": "true",添加 "STEEL_LOCAL": "false"和供应 "STEEL_API_KEY": "<YourKey>" 这将允许Claude Desktop以正确的模式启动Steel Voyager。

安装与运行

通过Smithery安装

通过以下方式自动安装克劳德桌面的Steel MCP服务器 铁匠铺:

npx -y @smithery/cli install @steel-dev/steel-mcp-server --client claude

地方发展

  1. 克隆仓库
  2. 安装依赖项:
    npm install
    
  3. 构建项目:
    npm run build
    
  4. 启动服务器:
    npm start
    

示例用法📹

我们请Claude用它的新功能给我们留下深刻印象,它决定用sora研究最新进展,然后创建一个交互式可视化来演示模型背后的数据及其工作原理🤯

https://github.com/user-attachments/assets/8d4293ea-03fc-459f-ba6b-291f5b017ad7

*很抱歉质量问题,github强制我们将视频保持在10mb以下:/

故障排除

常见问题和解决方案:

  1. 使用云服务时验证您的Steel API密钥,并确保本地Steel实例正在运行。检查您是否已正确连接到该服务的网络。

  2. 如果您对页面的呈现、标记和发送方式有问题,请尝试通过以下方式在配置中添加延迟 GLOBAL_WAIT_SECONDS env变量。

  3. 确保页面已完全加载,并检查视口大小设置。确保您的系统有足够的可用内存来捕获屏幕截图。

  4. 会话清理目前不是最好的,因此您可能需要在会话启动以执行任务时手动释放会话。

  5. 以正确的方式激励克劳德可以大大提高绩效,避免可能产生的愚蠢错误。

  6. 利用会话查看器分析您的模型可能在哪里停止。

  7. 大约15-20次浏览器操作后,claude开始变慢,因为它的上下文窗口充满了图像。这应该不可怕,但我们注意到这里有一些延迟,尤其是在Claude Desktop客户端落后的情况下。

贡献

这个项目是实验性的,正在积极开发中。欢迎投稿!

  1. 复刻仓库
  2. 创建要素分支
  3. 提交拉取请求

请包括:

  • 变更的清晰描述
  • 动机
  • 文档更新

免责声明

⚠️ 这个项目是实验性的,基于WebVoyager代码库。在生产环境中使用,风险自负。