So verwenden Sie die Browser-Tools MCP-Server

Haben Sie sich jemals gefragt, wie Sie die KI-gestützte Browserautomatisierung in Ihren Workflow integrieren können? Ich bin während der Arbeit in Cursor IDE über Browser tools mcp gestolpert, und es hat mich umgehauen! Mit diesem großartigen Tool können Sie Cursor IDE mit Ihrem Browser verbinden und Aufgaben wie das Ausfüllen von Formularen, das Data Scraping und die Front-End-Webentwicklung mühelos automatisieren. In diesem Tutorial führen wir Sie durch die Einrichtung von Browser tools mcp mit Cursor IDE und zeigen Ihnen, wie Sie seine Leistung für die Webautomatisierung nutzen können. Egal, ob Sie debuggen oder entwickeln, dies ist Ihre Chance, sich zu verbessern. Lassen Sie uns gemeinsam in dieses aufregende Setup eintauchen!

💡

Bevor wir loslegen, ein kurzer Hinweis auf Apidog – ein fantastisches Tool für API-Enthusiasten! Es rationalisiert das API-Testen und -Debugging und ist damit der perfekte Begleiter für Ihre Browser tools mcp-Abenteuer. Schauen Sie es sich unter apidog.com an! Und jetzt wollen wir mit diesem coolen Projekt beginnen…

button

Was ist Browser tools mcp?

Browser tools mcp ist ein Model Context Protocol (MCP)-Server, der KI-Modelle mit Ihrem Webbrowser verbindet und nahtlose Automatisierung ermöglicht. Entwickelt von AgentDeskAI, ermöglicht es Tools wie Cursor IDE (sowie Windsurf, RooCode, Cline und Claude Desktop, um nur einige zu nennen), Browseraktionen zu steuern – z. B. Screenshots zu erstellen, durch Seiten zu navigieren, Formulare auszufüllen oder Daten zu scrapen. Eingeführt als Teil des MCP-Ökosystems von Anthropic im November 2024, ist es für sichere, standardisierte Interaktionen mit externen Tools konzipiert.

Mit Browser tools mcp kann Cursor IDE jetzt sich wiederholende Browseraufgaben automatisieren oder Webdaten in Echtzeit abrufen, was Ihr Programmierleben vereinfacht. Stellen Sie sich vor, Sie bitten Cursor IDE, „Schlagzeilen zu scrapen“ oder „ein Formular auszufüllen“ – alles ist möglich! Richten wir es ein und sehen wir, wie die Magie sich entfaltet.

Einrichten Ihrer Umgebung für Browser tools mcp

Lassen Sie uns Ihr System bereit machen, um Browser tools mcp mit Cursor IDE zu verwenden. Es ist ein Kinderspiel, also legen wir los!

1. Prüfen Sie die Voraussetzungen:

Node.js: Stellen Sie sicher, dass Node.js (Version 16 oder höher) installiert ist. Überprüfen Sie dies mit node --version in Ihrem Terminal, oder holen Sie es sich von nodejs.org.
Google Chrome oder Chromium: Sie benötigen einen Chromium-basierten Browser, der für die Erweiterung installiert ist.
Cursor IDE: Halten Sie Cursor IDE bereit (laden Sie es bei Bedarf von cursor.com herunter – Version 0.45 oder höher wird empfohlen).
Grundkenntnisse: Ein wenig Vertrautheit mit Terminalbefehlen und Chrome-Erweiterungen wird helfen.
Hardware: Eine CPU mit 4+ Kernen, 16 GB+ RAM und 10 GB+ freiem Speicher sorgen dafür, dass alles reibungslos läuft.

2. Erstellen Sie einen Projektordner:

Öffnen Sie Ihr Terminal und richten Sie Ihren Arbeitsbereich ein:

mkdir browser-tools-mcp
cd browser-tools-mcp

Dies ist Ihre Homebase für Browser tools mcp.

Sie sind bereit, Browser tools mcp zu installieren – machen wir weiter!

Installieren von Browser tools mcp mit Cursor IDE

Lassen Sie uns Browser tools mcp installieren und mit Cursor IDE verbinden. So geht's Schritt für Schritt.

Schritt 1: Installieren Sie die BrowserTools Chrome-Erweiterung

Browser tools mcp basiert auf einer Chrome-Erweiterung, um Browserdaten wie Konsolenprotokolle, Netzwerkanforderungen und DOM-Elemente zu erfassen.

