BrowserTools MCP

BrowserTools MCP

BrowserTools MCP ist ein fortschrittliches Tool zur Überwachung und Interaktion mit dem Browser. Es ermöglicht KI-Agenten und kompatiblen Editoren, Browserdaten über eine Chrome-Erweiterung und lokale Server zu erfassen, zu analysieren und zu überprüfen. Es bietet Sprachmodellen einen Echtzeitzugriff auf den Browserstatus. Dadurch sind die Agenten viel kontextbewusster und können eine Vielzahl von automatisierten Browserprüfungen und Debugging-Aufgaben ausführen – alles ohne dass Daten Ihren Computer verlassen.

Author: AgentDeskAI


Protokoll anzeigen

Was ist BrowserTools MCP?

BrowserTools MCP ist ein System, das Ihren Browser mit KI-gesteuerten Anwendungen oder Editoren verbindet. Es nutzt eine Chrome-Erweiterung, einen lokalen NodeJS-Server und einen MCP-Server. So erhalten Sprachmodelle und Coding-Agenten Zugriff auf Browserprotokolle, DOM-Details, Screenshots und Netzwerkanforderungen. Sie führen automatisierte Prüfungen für Barrierefreiheit, Leistung, SEO und bewährte Praktiken durch. Es läuft vollständig auf Ihrem Computer, um die Privatsphäre zu wahren.

So konfigurieren Sie es

  1. Installieren Sie die Chrome-Erweiterung: Laden Sie die BrowserTools MCP Chrome-Erweiterung von der Release-Seite herunter und fügen Sie sie Ihrem Browser hinzu.
  2. Richten Sie den MCP-Server ein: Führen Sie in Ihrer IDE oder einem MCP-kompatiblen Client aus:
    npx @agentdeskai/browser-tools-mcp@latest
  3. Starten Sie den lokalen Node-Server: Öffnen Sie ein separates Terminal und führen Sie aus:
    npx @agentdeskai/browser-tools-server@latest
  4. Aktivieren Sie das Erweiterungs-Panel: Öffnen Sie die Chrome DevTools, navigieren Sie zum BrowserToolsMCP-Panel und stellen Sie sicher, dass es aktiv ist.
  5. Überprüfen Sie die Konnektivität: Stellen Sie sicher, dass nur eine Instanz des DevTools-Panels geöffnet ist. Starten Sie gegebenenfalls sowohl den Browser als auch die Server neu, um Probleme zu beheben.
  6. Konfigurieren Sie die Optionen: Nutzen Sie die Optionen der Erweiterung, um Screenshot-Ordner, Token-/Trunkierungsgrenzen und Datenschutzpräferenzen festzulegen, falls gewünscht.

So verwenden Sie es

  • Sobald Ihre Konfiguration abgeschlossen ist und alle Komponenten laufen, verwenden Sie Ihren MCP-kompatiblen Editor oder Agenten (wie Cursor), um Prüfungen auszulösen, Protokolle, Screenshots zu erfassen oder mit Seitenelementen zu interagieren.
  • Häufige Anwendungen sind das Anfordern von KI-Agenten, um Prüfungen zur Barrierefreiheit durchzuführen, die Leistung zu analysieren, SEO zu überprüfen oder Code zu debuggen – direkt über die aktuell geöffnete Webseite in Ihrem Browser.
  • Die Ergebnisse werden in Ihrer IDE oder Agentenumgebung angezeigt, in Echtzeit aus Ihrer Browsersitzung generiert und können in Umgangssprache oder durch Funktionsaufrufe angefordert werden.

Hauptmerkmale

  • Nahtloser Echtzeitzugriff auf Browserprotokolle, Netzwerkaktivitäten und Screenshots für KI-Tools.
  • Automatisierte Prüfungen für Barrierefreiheit (WCAG), Leistung, SEO, bewährte Praktiken und NextJS-spezifische Aspekte mit Lighthouse-Integration.
  • Local-first: Alle Browserdaten werden auf Ihrem eigenen Computer verarbeitet und gespeichert – keine Informationen werden an Dritte gesendet.
  • Debugger- und Prüfmodus, die Sequenzen von detaillierten Überprüfungen mit einem Befehl orchestrieren.
  • Strukturierte JSON-Ergebnisse, die für Agenten-Workflows geeignet sind.
  • Flexible Konfiguration und robuste plattformübergreifende Konnektivität.
  • Ein-Klick-Protokoll- und Screenshot-Verwaltung über das Erweiterungs-Panel.

Anwendungsfälle

  • Automatisierte Barrierefreiheitsprüfung: Stellen Sie sicher, dass jede Seite, die Ihr Team erstellt, den Barrierefreiheitsstandards entspricht, indem Sie Prüfungen programmgesteuert während der Entwicklung durchführen.
  • Leistungsoptimierung: Entdecken Sie Engpässe und nicht optimierte Ressourcen, bevor Sie Code ausliefern, mit umsetzbaren Vorschlägen in Ihrer IDE.
  • SEO- und Best Practice-Analyse: Überprüfen Sie sofort die On-Page-SEO und die besten Codepraktiken, um die Sichtbarkeit in Suchmaschinen und die Webgesundheit zu maximieren.
  • Browser-Debugging: Erfassen Sie Protokolle, Netzwerkverläufe und Screenshots während Testfällen oder Fehlernachstellungen und teilen Sie kontextreiche Berichte.
  • Kontinuierliche Codequalität: Integrieren Sie Prüfungen in CI/CD-Prozesse, indem Sie automatische Prüfungen mit Ihren MCP-kompatiblen Tools skripten.

FAQ

Q: Sendet BrowserTools MCP irgendwelche Browserdaten an externe Server?
Nein. Alle Protokolle, Screenshots und Diagnosedaten werden lokal gespeichert und nie an Drittanbieter übermittelt. Datenschutz und Sicherheit werden strikt gewahrt.

Q: Welche KI-Editoren oder Agenten kann ich mit BrowserTools MCP verwenden?
Jeder Editor oder jedes Tool, das das Model Context Protocol (MCP) unterstützt, wie Cursor, Claude Desktop, Zed oder Cline, kann die Funktionen von BrowserTools MCP nutzen.

Q: Ich habe Verbindungsprobleme – was sollte ich überprüfen?
Stellen Sie zuerst sicher, dass sowohl der NodeJS-Server als auch der MCP-Server laufen und dass nur eine Instanz des Chrome DevTools-Panels aktiv ist. Wenn die Probleme weiterhin bestehen, schließen Sie Chrome und beide Server vollständig und starten Sie sie dann neu, und öffnen Sie das DevTools-Panel erneut.