Steel MCP Server

Steel MCP Server

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

Ein Model Context Protocol (MCP)-Server, der es LLMs wie Claude ermöglicht, mithilfe von Puppeteer-basierten Tools und Steel im Web zu navigieren. Basierend auf dem Web Voyager Framework bietet es Tools für alle gängigen Webaktionen wie Klicken, Scrollen, Tippen usw. und das Erstellen von Screenshots.

Bitten Sie Claude, Ihnen bei Aufgaben wie diesen zu helfen:

• "Rezept suchen und Zutatenliste speichern"
• „Verfolgen Sie den Status einer Paketzustellung“
• "Preise für ein bestimmtes Produkt finden und vergleichen"
• "Füllen Sie eine Online-Bewerbung aus"

🚀 Schnellstart

Nachfolgend finden Sie eine vereinfachte Anleitung zur Ausführung von Steel Voyager in Claude Desktop. Sie müssen lediglich die Umgebungsoptionen anpassen, um zwischen Steel Cloud und einer lokalen/selbstgehosteten Instanz zu wechseln.

Voraussetzungen

1. Neueste Versionen von Git und Node.js installiert
2. Claude Desktop installiert
3. (Optional) Lokal ausgeführtes Steel Docker-Image , wenn Sie planen, es selbst zu hosten
4. (Optional) Wenn Sie Steel Cloud verwenden, bringen Sie Ihren API-Schlüssel mit. Einen erhalten Sie hier .

A) Schnellstart (Steel Cloud)

1. Klonen und erstellen Sie das Projekt:
   git clone https://github.com/steel-dev/steel-mcp-server.git cd steel-mcp-server npm install npm run build
2. Konfigurieren Sie Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json ), indem Sie einen Servereintrag hinzufügen:
   { "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" } } } }
   • Ersetzen Sie „YOUR_STEEL_API_KEY_HERE“ durch Ihren gültigen Steel-API-Schlüssel.
   • Stellen Sie sicher, dass „STEEL_LOCAL“ für den Cloud-Modus auf „false“ eingestellt ist.
3. Starten Sie Claude Desktop. Der MCP-Server wird automatisch im Cloud-Modus gestartet.
4. (Optional) Sie können aktive Steel Browser-Sitzungen in Ihrem Dashboard anzeigen oder verwalten.

B) Schnellstart (Lokaler/selbstgehosteter Stahl)

1. Stellen Sie sicher, dass Ihr lokaler oder selbst gehosteter Steel-Dienst ausgeführt wird (z. B. mithilfe des Open-Source-Steel-Docker-Image).
2. Klonen und erstellen Sie das Projekt (wie oben, falls noch nicht geschehen):
   git clone https://github.com/steel-dev/steel-mcp-server.git cd steel-mcp-server npm install npm run build
