Supports browser automation in Firefox, allowing for navigation, DOM manipulation, form filling, and JavaScript execution through Playwright.
Demonstrated capability to navigate to Google, perform searches, and interact with search results through browser automation.
Enables execution of arbitrary JavaScript code in browser context, with the ability to capture console logs and return results.
Klicken Sie auf einen beliebigen Zeitstempel, um zu diesem Abschnitt des Videos zu springen
00:00 – Google-Suche nach MCP
Navigieren Sie zur Google-Startseite und suchen Sie nach „Model Context Protocol“. Demonstration von Claude Desktop mithilfe der MCP-Integration, um eine einfache Websuche durchzuführen und die Ergebnisse zu verarbeiten.
00:33 – Screenshot-Aufnahme
Erstellen Sie einen Screenshot der Suchergebnisse mit einem benutzerdefinierten Dateinamen und präsentieren Sie ihn im Finder. Zeigt, wie Claude während der Browserautomatisierung visuelle Inhalte von Webseiten erfassen und speichern kann.
01:00 – Wikipedia-Suche
Navigieren Sie zu Wikipedia.org und suchen Sie nach „Model Context Protocol“. Dies veranschaulicht Claudes Fähigkeit, über die MCP-Integration mit verschiedenen Websites und deren Suchfunktionen zu interagieren.
01:38 – Dropdown-Menü-Interaktion I
Navigation zu einer Testwebsite (the-internet.herokuapp.com/dropdown) und Auswahl von „Option 1“ aus einem Dropdown-Menü. Demonstriert Claudes Fähigkeit, mit Formularelementen zu interagieren und Auswahlen zu treffen.
01:56 – Dropdown-Menü-Interaktion II
Ändern der Auswahl im selben Dropdown-Menü auf „Option 2“. Zeigt Claudes Fähigkeit, dasselbe Formularelement mehrfach zu bearbeiten und unterschiedliche Auswahlen zu treffen.
02:09 – Ausfüllen des Anmeldeformulars
Navigieren Sie zu einer Anmeldeseite (the-internet.herokuapp.com/login) und füllen Sie das Feld für den Benutzernamen mit „tomsmith“ und das Feld für das Passwort mit „SuperSecretPassword!“ aus. Demonstriert die Automatisierung des Formularausfüllens.
02:28 - Login-Übermittlung
Übermittlung der Anmeldeinformationen und Abschluss des Authentifizierungsprozesses. Zeigt Claudes Fähigkeit, Formulareinreichungen auszulösen und durch mehrstufige Prozesse zu navigieren.
02:36 – Ausführung der API-Anforderung
Ausführen einer GET-Anfrage an den JSONPlaceholder-API-Endpunkt. Demonstriert Claudes Fähigkeit, direkte API-Aufrufe zu tätigen und die zurückgegebenen Daten über die MCP-Integration zu verarbeiten.
Dieses Paket enthält Playwright und die notwendigen Abhängigkeiten für die Browserautomatisierung. Wenn Sie npm install ausführen, werden die erforderlichen Playwright-Abhängigkeiten installiert. Das Paket unterstützt die folgenden Browser:
Wenn Sie einen Browsertyp zum ersten Mal verwenden, installiert Playwright automatisch die entsprechenden Browsertreiber. Sie können sie auch manuell mit den folgenden Befehlen installieren:
Hinweis zu Safari : Playwright bietet keine direkte Unterstützung für den Safari-Browser. Stattdessen verwendet es WebKit, die Browser-Engine von Safari.
Hinweis zu Edge : Wenn Sie Edge als Browsertyp auswählen, startet der Agent tatsächlich Microsoft Edge (nicht Chromium). Technisch gesehen wird Edge in Playwright mit der Chromium-Browserinstanz und dem Kanalparameter „msedge“ gestartet, da Microsoft Edge auf Chromium basiert.
Es gibt zwei Möglichkeiten, den MCP-Server auszuführen:
Lassen Sie dieses Terminalfenster geöffnet, während Sie Claude Desktop verwenden. Der Server läuft, bis Sie das Terminal schließen.
Der Claude Desktop kann den MCP-Server bei Bedarf automatisch starten. So richten Sie dies ein:
Die Konfigurationsdatei von Claude Desktop befindet sich unter:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json~/.config/Claude/claude_desktop_config.jsonBearbeiten Sie diese Datei, um die MCP-Konfiguration des Browser-Agenten hinzuzufügen. Falls die Datei nicht vorhanden ist, erstellen Sie sie:
Wichtig : Ersetzen Sie ABSOLUTE_PATH_TO_DIRECTORY durch den vollständigen absoluten Pfad , in dem Sie MCP installiert haben
/Users/username/mcp-browser-agentC:\\Users\\username\\mcp-browser-agentWenn Sie bereits andere MCPs konfiguriert haben, fügen Sie einfach den Abschnitt „browserAgent“ innerhalb des Objekts „mcpServers“ hinzu. Hier ist ein Beispiel für eine Konfiguration mit mehreren MCPs:
Der MCP Browser Agent unterstützt mehrere Browsertypen. Standardmäßig wird Chrome verwendet. Sie können jedoch auf verschiedene Weise einen anderen Browser angeben:
Erstellen oder bearbeiten Sie die Datei .mcp_browser_agent_config.json in Ihrem Home-Verzeichnis:
Unterstützte Werte für browserType sind:
chrome – Verwendet installiertes Chrome (Standard)firefox – Verwendet den Firefox-Browser „Nightly“webkit – Verwendet die WebKit-Engine (Hinweis: Dies ist nicht Safari selbst, sondern die WebKit-Rendering-Engine, auf der Safari basiert)edge – Verwendet Microsoft EdgeHinweis zu Safari : Playwright bietet keine direkte Unterstützung für den Safari-Browser. Stattdessen verwendet es WebKit, die Browser-Engine von Safari. Die WebKit-Implementierung in Playwright bietet ähnliche Funktionen, ist aber nicht identisch mit der Safari-Browser-Erfahrung.
Beim manuellen Starten des MCP-Servers können Sie den Browsertyp angeben:
Legen Sie die Umgebungsvariable MCP_BROWSER_TYPE fest:
Beim Konfigurieren des MCP in claude_desktop_config.json von Claude Desktop können Sie den Browsertyp angeben:
Der MCP Browser Agent basiert auf dem Model Context Protocol und ermöglicht Claude die Interaktion mit einem Headful-Browser über Playwright. Die Implementierung besteht aus vier Hauptkomponenten:
Im Gegensatz zu grundlegenden Integrationen fungiert der MCP Browser Agent als echter KI-Agent durch:
| Werkzeugname | Beschreibung | Parameter |
|---|---|---|
browser_navigate | Navigieren Sie zu einer URL | url (erforderlich), timeout , waitUntil |
browser_screenshot | Screenshot aufnehmen | name (erforderlich), selector , fullPage , mask , savePath |
browser_click | Klickelement | selector (erforderlich) |
browser_fill | Formulareingaben ausfüllen | selector (erforderlich), value (erforderlich) |
browser_select | Dropdown-Option auswählen | selector (erforderlich), value (erforderlich) |
browser_hover | Bewegen Sie den Mauszeiger über das Element | selector (erforderlich) |
browser_evaluate | JavaScript ausführen | script (erforderlich) |
| Werkzeugname | Beschreibung | Parameter |
|---|---|---|
api_get | GET-Anfrage | url (erforderlich), headers |
api_post | POST-Anforderung | url (erforderlich), data (erforderlich), headers |
api_put | PUT-Anforderung | url (erforderlich), data (erforderlich), headers |
api_patch | PATCH-Anforderung | url (erforderlich), data (erforderlich), headers |
api_delete | DELETE-Anforderung | url (erforderlich), headers |
Der MCP-Browser-Agent stellt die folgenden Ressourcen bereit:
browser://logs - Zugriff auf Browser-Konsolenprotokollescreenshot://[name] - Zugriff auf Screenshots nach NamenHier sind einige realistische Beispiele für die Verwendung des MCP-Browser-Agenten mit Claude:
Diese Beispiele stellen die tatsächlichen Fähigkeiten des MCP-Browser-Agenten dar und geben ein realistischeres Bild davon, was er in seinem aktuellen Zustand leisten kann.
Wenn in Claude Desktop der Fehler „MCP Browser Agent: Server getrennt“ angezeigt wird:
node dist/index.js manuell aus dem Projektverzeichnis ausclaude_desktop_config.json für Ihr System korrekt ist\\ ) für Windows-Pfade verwendet habenWenn der Browser nicht startet oder Sie ihn nicht sehen:
Es gibt bekannte Probleme mit den Browsern Chromium und Chrome, bei denen der Prozess nach der Verwendung manchmal nicht ordnungsgemäß beendet wird. Wenn dieses Problem auftritt:
ps aux | grep chrome oder ps aux | grep chromium aus, um den Prozess zu finden, und beenden Sie ihn anschließend kill <PID> .[!VORSICHT] Diese MCP-Integration basiert auf Playwright. Dieses System weist bekannte Probleme und Fehler auf, die den Betrieb beeinträchtigen können. Bitte melden Sie alle Probleme, die bei der Browserautomatisierung auftreten, an Playwrights GitHub-Probleme . Das Playwright-Team arbeitet kontinuierlich an der Behebung dieser Probleme. Dieser Agent bietet trotz dieser Einschränkungen die Grundlage für die Browserautomatisierung mit Claude Desktop.
src/index.ts : Haupteinstiegspunkt und Initialisierung des MCP-Serverssrc/tools.ts : Toolschemata und Registrierungsrc/handlers.ts : MCP-Anforderungshandler für Tools und Ressourcensrc/executor.ts : Tool-Implementierungslogik mit PlaywrightDas Projekt umfasst Tests zur Überprüfung der Kernfunktionalität und der Browserhandhabung.
Die Tests überprüfen die Konfigurationsintegrität, die Browser-Automatisierungsfunktionen, die Fehlerbehandlung und die Prozessbereinigung. Der Schwerpunkt der Testsuite liegt insbesondere auf der Sicherstellung der ordnungsgemäßen Verarbeitung von Browserprozessen aufgrund bekannter Probleme bei der Beendigung von Chrome/Chromium.
[!VORSICHT] Diese MCP-Integration bietet Claude die Möglichkeit zur autonomen Browsersteuerung. Bitte lesen Sie unsere Sicherheitsrichtlinie, um wichtige Informationen zu verbotenen Verwendungen, Sicherheitsauswirkungen und bewährten Methoden zu erhalten.
Der MCP Browser Agent ist für legitime Automatisierungsaufgaben konzipiert, könnte aber potenziell missbraucht werden. Benutzer sind dafür verantwortlich, dass die Nutzung alle geltenden Gesetze, Nutzungsbedingungen und ethischen Richtlinien einhält. Weitere Informationen finden Sie in unserer detaillierten Sicherheitsrichtlinie .
Beiträge zum MCP Browser Agent sind willkommen! Hier sind einige Bereiche, in denen Sie helfen können:
Dieses Projekt ist unter der Mozilla Public License 2.0 lizenziert – Einzelheiten finden Sie in der Datei LICENSE .
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
Eine Model Context Protocol (MCP)-Integration, die Claude Desktop mit autonomen Browser-Automatisierungsfunktionen ausstattet. Dieser Agent ermöglicht Claude die Interaktion mit Webinhalten, die Bearbeitung von DOM-Elementen, die Ausführung von JavaScript und die Durchführung von API-Anfragen.