So stellen Sie eine Verbindung zwischen Claude Code und Bright Data Web MCP Server her

In diesem Lernprogramm erfahren Sie:

Was Claude Code ist und warum er als einer der beliebtesten und leistungsfähigsten CLI-Codieragenten gilt.
Wie das Hinzufügen von Webinteraktions- und Datenextraktionsfunktionen die Effektivität von Claude Code noch steigern kann.
Wie Sie Claude Code mit dem Bright Data Web MCP-Server verbinden, um einen erweiterten KI-Codierungsagenten zu erstellen.

Lassen Sie uns eintauchen!

Was ist Claude Code?

Claude Code ist ein von Anthropic entwickeltes Befehlszeilenschnittstellen-Tool, das Ihnen direkten Zugriff auf Claude-Modelle über Ihr Terminal ermöglicht. Es ermöglicht Ihnen, komplexe Kodierungsaufgaben zu delegieren, Arbeitsabläufe zu automatisieren und mit anderen Tools zu integrieren.

Mit anderen Worten, es fungiert als KI-Paar Programmierer und Coding Agent. Claude Code zeichnet sich durch seine Fähigkeit aus, den Projektkontext zu verstehen, Code zu generieren, zu testen, zu debuggen und sogar Git-Operationen durchzuführen. Zu seinen wichtigsten Funktionen gehören:

Agentische Kodierung: Versteht komplexe Kodierungsaufgaben, entwickelt Lösungen und führt sie direkt in Ihrem Workflow aus.
Workflow-Integration: Integriert sich mit verschiedenen Tools und APIs durch MCP.
Verständnis der Codebase: Analysiert und versteht die Struktur und Logik Ihrer Codebasis für eine kontextbewusste Codegenerierung.
Codegenerierung und -bearbeitung: Generiert neuen Code, refaktorisiert vorhandenen Code und behebt Fehler auf der Grundlage Ihrer Anweisungen.
Testen und Linting: Führt Tests und Linting-Befehle aus, um Probleme in Ihrem Code zu identifizieren und zu beheben.
Git-Integration: Vereinfacht Git-Vorgänge wie Commit, Push und das Erstellen von Pull Requests.

Mit über 30.000 Sternen auf GitHub und mehr als 5 Millionen wöchentlichen Downloads ist Claude Code eine der beliebtesten – wenn nicht sogar die beliebteste – AI-Pair-Programming-Lösung. Das ist nicht überraschend, wenn man bedenkt, dass die Claude-Modelle derzeit zu den besten LLMs gehören, die es für die Programmierung gibt.

Warum Claude Code mit Webzugang und frischen Daten erweitern?

Obwohl Claude Code auf fortschrittlichen Claude-Modellen basiert, unterliegt es denselben Einschränkungen wie jedes LLM: Sein Wissen ist statisch. Die Trainingsdaten stellen eine Momentaufnahme in der Zeit dar, die schnell veraltet. Das gilt besonders in schnelllebigen Bereichen wie der Softwareentwicklung!

Stellen Sie sich nun vor, dass Ihr Claude Code CLI-Assistent in der Lage ist,:

neue Tutorials und Dokumentationen abzurufen,
Live-Anleitungen zu konsultieren, während er Code schreibt, und
dynamische Websites so einfach zu durchsuchen, wie er durch Ihre lokalen Dateien navigieren kann.

Genau das können Sie freischalten, indem Sie ihn mit dem Web MCP von Bright Data verbinden.

Die Web MCP von Bright Data bietet Zugriff auf mehr als 60 KI-fähige Tools, die für Echtzeit-Webinteraktion und Datenerfassung entwickelt wurden. Diese werden alle von der umfangreichen KI-Infrastruktur von Bright Data unterstützt.

Hier sind nur einige der Möglichkeiten, die sich durch die Erweiterung von Claude Code mit der Web MCP von Bright Data ergeben:

Holen Sie aktuelle Suchmaschinenergebnisse und betten Sie sie direkt in Ihre Notizen oder Dokumente ein.
Nehmen Sie die neuesten Tutorials oder API-Dokumente auf und generieren Sie daraus Arbeitscode oder sogar Gerüstprojekte.
Sammeln Sie Live-Webseitendaten für Tests, Mocking oder tiefergehende Analysen.