3. Konfigurieren Sie Claude Desktop ( ~/Library/Application Support/Claude/claude_desktop_config.json ) für den lokalen Modus:
   { "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“ muss „true“ sein.
   • Wenn Sie das Hosting selbst auf einem Cloud-Server durchführen, konfigurieren Sie „STEEL_BASE_URL“ so, dass es auf Ihre lokale/selbst gehostete Steel-URL verweist.
4. Starten Sie Claude Desktop, wodurch eine Verbindung zu Ihrem lokal laufenden Steel hergestellt wird und Steel Voyager im lokalen Modus gestartet wird.
5. (Optional) Um Sitzungen lokal anzuzeigen, können Sie Ihr selbst gehostetes Dashboard ( localhost:5173 ) oder die Protokolle besuchen, die für Ihre Steel-Laufzeitumgebung spezifisch sind.

Das war's! Sobald Claude Desktop startet, orchestriert es den MCP-Server im Hintergrund und ermöglicht Ihnen die Interaktion mit den Web-Automatisierungsfunktionen über Steel Voyager.

Weitere Informationen zur Einrichtung oder bei Problemen finden Sie in den MCP-Einrichtungsdokumenten: https://modelcontextprotocol.io/quickstart/user

Komponenten

Werkzeuge

• navigieren
  • Navigieren Sie im Browser zu einer beliebigen URL
  • Eingänge:
    • url (Zeichenfolge, erforderlich): URL, zu der navigiert werden soll (z. B. „ https://example.com “).
• suchen
  • Führen Sie eine Google-Suche durch, indem Sie zu „ https://www.google.com/search?q=encodedQuery “ navigieren.
  • Eingänge:
    • query (Zeichenfolge, erforderlich): Text, nach dem bei Google gesucht werden soll.
• klicken
  • Klicken Sie auf Elemente auf der Seite mit nummerierten Beschriftungen
  • Eingänge:
    • label (Zahl, erforderlich): Die Bezeichnungsnummer des anzuklickenden Elements.
• Typ
  • Geben Sie Text mithilfe nummerierter Beschriftungen in Eingabefelder ein
  • Eingänge:
    • label (Zahl, erforderlich): Die Bezeichnungsnummer des Eingabefelds.
    • text (Zeichenfolge, erforderlich): Text, der in das Feld eingegeben werden soll.
    • replaceText (Boolesch, optional): Wenn „true“, wird jeglicher vorhandener Text im Feld ersetzt.
• nach unten scrollen
  • Scrollen Sie auf der Seite nach unten
  • Eingänge:
    • pixels (Ganzzahl, optional): Anzahl der Pixel, um die nach unten gescrollt werden soll. Wenn nicht angegeben, wird um eine ganze Seite gescrollt.
• nach oben scrollen
  • Scrollen Sie die Seite nach oben
  • Eingänge:
    • pixels (Ganzzahl, optional): Anzahl der Pixel, um die nach oben gescrollt werden soll. Wenn nicht angegeben, wird um eine ganze Seite gescrollt.
• geh zurück
  • Navigieren Sie zur vorherigen Seite im Browserverlauf
  • Keine Eingaben erforderlich
• Warten
  • Warten Sie bis zu 10 Sekunden. Dies ist nützlich für Seiten, die langsam geladen werden oder mehr Zeit benötigen, bis dynamische Inhalte angezeigt werden.
  • Eingänge:
    • seconds (Zahl, erforderlich): Anzahl der zu wartenden Sekunden (0 bis 10).
• save_unmarked_screenshot
  • Erfassen Sie die aktuelle Seite ohne Begrenzungsrahmen oder Hervorhebungen und speichern Sie sie als Ressource.
  • Eingänge:
    • resourceName (String, optional): Name, unter dem der Screenshot gespeichert werden soll (z. B. „before_login“). Falls dieser Name weggelassen wird, wird automatisch ein generischer Name generiert.

Ressourcen

• Screenshots : Auf jeden gespeicherten Screenshot kann über eine MCP-Ressourcen-URI in folgender Form zugegriffen werden: • screenshot://RESOURCE_NAMEDer Server speichert diese Screenshots, wenn Sie das Tool „save_unmarked_screenshot“ verwenden oder wenn eine Aktion (bei den meisten Tools) mit einem kommentierten Screenshot endet. Diese Bilder können über eine Standard-MCP-Ressourcenabrufanforderung abgerufen werden.

(Hinweis: Obwohl Konsolenprotokolle weiterhin zur Analyse und Fehlerbehebung gesammelt werden, werden sie in dieser Implementierung nicht als abrufbare Ressourcen angezeigt. Sie erscheinen in den Protokollen des Servers, werden jedoch nicht über MCP-Ressourcen-URIs bereitgestellt.)

Hauptmerkmale

• Browserautomatisierung mit Puppeteer
• Steel-Integration für die Verwaltung von Browsersitzungen
• Visuelle Elementidentifizierung durch nummerierte Etiketten
• Screenshot-Funktionen
• Grundlegende Webinteraktion (Navigation, Klicken, Ausfüllen von Formularen)
• Lazy-Loading-Unterstützung durch Scrollen
• Lokale und Remote-Unterstützung von Steel-Instanzen

Grundlegendes zu Begrenzungsrahmen

Bei der Interaktion mit Seiten fügt Steel Puppeteer visuelle Overlays hinzu, um interaktive Elemente leichter zu identifizieren:

• Jedes interaktive Element (Schaltflächen, Links, Eingaben) erhält eine eindeutige nummerierte Bezeichnung
• Farbige Kästchen markieren die Grenzen der Elemente
• Beschriftungen werden zur einfachen Bezugnahme über oder in Elementen angezeigt
• Verwenden Sie diese Zahlen, wenn Sie Elemente für Klick- oder Eingabevorgänge angeben

Konfiguration

Steel Voyager kann in zwei Modi ausgeführt werden: „Lokal“ oder „Cloud“. Dieses Verhalten wird durch Umgebungsvariablen gesteuert. Nachfolgend finden Sie eine kurze Übersicht:

Lokaler Modus

1. Setzen Sie STEEL_LOCAL="true".
2. (Optional) Legen Sie STEEL_BASE_URL so fest, dass es auf den Steel-Server verweist, wenn Sie ihn in einer benutzerdefinierten Domäne hosten. Andernfalls verwendet Steel Voyager standardmäßig http://localhost:3000 .
3. In diesem Modus ist kein API-Schlüssel erforderlich.
4. Puppeteer stellt eine Verbindung über ws://0.0.0.0:3000 her

Beispiel:

export STEEL_LOCAL="true"

export STEEL_BASE_URL=" http://localhost:3000 " # nur beim Überschreiben

Cloud-Modus

1. Setzen Sie STEEL_LOCAL="false".
2. Legen Sie STEEL_API_KEY fest, damit sich Steel Voyager beim Steel-Cloud-Dienst authentifizieren kann (oder bei Ihrem selbst gehosteten Steel, wenn Sie STEEL_BASE_URL geändert haben).
3. STEEL_BASE_URL ist standardmäßig auf https://api.steel.dev eingestellt. Überschreiben Sie dies, wenn Sie eine selbst gehostete Steel-Instanz auf einem anderen Endpunkt ausführen.
4. Puppeteer stellt eine Verbindung über wss://connect.steel.dev?sessionId=…&apiKey=… her.

Beispiel:

export STEEL_LOCAL="false"

export STEEL_API_KEY="IHR_STEEL_API_KEY_HIER"

Claude Desktop-Konfiguration

Um Steel Voyager mit Claude Desktop zu verwenden, fügen Sie Ihrer Konfigurationsdatei (häufig unter ~/Library/Application Support/Claude/claude_desktop_config.json) etwas wie Folgendes hinzu:

Passen Sie die Umgebungsvariablen an den gewünschten Modus an:

• Wenn Sie lokal/selbst gehostet ausführen, behalten Sie "STEEL_LOCAL": "true" und optional "STEEL_BASE_URL": "http://localhost:3000" .
• Wenn Sie im Cloud-Modus arbeiten, entfernen Sie "STEEL_LOCAL": "true" , fügen Sie "STEEL_LOCAL": "false" hinzu und geben Sie "STEEL_API_KEY": "<YourKey>" an. Dadurch kann Claude Desktop Steel Voyager im richtigen Modus starten.

Installation und Ausführung

Installation über Smithery

So installieren Sie Steel MCP Server für Claude Desktop automatisch über Smithery :

Lokale Entwicklung

1. Klonen Sie das Repository
2. Installieren Sie Abhängigkeiten:
   npm install
3. Erstellen Sie das Projekt:
   npm run build
4. Starten Sie den Server:
   npm start

Anwendungsbeispiel 📹

Wir haben Claude gebeten, uns mit seinen neuen Fähigkeiten zu beeindrucken, und er hat beschlossen, die neuesten Entwicklungen mit Sora zu erforschen und dann eine interaktive Visualisierung zu erstellen, um die Daten hinter dem Modell und seine Funktionsweise zu demonstrieren 🤯

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

*Entschuldigen Sie die Qualität, GitHub zwingt uns, die Videos unter 10 MB zu halten :/

Fehlerbehebung

Häufige Probleme und Lösungen:

1. Überprüfen Sie Ihren Steel-API-Schlüssel, wenn Sie den Cloud-Dienst nutzen, und stellen Sie sicher, dass Ihre lokale Steel-Instanz ausgeführt wird. Stellen Sie sicher, dass Sie über eine ordnungsgemäße Netzwerkverbindung zum Dienst verfügen.
2. Wenn Sie Probleme mit der Darstellung oder Markierung von Seiten und deren Übermittlung an Claude haben, versuchen Sie, Ihrer Konfiguration über die Umgebungsvariable GLOBAL_WAIT_SECONDS eine Verzögerung hinzuzufügen.
3. Stellen Sie sicher, dass die Seite vollständig geladen ist, und überprüfen Sie die Einstellungen für die Ansichtsfenstergröße. Stellen Sie sicher, dass Ihr System über genügend freien Speicher für die Aufnahme von Screenshots verfügt.
4. Die Sitzungsbereinigung ist derzeit nicht optimal, daher müssen Sie Sitzungen möglicherweise manuell freigeben, wenn sie zur Ausführung von Aufgaben hochgefahren werden.
5. Durch die richtige Anleitung von Claude können Sie die Leistung erheblich verbessern und dumme Fehler vermeiden, die dadurch entstehen können.
6. Nutzen Sie den Sitzungsbetrachter, um zu analysieren, wo Ihr Modell möglicherweise gestoppt wird.
7. Nach etwa 15–20 Browseraktionen wird Claude langsamer, da das Kontextfenster mit Bildern gefüllt wird. Es sollte nicht schlimm sein, aber wir haben hier eine gewisse Latenz festgestellt, insbesondere da der Claude Desktop-Client langsamer läuft.

Beitragen

Dieses Projekt ist experimentell und befindet sich in aktiver Entwicklung. Beiträge sind willkommen!

1. Forken Sie das Repository
2. Erstellen eines Feature-Zweigs
3. Senden einer Pull-Anfrage

Bitte geben Sie an:

• Klare Beschreibung der Änderungen
• Motivation
• Aktualisierungen der Dokumentation

Haftungsausschluss

⚠️ Dieses Projekt ist experimentell und basiert auf der Web Voyager-Codebasis. Die Verwendung in Produktionsumgebungen erfolgt auf eigene Gefahr.