Steel MCP サーバー

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

ClaudeのようなLLMがPuppeteerベースのツールやSteelを使ってWebをナビゲートできるようにする、モデルコンテキストプロトコル（MCP）サーバーです。Web Voyagerフレームワークをベースに、クリック、スクロール、入力など、あらゆる標準的なWeb操作やスクリーンショット撮影のためのツールを提供します。

次のようなタスクについて Claude に支援を依頼してください。

• 「レシピを検索して材料リストを保存する」
• 「荷物の配送状況を追跡する」
• 「特定の商品の価格を検索して比較する」
• 「オンライン求人応募フォームにご記入ください」

🚀 クイックスタート

以下は、Claude Desktop内でSteel Voyagerを実行するための簡潔なガイドです。環境オプションを調整するだけで、Steel Cloudとローカル/セルフホストインスタンスを切り替えることができます。

前提条件

1. GitとNode.jsの最新バージョンがインストールされている
2. クロードデスクトップがインストール済み
3. (オプション) セルフホストを計画している場合、ローカルで実行されるSteel Docker イメージ
4. （オプション）Steel Cloud をご利用の場合は、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 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 URL を指すように "STEEL_BASE_URL" を構成します。
4. Claude Desktop を起動すると、ローカルで実行されている Steel に接続され、Steel Voyager がローカル モードで起動します。
5. (オプション) セッションをローカルで表示するには、セルフホストダッシュボード ( localhost: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 」に移動して Google 検索を実行します。
  • 入力:
    • query (文字列、必須): Google で検索するテキスト。
• クリック
  • 番号付きラベルを使用してページ上の要素をクリックします
  • 入力:
    • label (数値、必須): クリックする要素のラベル番号。
• タイプ
  • 番号付きラベルを使用して入力フィールドにテキストを入力します
  • 入力:
    • label （数値、必須）：入力フィールドのラベル番号。
    • text (文字列、必須): フィールドに入力するテキスト。
    • replaceText (ブール値、オプション): true の場合、フィールド内の既存のテキストを置き換えます。
• スクロールダウン
  • ページを下にスクロールします
  • 入力:
    • pixels （整数、オプション）：下にスクロールするピクセル数。指定しない場合は、1ページ分スクロールします。
• スクロールアップ
  • ページを上にスクロール
  • 入力:
    • pixels （整数、オプション）：上にスクロールするピクセル数。指定しない場合は、1ページ分スクロールします。
• 戻る
  • ブラウザ履歴の前のページへ移動する
  • 入力は不要です
• 待って
  • 最大 10 秒間待機します。これは、ページの読み込みが遅い場合や、動的なコンテンツの表示に時間がかかる場合に便利です。
  • 入力:
    • seconds (数値、必須): 待機する秒数 (0 ～ 10)。
• マークされていないスクリーンショットを保存
  • 境界ボックスやハイライトなしで現在のページをキャプチャし、リソースとして保存します。
  • 入力:
    • resourceName (文字列、オプション): スクリーンショットを保存する名前（例："before_login"）。省略した場合は、汎用的な名前が自動的に生成されます。

リソース

• スクリーンショット: 保存された各スクリーンショットは、次の形式の MCP リソース URI を介してアクセスできます: • screenshot://RESOURCE_NAMEこれらのスクリーンショットは、「save_unmarked_screenshot」ツールを指定した場合、またはアクション（ほとんどのツールの場合）で注釈付きスクリーンショットが作成された場合にサーバーに保存されます。これらの画像は、標準のMCPリソース取得リクエストを通じて取得できます。

(注: コンソール ログは分析とデバッグのために引き続き収集されますが、この実装では取得可能なリソースとして公開されません。コンソール ログはサーバーのログに表示されますが、MCP リソース URI 経由では提供されません。)

主な特徴

• Puppeteerによるブラウザ自動化
• ブラウザセッション管理のためのSteel統合
• 番号付きラベルによる視覚的な要素識別
• スクリーンショット機能
• 基本的なウェブインタラクション（ナビゲーション、クリック、フォームの入力）
• スクロールによる遅延読み込みのサポート
• ローカルおよびリモートの Steel インスタンスのサポート

境界ボックスの理解

ページを操作する際、Steel Puppeteer はインタラクティブな要素を識別するのに役立つ視覚的なオーバーレイを追加します。

• 各インタラクティブ要素（ボタン、リンク、入力）には固有の番号付きラベルが付けられます
• 色付きのボックスが要素の境界を示します
• ラベルは要素の上または内部に表示されるので、簡単に参照できます。
• クリックまたは入力操作の要素を指定するときにこれらの番号を使用します

構成

Steel Voyagerは「ローカル」と「クラウド」の2つのモードで実行できます。この動作は環境変数によって制御されます。以下に概要を示します。

ローカルモード

1. STEEL_LOCAL="true" を設定します。
2. （オプション）カスタムドメインでホストしている場合は、Steelサーバーを指すようにSTEEL_BASE_URLを設定します。それ以外の場合、Steel Voyagerはデフォルトでhttp://localhost:3000を使用します。
3. このモードでは API キーは必要ありません。
4. Puppeteerはws://0.0.0.0:3000経由で接続します。

例：

エクスポート 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=… 経由で接続します。

例：

エクスポート STEEL_LOCAL="false"

エクスポート STEEL_API_KEY="YOUR_STEEL_API_KEY_HERE"

クロードデスクトップ構成

Steel Voyager を Claude Desktop で使用するには、次のような内容を構成ファイル (通常は ~/Library/Application Support/Claude/claude_desktop_config.json にあります) に追加します。

希望するモードに合わせて環境変数を調整します。

• ローカル/自己ホストで実行している場合は、 "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 を自動的にインストールするには:

地域開発

1. リポジトリをクローンする
2. 依存関係をインストールします:
   npm install
3. プロジェクトをビルドします。
   npm run build
4. サーバーを起動します。
   npm start

使用例 📹

私たちはクロードに、その新しい能力で私たちを感動させるように頼みました。そして、クロードはソラの最新の開発を研究し、モデルの背後にあるデータとその仕組みを示すインタラクティブな視覚化を作成することにしました🤯

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

*画質が悪くてすみません。github ではビデオを 10 MB 未満に保つように強制されているので :/

トラブルシューティング

よくある問題と解決策:

1. クラウドサービスをご利用の際は、Steel APIキーを確認し、ローカルのSteelインスタンスが稼働していることを確認してください。また、サービスへの適切なネットワーク接続もご確認ください。
2. ページがレンダリングまたはマークアップされて claude に送信される方法に問題がある場合は、 GLOBAL_WAIT_SECONDS環境変数を使用して構成に遅延を追加してみてください。
3. ページが完全に読み込まれていることを確認し、ビューポートのサイズ設定を確認してください。スクリーンショットをキャプチャするのに十分なメモリがシステムに確保されていることを確認してください。
4. セッションのクリーンアップは現時点では最適ではないため、タスクを実行するためにセッションが起動されたときに手動でセッションを解放する必要がある場合があります。
5. 正しい方法で claude に指示を与えると、パフォーマンスの向上や、発生する可能性のある愚かなミスの回避に大いに役立ちます。
6. セッション ビューアーを活用して、モデルがストップアウトされる可能性のある場所を分析します。
7. ブラウザ操作が15～20回ほど続くと、Claudeのコンテキストウィンドウが画像で埋め尽くされ、動作が遅くなり始めます。それほどひどい状況ではないはずですが、特にClaudeデスクトップクライアントの遅延が顕著で、若干の遅延が発生しています。

貢献

このプロジェクトは実験段階であり、現在活発に開発中です。皆様からの貢献を歓迎いたします。

1. リポジトリをフォークする
2. 機能ブランチを作成する
3. プルリクエストを送信する

以下を含めてください:

• 変更の明確な説明
• モチベーション
• ドキュメントの更新

免責事項

⚠️ このプロジェクトは実験的なものであり、Web Voyager のコードベースに基づいています。本番環境での使用は自己責任でお願いします。