Den vollständigen Katalog der Tools finden Sie in der Bright Data MCP-Dokumentation.

Wenn Sie diese Integration in Aktion sehen möchten, sehen Sie sich an, wie Web MCP in Claude Code funktioniert.

So verbinden Sie Claude Code mit dem Web MCP von Bright Data

Erfahren Sie, wie Sie Claude Code lokal installieren und konfigurieren und mit Web MCP von Bright Data integrieren. Der daraus resultierende erweiterte Kodierungsagent wird verwendet, um:

Scraping einer LinkedIn-Profilseite in Echtzeit.
Speichern Sie die Daten lokal in einer JSON-Datei.
Erstellen einer Express-Anwendung mit einem Endpunkt, der aus der JSON-Datei gelesene Mocked-Daten zurückgibt.

Führen Sie die folgenden Schritte aus!

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die folgenden Voraussetzungen verfügen:

Node.js 18+ ist lokal installiert (wir empfehlen die neueste LTS-Version).
Ein Claude-Abonnement oder ein Anthropic-Konto mit Guthaben (in diesem Lernprogramm wird ein Anthropic-Konto verwendet).
Ein Bright Data-Konto mit einem fertigen API-Schlüssel.

Beachten Sie, dass Sie diese Konten nicht sofort erstellen müssen. Die folgenden Schritte werden Sie bei Bedarf durch die Einrichtung führen.

Das nächste, optionale, aber hilfreiche Hintergrundwissen ist:

Ein allgemeines Verständnis für die Funktionsweise von MCP.
Eine gewisse Vertrautheit mit dem Bright Data Web MCP-Server und seinen Tools.

Schritt 1: Installieren und Konfigurieren von Claude Code

Um Claude Code verwenden zu können, benötigen Sie zunächst ein Claude-Abonnement oder ein Anthropic-Konto mit einem gewissen Guthaben.

Sobald Ihr Claude/Anthropic-Konsolenkonto bereit ist, installieren Sie Claude Code global über das offizielle @anthropic-ai/claude-code npm-Paket:

npm install -g @anthropic-ai/claude-code

Als nächstes navigieren Sie zu dem Projektordner, in dem Claude Code arbeiten soll, und starten ihn mit

claude

Um das zugrundeliegende Claude-Modell oder andere Konfigurationen zu konfigurieren, lesen Sie bitte die offiziellen Dokumente.

Wenn Sie den CLI-Agenten zum ersten Mal starten, sollten Sie den Bildschirm für die Ersteinrichtung sehen:

Wählen Sie ein Thema aus und drücken Sie die Eingabetaste, um zur Autorisierungsansicht zu gelangen:

Wählen Sie die Art der Authentifizierung, die Sie verwenden möchten (“Claude-Konto mit Abonnement” oder “Anthropic-Konsolenkonto”). In diesem Beispiel gehen wir davon aus, dass Sie Option 2 gewählt haben, obwohl das Verfahren für beide ähnlich ist.

Auf der folgenden Seite werden Sie aufgefordert, Claude Code mit Ihrem Anthropic Console-Konto zu verbinden:

Authorizing Claude Code in your Anthropic Console account

Drücken Sie die Schaltfläche “Autorisieren” und kehren Sie zu Ihrem Terminal zurück. In Ihrem Anthropic Console-Konto wird dadurch ein neuer API-Schlüssel erstellt:

Anschließend speichert Claude Code diesen API-Schlüssel automatisch in seinen Konfigurationsdateien, so dass Sie von nun an angemeldet bleiben.

Sie sollten nun eine Abfrage sehen, ob Sie der Ausführung von Claude Code im aktuellen Verzeichnis vertrauen:

Trusting Claude Code in the current directory

Wählen Sie die positive Option, und Sie haben nun vollen Zugriff auf die Claude Code CLI:

In das Rechteck "Refactor <Dateipfad>" können Sie nun die Eingabeaufforderungen schreiben, die Sie an den Code-Agenten übergeben wollen.

Großartig! Claude Code ist nun eingerichtet und einsatzbereit.

Schritt 2: Erste Schritte mit dem Web MCP von Bright Data

Falls Sie dies noch nicht getan haben, erstellen Sie ein Bright Data-Konto. Wenn Sie bereits eines haben, melden Sie sich einfach an.

