首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
首页
学习
活动
专区
圈层
工具
MCP广场
MCP广场 >详情页
steel-mcp-server2025-05-210分享
github
使像 Claude 这样的大语言模型能够通过基于 Puppeteer 的工具和 Steel 浏览网页。它基于 Web Voyager 框架,提供了执行所有标准网络操作的工具,例如点击、滚动、输入等,还可以截屏。
By steel-dev
2025-05-210
github
详情内容

Steel MCP 服务器

smithery 徽章

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

这是一个模型上下文协议(MCP)服务器,它使像 Claude 这样的大型语言模型能够通过基于 Puppeteer 的工具和 Steel 在网络上导航。基于 Web Voyager 框架,它提供了用于所有标准网页操作(如点击、滚动、输入等)以及截图的工具。

请 Claude 帮助你完成以下任务:

  • "搜索一个食谱并保存配料清单"
  • "跟踪包裹递送状态"
  • "查找并比较特定产品的价格"
  • "填写在线工作申请"

Steel 服务器 MCP 服务器

🚀 快速开始

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

先决条件

  1. 安装最新版本的 Git 和 Node.js
  2. 安装 Claude Desktop
  3. (可选)如果您计划自托管,请运行 Steel Docker 镜像 本地
  4. (可选)如果运行 Steel Cloud,请带上您的 API 密钥。在此处获取 API 密钥

A) 快速开始 (Steel Cloud)

  1. 克隆并构建项目:

    git clone https://github.com/steel-dev/steel-mcp-server.git
    cd steel-mcp-server
    npm install
    npm run build
    
  2. 配置 Claude Desktop (~/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. 启动 Claude Desktop。它将自动以云模式启动此 MCP 服务器。

  4. (可选)您可以在 仪表板 中查看或管理活跃的 Steel 浏览器会话。


B) 快速开始 (本地/自托管 Steel)

  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 Desktop (~/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. (可选)要本地查看会话,你可以访问自托管的仪表盘(localhost:5173) 或者查看特定于你的Steel运行时环境的日志。


就是这样!一旦Claude Desktop启动,它将在后台协调MCP服务器,并让你通过Steel Voyager与网页自动化功能进行交互。

有关更多设置信息或遇到问题,请参阅MCP设置文档:https://modelcontextprotocol.io/quickstart/user

组件

工具

  • navigate

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

    • 通过导航到 "https://www.google.com/search?q=encodedQuery" 来执行 Google 搜索。
    • 输入:
      • query (字符串,必填):要在 Google 上搜索的文本。
  • click

    • 使用编号标签点击页面上的元素
    • 输入:
      • label (数字,必填):要点击的元素的标签号。
  • type

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

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

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

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

    • 等待最多 10 秒,适用于加载缓慢或需要更多时间来显示动态内容的页面。
    • 输入:
      • seconds (数字,必填):等待的秒数(0 到 10)。
  • save_unmarked_screenshot

    • 捕获当前页面而不带边界框或高亮,并将其存储为资源。
    • 输入:
      • resourceName (字符串,可选):用于存储截图的名称(例如 "before_login")。如果省略,则自动生成通用名称。

资源

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

    当您指定 "save_unmarked_screenshot" 工具或某个操作(对于大多数工具)以带有注释的截图结束时,服务器会存储这些截图。这些图像可以通过标准的 MCP 资源检索请求获取。

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

主要功能

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

了解边界框

在与页面交互时,Steel Puppeteer 会添加视觉叠加层以帮助识别可交互元素:

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

配置

Steel Voyager 可以在两种模式下运行:"本地" 或 "云端"。这种行为由环境变量控制。以下是一个简要概述:

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

本地模式

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

示例:

export STEEL_LOCAL="true"

export STEEL_BASE_URL="http://localhost:3000" # 仅当需要覆盖时

云端模式

  1. 设置 STEEL_LOCAL="false"。
  2. 设置 STEEL_API_KEY 以便 Steel Voyager 可以与 Steel 云服务(或者您自己托管的 Steel 如果更改了 STEEL_BASE_URL)进行身份验证。
  3. STEEL_BASE_URL 默认为 https://api.steel.dev;如果您有运行在其他端点上的自托管 Steel 实例,请覆盖此设置。
  4. Puppeteer 将通过 wss://connect.steel.dev?sessionId=…&apiKey=… 连接。

示例:

export STEEL_LOCAL="false"

export STEEL_API_KEY="YOUR_STEEL_API_KEY_HERE"

Claude 桌面配置

要使用 Steel Voyager 与 Claude Desktop,请在您的配置文件中添加类似以下内容(通常位于
~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "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 安装

要通过 Smithery 自动安装适用于 Claude Desktop 的 Steel MCP Server:

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. 如果您遇到页面渲染或标记发送给 Claude 的问题,请尝试通过 GLOBAL_WAIT_SECONDS 环境变量在配置中添加延迟。

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

  4. 当前会话清理不是最佳状态,因此您可能需要手动释放会话,以便它们可以执行任务。

  5. 正确提示 Claude 可以大大改善性能并避免它可能产生的愚蠢错误。

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

  7. 在大约 15-20 个浏览器操作后,Claude 开始变慢,因为它的上下文窗口被图像填满。虽然不会太糟糕,但我们注意到这里有一些延迟,特别是 Claude Desktop 客户端滞后。

贡献

此项目处于实验阶段且正在积极开发中。欢迎贡献!

  1. 分叉仓库
  2. 创建功能分支
  3. 提交拉取请求

请包含:

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

免责声明

⚠️ 该项目基于 Web Voyager 代码库进行实验。在生产环境中使用风险自负。

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档