Steel MCP Server

Steel MCP Server

该工具使像 Claude 这样的大型语言模型能够通过基于 Puppeteer 的工具和 Steel 浏览网页。它基于 Web Voyager 框架,提供了所有标准的网页操作工具,例如点击/滚动/输入/等等,以及截取屏幕截图。

Category
访问服务器

Tools

navigate

Navigate to a specified URL

search

Perform a Google search by navigating to https://www.google.com/search?q=encodedQuery using the provided query text.

click

Click an element on the page specified by its numbered label from the annotated screenshot

type

Type text into an input field specified by its numbered label from the annotated screenshot. Optionally replace existing text first.

scroll_down

Scroll down the page by a pixel amount - if no pixels are specified, scrolls down one page

scroll_up

Scroll up the page by a pixel amount - if no pixels are specified, scrolls up one page

go_back

Go back to the previous page in the browser history

wait

Use this tool when a page appears to be loading or not fully rendered. Common scenarios include: when elements are missing from a screenshot that should be there, when a page looks incomplete or broken, when dynamic content is still loading, or when a previous action (like clicking a button) hasn't fully processed yet. Waits for a specified number of seconds (up to 10) to allow the page to finish loading or rendering.

save_unmarked_screenshot

Capture a screenshot without bounding boxes and store it as a resource. Provide a resourceName to identify the screenshot. It's useful for when you want to view a page unobstructed by annotations or the user asks for a screenshot of the page.

README

Steel MCP 服务器

smithery badge

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

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

让 Claude 帮助您完成以下任务:

  • “搜索一个食谱并保存配料表”
  • “跟踪包裹递送状态”
  • “查找并比较特定产品的价格”
  • “填写在线求职申请”

<a href="https://glama.ai/mcp/servers/tbd32geble"><img width="380" height="200" src="https://glama.ai/mcp/servers/tbd32geble/badge" alt="Steel Server MCP server" /></a>

🚀 快速开始

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

前提条件

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

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. (可选) 您可以在您的 dashboard 中查看或管理活动的 Steel Browser 会话。


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 与 Web 自动化功能进行交互。

有关设置的更多信息,或者如果您遇到问题,请查看 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 集成
  • 通过编号标签进行可视化元素识别
  • 屏幕截图功能
  • 基本 Web 交互(导航、点击、表单填写)
  • 通过滚动支持延迟加载
  • 本地和远程 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_BASE_URL,则可以使用您自托管的 Steel)。
  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 Desktop 配置

要将 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. Fork 存储库
  2. 创建一个功能分支
  3. 提交拉取请求

请包括:

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

免责声明

⚠️ 此项目是实验性的,并且基于 Web Voyager 代码库。在生产环境中使用风险自负。

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选