1. Laden Sie die Erweiterung herunter:

Da die Genehmigung im Chrome Web Store noch aussteht, holen Sie sich den Quellcode von GitHub oder klicken Sie hier, um die Erweiterung herunterzuladen:

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

2. Laden Sie die entpackte Erweiterung:

Öffnen Sie Chrome und gehen Sie zu chrome://extensions/.

Aktivieren Sie den Entwicklermodus (Umschalter oben rechts).

Klicken Sie auf „Entpackt laden“ und wählen Sie den Ordner chrome-extension innerhalb des geklonten Repositorys oder wählen Sie den Ordner, den Sie zuvor heruntergeladen haben.

Bestätigen Sie, dass „BrowserToolsMCP“ in Ihrer Erweiterungsliste erscheint – halten Sie es für einen einfachen Zugriff angepinnt!

Schritt 2: Richten Sie den BrowserTools MCP-Server in Cursor ein

Verbinden wir nun den MCP-Server mit Cursor IDE für die Browserkommunikation.

Öffnen Sie die Cursor IDE-Einstellungen (Strg+, oder Cmd+, auf dem Mac).

Navigieren Sie zu Features → MCP-Server.
Klicken Sie auf „Neuen MCP-Server hinzufügen“.

Füllen Sie die Details aus:
Name: browser-tools (oder einen beliebigen eindeutigen Namen, den Sie bevorzugen).
Auswählen: command.
Fügen Sie den Befehl ein:

npx @agentdeskai/browser-tools-mcp@1.2.0

Hinweis: Wenn npx unter Windows nicht erkannt wird, führen Sie where npx in Ihrem Terminal aus, um den Pfad zu finden (z. B. C:\Users\YourName\AppData\Roaming\npm\npx), und verwenden Sie ihn explizit.
Speichern Sie die Konfiguration. Sie sollten die Tools mit einer grünen Anzeige neben „browser-tools“ sehen. Wenn es nicht angezeigt wird, aktualisieren Sie Cursor IDE oder warten Sie einige Sekunden.

Schritt 3: Führen Sie den BrowserTools-Server aus (optional, aber empfohlen)

Um zusätzliche Funktionen wie die Erfassung von Screenshots und aggregierte Protokolle zu erhalten, führen Sie den BrowserTools-Server separat aus:

Führen Sie in Ihrem Terminal Folgendes aus:

npx @agentdeskai/browser-tools-server@1.2.0

Dieser Server lauscht standardmäßig auf Port 3025. Stellen Sie sicher, dass kein anderer Prozess diesen Port verwendet (überprüfen Sie dies mit netstat -a -n | find "3025" unter Windows oder lsof -i :3025 unter Mac/Linux).
Dieser Schritt verbessert die Websocket-Kommunikation für Screenshots und Audit-Modi – super nützlich!

Schritt 4: Verwenden Sie Chrome Developer Tools mit BrowserTools MCP

Integrieren wir Browser tools mcp in die Chrome DevTools.