Folgen Sie anschließend den offiziellen Anweisungen, um Ihren Bright Data-API-Schlüssel zu generieren. Der Einfachheit halber wird in diesem Lernprogramm davon ausgegangen, dass Sie einen API-Schlüssel mit Admin-Berechtigungen verwenden.

Installieren Sie Web MCP global über das Paket @brightdata/mcp mit dem folgenden Befehl:

npm install -g @brightdata/mcp

Testen Sie anschließend, ob der Server mit diesem Bash-Befehl funktioniert:

API_TOKEN="<Ihre_BRIGHT_DATA_API>" npx -y @brightdata/mcp

Unter Windows PowerShell lautet der entsprechende Befehl:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

Stellen Sie sicher, dass Sie <YOUR_BRIGHT_DATA_API> durch den tatsächlichen API-Token ersetzen, den Sie zuvor generiert haben. Beide Befehle setzen die erforderliche Umgebungsvariable API_TOKEN und starten den MCP-Server über das npm-Paket @brightdata/mcp.

Wenn alles korrekt funktioniert, sollten Sie ähnliche Protokolle wie die folgenden sehen:

Beim ersten Start erstellt der MCP-Server automatisch zwei Standardzonen in Ihrem Bright Data-Konto:

mcp_unlocker: Eine Zone für Web Unlocker.
mcp_browser: Eine Zone für die Browser-API.

Diese Zonen sind erforderlich, um auf die gesamte Palette der MCP-Server-Tools zugreifen zu können.

Um zu bestätigen, dass die Zonen erstellt wurden, melden Sie sich bei Ihrem Bright Data Dashboard an und navigieren Sie zur Seite“Proxies & Scraping Infrastructure“. Dort sollten beide Zonen aufgeführt sein:

The mcp_unlocker and mcp_browser zones created by the MCP server at startup

Hinweis: Wenn Ihr API-Token nicht über Admin-Berechtigungen verfügt, werden diese Zonen möglicherweise nicht automatisch erstellt. In diesem Fall können Sie sie manuell erstellen und ihre Namen mithilfe von Umgebungsvariablen angeben, wie in der offiziellen Dokumentation erläutert.

Standardmäßig stellt der MCP-Server nur die Tools search_engine und scrape_as_markdown zur Verfügung, die sogar kostenlos genutzt werden können.

Um erweiterte Funktionen wie die Browser-Automatisierung und die Extraktion strukturierter Daten freizuschalten, müssen Sie den Pro-Modus aktivieren. Dazu setzen Sie die Umgebungsvariable PRO_MODE=true, bevor Sie den MCP-Server starten:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

Oder, unter Windows:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $Env:PRO_MODE="true"; npx -y @brightdata/mcp

Wichtig: Wenn Sie sich für den Pro-Modus entscheiden, erhalten Sie Zugriff auf alle 60+ Werkzeuge. Gleichzeitig ist der Pro-Modus nicht in der kostenlosen Version enthalten und verursacht zusätzliche Kosten.

Großartig! Sie haben sich vergewissert, dass der Web MCP-Server auf Ihrem Computer korrekt läuft. Du kannst den Server nun stoppen, da der nächste Schritt darin besteht, Claude Code so zu konfigurieren, dass er automatisch für dich gestartet wird.

Schritt #3: Konfigurieren des Web MCP in Claude Code

Claude Code unterstützt mehrere Möglichkeiten, sich mit einem MCP-Server zu verbinden. In diesem Tutorium werden wir zwei Methoden behandeln:

Verwendung des Befehls mcp add.
Verwendung einer MCP .json Konfigurationsdatei.

Um den Web-MCP-Server global in Ihrer Claude-Code-Installation zu konfigurieren, führen Sie aus:

claude mcp add brightData 
  --env API_TOKEN=<IHR_BRIGHT_DATA_API_KEY> 
  --env PRO_MODE=true 
  -- npx -y @brightdata/mcp

Oder, äquivalent, auf Windows PowerShell:

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

Beide Befehle weisen Claude Code an, einen eigenen MCP-Server namens brightData hinzuzufügen. Dieser wird über den angegebenen npx-Befehl mit den Umgebungsvariablen gestartet. Mit anderen Worten: Claude Code kann nun automatisch eine Verbindung zum Bright Data Web MCP-Server herstellen. (Denken Sie daran, dass die Aktivierung von PRO_MODE env nicht erforderlich ist).