Öffnen Sie eine beliebige Webseite in Chrome (z. B. https://example.com).
Klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“, um die Chrome DevTools zu öffnen.
Navigieren Sie zum Panel „BrowserTools“ (hinzugefügt von der Erweiterung).

Von hier aus können Sie:

Manuell Screenshots erfassen (automatisches Einfügen in Cursor IDE ist optional).
Screenshot-Speicherpfade festlegen (Standard ist Downloads/mcp-screenshots).
Gespeicherte Protokolle löschen.
Protokollierungslimits und -einstellungen anpassen.

Wichtig: Protokolle werden jedes Mal gelöscht, wenn Sie die Seite aktualisieren oder den MCP-Server neu starten.

Schritt 5: Überprüfen Sie, ob alles funktioniert

Testen Sie das Setup in Cursor IDE.

Verwenden Sie in Cursor IDE den Chat ("Strg" oder "Cmd" + L) und versuchen Sie Befehle wie „Konsolenprotokolle von der aktuellen Seite erfassen“ oder „Einen Screenshot von https://example.com.“ erstellen.
Überprüfen Sie, ob Protokolle im Chat oder Terminal angezeigt werden, und bestätigen Sie, dass Screenshots im angegebenen Ordner gespeichert werden.
Wenn nichts angezeigt wird, stellen Sie sicher, dass der MCP-Server ausgeführt wird und die Chrome-Erweiterung verbunden ist.

Sie haben gerade Browser tools mcp mit Cursor IDE eingerichtet – großartige Arbeit!

Verwenden von Browser tools mcp für die Browserautomatisierung

Mit Browser tools mcp verbunden, automatisieren wir einige Browseraufgaben in Cursor IDE.

1. Testen Sie die grundlegende Navigation:

Geben Sie im Chat von Cursor IDE Folgendes ein: „Öffnen Sie die Website ‘https://example.com’ in Chrome.“
Browser tools mcp startet Chrome (falls nicht geöffnet) und navigiert zur Website. Cursor IDE bestätigt: „Ich habe https://example.com in Chrome geöffnet.“
Wenn dies fehlschlägt, überprüfen Sie die Chrome-Erweiterung und den MCP-Serverstatus.

2. Automatisieren Sie das Ausfüllen von Formularen:

Versuchen Sie: „Gehen Sie zu ‘https://example.com/contact’ und füllen Sie das Kontaktformular mit dem Namen ‘Alex Smith’, der E-Mail-Adresse ‘alex@example.com’ und der Nachricht ‘Hallo!’ aus.“
Browser tools mcp navigiert, findet das Formular und füllt es aus. Cursor IDE antwortet möglicherweise: „Ich habe das Kontaktformular mit den von Ihnen angegebenen Details ausgefüllt.“ Beobachten Sie Chrome in Aktion – ziemlich cool!

3. Scrapen Sie Webdaten:

Fragen Sie: „Scrapen Sie die Schlagzeilen von ‘https://news.example.com’.”
Browser tools mcp besucht die Seite, extrahiert Schlagzeilen (mithilfe von DOM-Daten) und gibt sie in Cursor IDE zurück, z. B.: „Hier sind die neuesten Schlagzeilen: ‘Breaking News 1’, ‘Breaking News 2’.”
Geben Sie für komplexe Websites Ziele an (z. B. „Schlagzeilen aus der Klasse ‘news-title’ extrahieren“).

Browser tools mcp eröffnet eine Welt voller Automatisierungsmöglichkeiten in Cursor IDE!

Tipps, um das Beste aus Browser tools mcp herauszuholen

So verbessern Sie Ihre Browser tools mcp-Erfahrung mit Cursor IDE:

Seien Sie spezifisch: Verwenden Sie präzise Befehle (z. B. „Klicken Sie auf die Schaltfläche mit der ID ‘submit-btn’“) für eine genaue Automatisierung.
Überprüfen Sie die Berechtigungen: Stellen Sie sicher, dass die Chrome-Erweiterung Zugriff auf aktive Tabs und die Bildschirmaufnahme hat.
Halten Sie den Server am Laufen: Schließen Sie das Terminal mit dem MCP-Server nicht – starten Sie es bei Bedarf neu.
Entdecken Sie Funktionen: Probieren Sie die Erfassung von Screenshots oder die Protokollanalyse zum Debuggen aus – überprüfen Sie das GitHub-Repository für weitere Informationen!

Meine Erfahrung mit Browser tools mcp

Die Arbeit mit Browser tools mcp in Cursor IDE war eine Freude! Die Einrichtung verlief reibungslos, und die Automatisierung von Browseraufgaben fühlte sich nahtlos an. Screenshots und Protokolle in Cursor IDE waren eine große Hilfe beim Debuggen. Wenn Sie auf ein Problem stoßen, überprüfen Sie den Port (3025) und die Erweiterungsverbindung.

Abschließende Gedanken: Ihr Browser tools mcp-Abenteuer

Sie haben Browser tools mcp mit Cursor IDE eingerichtet und die Magie der Browserautomatisierung freigeschaltet! Von der Navigation auf Websites bis zum Scrapen von Daten sind Sie bereit, Webaufgaben mit Leichtigkeit zu bewältigen. Experimentieren Sie mit weiteren Automatisierungsideen – wie der Verfolgung von Preisen oder Aufgaben der Front-End-Webentwicklung! Weitere Informationen finden Sie im browser-tools-mcp github repo. Vergessen Sie nicht, sich Apidog anzusehen, wenn Sie nach einer besseren Alternative zu Postman suchen, und setzen Sie Ihre Browser tools mcp-Reise fort!

button