Nach der Ausführung des Befehls sollten Sie eine ähnliche Ausgabe wie die folgende sehen:

The output produced by the mcp add command

Dies bestätigt, dass der MCP-Server zur globalen Claude Code-Konfigurationsdatei hinzugefügt wurde.

Wenn Sie die MCP-Konfiguration stattdessen lieber projektspezifisch halten möchten, erstellen Sie eine Datei namens mcp_servers.json mit folgendem Inhalt:

{
  "mcpServers": {
    "brightData": {
      "command": "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<IHR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

In dieser Konfiguration:

Das mcpServers-Objekt teilt Claude Code mit, wie externe MCP-Server gestartet werden sollen.
Der Eintrag brightData definiert den Befehl und die Umgebungsvariablen, die für die Ausführung des Web-MCP erforderlich sind. Die Einstellung PRO_MODE ist optional, wird aber empfohlen.

Weisen Sie anschließend Claude Code an, die oben genannte Konfigurationsdatei mit dem Flag --``mcp-config zu laden:

claude --mcp-config mcp_servers.json

Wichtig! Ersetzen Sie <YOUR_BRIGHT_DATA_API_KEY> durch Ihr tatsächliches Bright Data-API-Token, um die Authentifizierung zu aktivieren.

Perfekt! Jetzt können Sie die MCP-Integration in Claude Code testen.

Schritt Nr. 4: Überprüfen der MCP-Verbindung

Unabhängig davon, ob Sie die MCP-Integration mit mcp add oder --mcp-config konfiguriert haben, sollten Sie überprüfen, ob Claude Code tatsächlich eine Verbindung mit dem Bright Data Web MCP-Server herstellen kann.

Um die Verbindung zu überprüfen, starten Sie die Claude Code-CLI und geben den Befehl /mcp ein. Wenn alles korrekt funktioniert, sollten Sie eine Ausgabe wie diese sehen:

Claude Code successfully connected to the brightData MCP

Wie Sie sehen können, hat die lokale CLI-Instanz erfolgreich eine Verbindung zum konfigurierten BrightData MCP-Server hergestellt. Gut gemacht!

Schritt #5: Führen Sie eine Aufgabe in Claude Code aus

Um die Fähigkeiten Ihres Claude Code Coding Agents zu testen, starten Sie eine Eingabeaufforderung wie die folgende:

Scrapen Sie die Daten von "https://it.linkedin.com/in/antonello-zanini" und speichern Sie die Ausgabe als JSON in einer lokalen Datei namens "profile.json". Erstellen Sie dann ein einfaches Express.js-Projekt mit einem Endpunkt, der einen Slug annimmt, der das LinkedIn-Profil darstellt, und den Inhalt von "profile.json" zurückgibt.

Dies stellt einen realen Anwendungsfall dar, da es reale Daten sammelt, um eine Express-API zu simulieren.

Fügen Sie die Eingabeaufforderung in Claude Code ein und drücken Sie die Eingabetaste, um sie auszuführen. Sie sollten ein ähnliches Verhalten sehen wie hier:

Das GIF wurde beschleunigt, aber dies ist, was Schritt für Schritt passiert:

Claude Code zerlegt die Eingabeaufforderung in eine vierstufige Aufgabe.
Der LLM wählt das entsprechende MCP-Tool(web_data_linkedin_person_profile) mit den richtigen Argumenten aus, die aus der Eingabeaufforderung(url: "https://it.linkedin.com/in/antonello-zanini") extrahiert wurden.
Sie werden aufgefordert, die Ausführung des Tools zu akzeptieren.
Nach der Genehmigung wird die Scraping-Aufgabe über die MCP-Integration gestartet.
Die resultierenden Daten werden im Rohformat (d. h. JSON) angezeigt.
Claude Code bittet um die Erlaubnis, die Daten in einer lokalen Datei namens profile.json zu speichern.
Nach der Genehmigung wird die Datei erstellt und mit Daten gefüllt.
Sie werden aufgefordert, die Datei package.json für das Node.js Express-Projekt zu erstellen.
Nach der Genehmigung wird die Datei package.json dem aktuellen Verzeichnis hinzugefügt.
Es wird der Code für server.js angezeigt, der den Express-Server mit dem erforderlichen API-Endpunkt definiert, und Sie werden um Erlaubnis gebeten, ihn zu erstellen.
Nach Genehmigung wird die Datei server.js erstellt.
Sie erhalten die Befehle, um die Abhängigkeiten des Projekts zu installieren und den Express-Server zu starten.

In diesem Beispiel sieht die endgültige Ausgabe des Tasks wie folgt aus:

The final instructions produced by Claude Code

Am Ende der Interaktion sollte Ihr Arbeitsverzeichnis diese drei Dateien enthalten:

├── package.json
├─── profile.json
└── server.js

Wunderbar! Lassen Sie uns nun überprüfen, ob die generierten Dateien wie erwartet funktionieren.

Schritt #6: Untersuchen Sie die Ausgabe

Öffnen Sie das Projektverzeichnis in Visual Studio Code und untersuchen Sie zunächst die Datei profile.json:

Diese Datei enthält echte LinkedIn-Daten, keine halluzinierten oder erfundenen Inhalte, die vom Claude LLM generiert wurden. Die Daten wurden von Bright Data mithilfe des Tools web_data_linkedin_person_profile (das intern LinkedIn Scraper genannt wird) von der folgenden öffentlichen LinkedIn-Profilseite erfasst:

Hinweis: Das Scraping von LinkedIn ist aufgrund des robusten Anti-Bot-Schutzes des Unternehmens bekanntermaßen schwierig. Ein normaler LLM kann diese Aufgabe nicht zuverlässig ausführen, was beweist, wie leistungsfähig Ihr Codign Agent dank der Bright Data Web MCP-Integration geworden ist.

Als Nächstes sollten Sie die Datei package.json überprüfen:

In dieser Datei sind die erforderlichen Abhängigkeiten (z. B. express) zur Definition Ihres Node.js-Projekts aufgeführt.

Überprüfen Sie schließlich die Datei server.js:

Beachten Sie, dass der Code den erforderlichen API-Endpunkt wie in der Eingabeaufforderung angegeben definiert. Im Einzelnen lädt der Endpunkt /profile/:slug die LinkedIn-Profildaten aus profile.json und gibt das richtige Profil auf der Grundlage der LinkedIn-ID (hier als Slug verwendet) zurück.

Unglaublich! Die generierten Dateien sehen solide aus. Der letzte Schritt besteht darin, die Express-Anwendung zu testen, um sicherzustellen, dass sie sich wie gewünscht verhält.

Schritt #7: Testen Sie das generierte Projekt

Folgen Sie den Anweisungen von Claude Code in der Ausgabe. Beginnen Sie mit der Installation der Projektabhängigkeiten:

npm install

Dann starten Sie den Express-Server mit:

npm start

Ihr Server sollte nun auf localhost lauschen. Testen Sie den /profile/:slug API Endpunkt mit curl:

curl http://localhost/profile/antonello-zanini

Oder mit einem visuellen HTTP-Client wie Postman:

Testing the target API endpoint in Postman

Hinweis: Das Ergebnis sollte die korrekten LinkedIn-Daten enthalten, die aus profile.json gelesen wurden.

Und voilà! Die API wurde dank der Integration von Claude Code und Bright Data Web MCP erfolgreich nachgebildet.

Dieses Beispiel zeigt, wie leistungsfähig die Kombination von Claude Code mit der Web MCP ist. Experimentieren Sie jetzt mit verschiedenen Prompts und erkunden Sie erweiterte LLM-gesteuerte Daten-Workflows direkt in der CLI!

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie Claude Code mit dem Bright Data Web MCP-Server(der jetzt eine kostenlose Stufe bietet!) verbinden können. Das Ergebnis ist ein leistungsstarker KI-Coding-Agent, der auf das Web zugreifen und mit ihm interagieren kann.

Diese Integration war dank der in Claude Code integrierten Unterstützung für MCP möglich. Um fortschrittlichere Kodierungsagenten zu erstellen, können Sie die gesamte Palette der in der KI-Infrastruktur von Bright Data verfügbaren Services nutzen. Diese Tools können eine Vielzahl von Agentenszenarien unterstützen.

Erstellen Sie ein kostenloses Bright Data-Konto und experimentieren Sie noch heute mit KI-fähigen Webtools!

Gratis testen Starte mit Google