Web Scraping in Cline mit dem MCP-Server von Bright Data

In diesem Blogbeitrag erfahren Sie mehr:

• Was Cline ist und warum es in der Coding-Community immer beliebter wird.
• Wie die Integration der KI-Codieragenten Ihre Entwicklungserfahrung auf die nächste Stufe heben kann.
• Verbindung von Cline mit dem Bright Data Web MCP-Server zur Erstellung von KI-Codieragenten mit Webdatenabfragetools.

Lasst uns eintauchen!

Was ist Cline?

Cline ist eine Visual Studio Code-Erweiterung, die als autonomer KI-gesteuerter Programmierassistent dient. Sie lässt sich sowohl in die Befehlszeile als auch in den Code-Editor integrieren, um Sie während des gesamten Entwicklungsprozesses zu unterstützen.

Die Cline VS Code-Erweiterung geht über die einfache Code-Vervollständigung hinaus. Sie kann Projektstrukturen analysieren, Code erzeugen und bearbeiten, Terminalbefehle ausführen und sogar beim Debuggen von Webanwendungen helfen.

Cline unterstützt mehrere KI-APIs, sodass Sie eine Verbindung zu verschiedenen Modellen und Anbietern herstellen können. Sie können die Funktionalität auch erweitern, indem Sie benutzerdefinierte KI-gestützte Tools über MCP(Model Context Protocol) hinzufügen.

Zum Zeitpunkt der Erstellung dieses Artikels hat die Cline-Erweiterung über 48k Sterne auf GitHub und mehr als 1,9 Millionen Downloads im Visual Studio Marketplace.

Warum sollten Cline-Agenten in der Lage sein, Daten aus dem Web zu extrahieren?

Unabhängig davon, wie leistungsfähig das in Cline integrierte LLM ist, stößt es immer noch auf eine gemeinsame Einschränkung, die alle Sprachmodelle aufweisen: veraltetes Wissen. Ein LLM kann nur auf der Grundlage der statischen Daten antworten, auf denen es trainiert wurde und die eine Momentaufnahme der Vergangenheit darstellen.

Wenn man bedenkt, wie schnell sich die technische Welt weiterentwickelt, ist das sogar noch ein größeres Problem. Deshalb ist es nicht ungewöhnlich, dass LLMs veraltete Kodierungsansätze und veraltete Methoden vorschlagen oder kürzlich eingeführte Funktionen ganz vermissen.

Stellen Sie sich nun vor, dass Ihr KI-Codierassistent Cline in der Lage ist, aktuelle Tutorials, Dokumentationsseiten und Leitfäden abzurufen und daraus zu lernen. Dies wird durch die Integration von Cline mit einer Lösung möglich, die LLMs mit Websuche und Datenzugriffsfunktionen erweitert.

Genau das bietet der Bright Data Web MCP-Server. Dieser Server bietet eine Sammlung von über 60 KI-fähigen Tools für die Echtzeit-Webdatenerfassung, die von der KI-Dateninfrastruktur von Bright Data unterstützt werden.

Eine vollständige Liste der vom Bright Data Web MCP-Server bereitgestellten Tools finden Sie in der Dokumentation.

Andere mögliche Anwendungsfälle sind:

• Abrufen von Live-SERP-Daten und Einfügen von kontextbezogenen Links in Ihre Markdown-Berichte bei Verwendung von VS Code als Texteditor.
• Nach Tutorials oder Dokumentationen fragen, die sich auf den Code beziehen, den Sie aktiv schreiben.
• Scraping von Daten aus realen Websites im laufenden Betrieb und deren lokale Speicherung für Mocking- oder weitere Analysezwecke

Sehen wir uns nun den Bright Data Web MCP-Server in Cline in Aktion an. Wir werden einen der oben genannten Anwendungsfälle durchgehen, um zu verstehen, was diese Integration wirklich ermöglicht!

Hinzufügen von Datenbeschaffungsfunktionen zu einem KI-Codierungsagenten in Cline

Erfahren Sie, wie Sie Cline zu Visual Studio Code hinzufügen und mit dem Bright Data Web MCP-Server integrieren. Das Ergebnis dieses schrittweisen Abschnitts ist ein KI-Codierungsagent, der Daten aus dem Web abrufen und mit ihnen interagieren kann. Dadurch kann der Agent genauere Ergebnisse und intelligentere Aufgabenergebnisse liefern.

Insbesondere werden Sie einen verbesserten Cline-KI-Agenten mit Datenabfragefähigkeiten entwickeln und ihn verwenden, um:

1. Scrapen Sie eine Amazon-Produktseite.
2. Speichern Sie die Daten lokal.
3. Erstellen Sie ein Node.js-Skript zum Laden und Verarbeiten dieser Daten.

Folgen Sie den nachstehenden Schritten!

Voraussetzungen

Für dieses Tutorial benötigen Sie:

• Node.js lokal installiert (wir empfehlen die neueste LTS-Version)
• Ein Cline-Konto
• Ein Bright Data-API-Schlüssel
• (Optional) Ein API-Schlüssel für Ihr bevorzugtes LLM (z. B. der Google Gemini API-Schlüssel)

Machen Sie sich keine Sorgen, wenn Sie noch keinen Bright Data-API-Schlüssel oder ein Cline-Konto haben. Wir werden Sie in den nächsten Schritten durch die Einrichtung führen.

Schritt #1: Cline in Visual Studio Code installieren

Öffnen Sie Visual Studio Code, klicken Sie auf das Symbol für Erweiterungen in der linken Seitenleiste, suchen Sie nach “cline” und wählen Sie die Cline-Erweiterung aus der Liste aus. Klicken Sie auf der Registerkarte “Cline-Erweiterung” auf die Schaltfläche “Installieren”:

Wenn Sie zum ersten Mal eine Erweiterung von Cline installieren, werden Sie aufgefordert, dem Herausgeber zu vertrauen. Klicken Sie auf “Herausgeber vertrauen & installieren”, um fortzufahren:

Nach der Installation sollten Sie ein Cline-Symbol in der linken Seitenleiste sehen. Klicken Sie darauf, um das Cline-Panel zu öffnen:

Hinweis: Wenn das Cline-Symbol nicht angezeigt wird, versuchen Sie, Visual Studio Code neu zu laden. Bei anderen Problemen lesen Sie bitte die offizielle Installationsdokumentationsseite.

Wunderbar! Cline wurde in VS Code installiert.

Schritt #2: Einrichten der Cline-Verbindung

Sie müssen nun Ihr Cline-Konto mit der zuvor installierten Erweiterung verbinden. Klicken Sie dazu auf die Schaltfläche “Get Started for Free”:

Sie werden in Ihrem Browser auf die folgende Seite weitergeleitet:

Melden Sie sich an (oder melden Sie sich an, wenn Sie bereits ein Konto haben), und Sie werden zum Fenster VS Code zurückgeleitet:

In Visual Studio Code sollten Sie nun das folgende Modal sehen. Klicken Sie auf “Öffnen”, um die Cline-Erweiterung zu authentifizieren:

Die Cline-Erweiterung sollte nun etwa so aussehen:

Wenn Sie zu Ihrem Cline-Konto im Browser zurückkehren, werden Sie feststellen, dass es standardmäßig mit einem kostenlosen Guthaben von 0,50 $ ausgestattet ist:

Wenn Sie vorhaben, Premium-LLMs über Cline zu nutzen, sollten Sie Guthaben hinzufügen. (Der Grund dafür ist, dass das Standardguthaben nur begrenzte Tests zulässt).

Wenn Sie kein Geld ausgeben oder lieber Ihren eigenen LLM-Anbieter verwenden möchten, können Sie Ihren API-Schlüssel auch direkt einbinden. Klicken Sie dazu auf das Zahnradsymbol im Cline-Panel. Wählen Sie dann “API-Konfiguration” und fügen Sie Ihren API-Schlüssel ein, um Ihre LLM-Integration zu konfigurieren:

Im obigen Beispiel haben wir Cline in das gemini-2.5-Flash-Modell integriert, das über die API kostenlos genutzt werden kann.

Fantastisch! Cline ist jetzt vollständig in VS Code eingerichtet und bereit, Ihnen bei der Erstellung eines KI-Codieragenten mit Web-Scraping-Funktionen zu helfen.

Schritt 3: Installieren Sie den Bright Data MCP-Server

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 dann den offiziellen Anweisungen, um Ihre Bright Data-API abzurufen. Der Einfachheit halber wird in den folgenden Anweisungen davon ausgegangen, dass Sie ein API-Token mit Admin-Berechtigungen verwenden.

Sie können nun den Bright Data Web MCP-Server global in Ihrer Node.js-Umgebung installieren:

npm install -g @brightdata/mcp

Testen Sie dann mit dem folgenden Bash-Befehl, ob alles funktioniert:

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

Oder unter Windows lautet der entsprechende PowerShell-Befehl:

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

Ersetzen Sie im obigen Befehl den Platzhalter durch die tatsächliche Bright Data-API, die Sie zuvor abgerufen haben. Mit diesem Befehl wird die erforderliche Umgebungsvariable API_TOKEN festgelegt und der MCP-Server mit dem npm-Paket @brightdata/mcp gestartet.

Wenn alles richtig eingestellt ist, sollte Ihr Terminal etwa so aussehen:

Wie Sie sehen können, initialisiert das @brightdata/mcp-Paket beim ersten Start des Befehls die erforderlichen Bright Data-Zonen in Ihrem Konto. Genauer gesagt, erstellt es eine Zone für Web Unlocker und eine weitere für die Scraping Browser API. Diese beiden Zonen ermöglichen es dem MCP-Server, alle Tools auszuführen, die er bereitstellt.

Um dies zu überprüfen, melden Sie sich bei Ihrem Bright Data-Dashboard an und gehen Sie zur Seite“Proxies & Scraping-Infrastruktur“. Sie sehen, dass die folgenden Zonen automatisch erstellt wurden:

Hinweis: Wenn Sie kein API-Token mit Admin-Berechtigungen verwenden, müssen Sie die Zonen manuell erstellen. Eine ausführliche Anleitung finden Sie in der offiziellen Dokumentation.

Großartig! Der Bright Data Web MCP-Server funktioniert wie ein Zauber.

Schritt 4: Verbinden von Cline mit dem Bright Data MCP-Server

Es ist an der Zeit, die Cline-Erweiterung mit dem lokal laufenden Bright Data Web MCP-Server zu integrieren. Klicken Sie zunächst auf die Schaltfläche “MCP-Server” im Cline-Bedienfeld:

Sie gelangen nun in den Konfigurationsbereich von Cline MCP Servers. Wechseln Sie zur Registerkarte “Installed” und klicken Sie auf die Schaltfläche “Configure MCP Servers”:

Eine cline_mcp_setting.json-Datei wird in Visual Studio Code geöffnet. Dort können Sie festlegen, mit welchen MCP-Servern sich die Cline-Erweiterung verbinden kann. Für die Integration mit dem Bright Data Web MCP-Server konfigurieren Sie ihn wie folgt:

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
      }
    }
  }
}

Hinweis: Weitere Details finden Sie in der offiziellen GitHub-Ausgabe.

Mit anderen Worten: Fügen Sie die Konfiguration “Bright Data” in das Feld mcpServers ein. Stellen Sie sicher, dass Sie durch Ihr tatsächliches Bright Data-API-Token ersetzen.

Sie sollten etwa so aussehen:

Perfekt! Wenn Sie nun die Registerkarte “Installiert” aufrufen, sehen Sie einen Eintrag für den Bright Data Web MCP-Server. Erweitern Sie ihn, um alle von ihm unterstützten Tools anzuzeigen:

Hier können Sie den Bright Data Web MCP-Server und seine Tools konfigurieren. Für diesen Arbeitsablauf sind die Standardeinstellungen ausreichend.

Weitere Informationen finden Sie in den offiziellen Dokumenten.

Großartig! Die Cline-Erweiterung kann nun eine Verbindung mit dem Bright Data Web MCP-Server herstellen und dessen Tools nutzen.

Schritt #5: Nutzen Sie den Cline AI Agent

Sie können nun den Cline AI-Codierungsagenten, der mit dem Bright Data Web MCP-Server verbunden ist, in Visual Studio Code testen.

Öffnen Sie zunächst Cline. Klicken Sie dann auf den Pfeil auf der rechten Seite, um auf das Menü “Einstellungen für die automatische Genehmigung” zuzugreifen. Aktivieren Sie in diesem Menü die Option “MCP-Server verwenden”, um die automatische Verbindung zu konfigurierten MCP-Servern zu ermöglichen:

Wenn diese Einstellung aktiviert ist, stellt Cline automatisch eine Verbindung zum MCP-Server her, ohne um Erlaubnis zu fragen. Sie werden immer noch aufgefordert, bevor ein Werkzeug verwendet wird, das sollte also ausreichen.

Testen Sie die Datenzugriffsfunktionen in Ihrem KI-Codierungsagenten mit einer Eingabeaufforderung wie dieser:

Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents.

Dies beschreibt ein potenzielles reales Szenario, das sich als nützlich für die Sammlung von Daten für Analyse, Mocking oder Tests erweist.

Führen Sie die Eingabeaufforderung in Cline aus, und Sie sollten die folgende Interaktion sehen:

Das obige GIF wurde beschleunigt, aber so ist es passiert:

1. Die Cline-Erweiterung sendet die Eingabeaufforderung an Ihren konfigurierten LLM (z. B. gemini-2.5-flash).
2. Der LLM identifiziert das richtige MCP-Tool für die Aufgabe, nämlich web_data_amazon_product.
3. Es bittet Sie um die Erlaubnis, dieses Tool über Bright Data MCP unter Verwendung der Amazon-Produkt-URL der Eingabeaufforderung auszuführen (d. h. https://www. amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/).
4. Sobald Sie zustimmen, wird die Scraping-Aufgabe auf den Bright Data-Servern gestartet.
5. Cline bittet dann um die Erlaubnis, auf das Aufgabenergebnis zuzugreifen.
6. Hinter den Kulissen führt Bright Data die Scraping-Aufgabe aus, und Cline erhält die echten Produktdaten im JSON-Format. Das ist die Ausgabe des MCP-Tools, die von Cline angezeigt wird.
7. Sie werden um Erlaubnis gebeten, die Daten in einer data.json-Datei zu speichern.
8. Nach der Freigabe wird die Datei erstellt und ausgefüllt.
9. Sie werden aufgefordert, ein index.js-Skript zu erstellen, um den JSON-Inhalt zu lesen und zu drucken.
10. Nach der Genehmigung wird die Datei erstellt.

Nach Abschluss der Aufgabe wird Ihr Projekt diese beiden Dateien enthalten:

In data.json werden die Amazon-Produktdaten im JSON-Format gespeichert, die von Bright Data’s Amazon Scraper abgerufen werden:

Eine index.js: enthält Node.js-Logik zum Laden und Drucken des Inhalts:

Führen Sie das erstellte index.js-Skript mit aus:

node index.js

Im Terminal sollten Sie die Produktdaten ausgedruckt sehen:

Die Arbeitsabläufe funktionierten perfekt, da die in der JSON-Datei enthaltenen Daten mit den Daten auf der ursprünglichen Amazon-Produktseite übereinstimmen:

Beachten Sie, dass data.json echte gescrapte Daten speichert, keine halluzinierten Inhalte aus dem LLM. Denken Sie auch daran, dass das Scraping von Amazon angesichts der strengen Anti-Bot-Systeme des Unternehmens (wie dem berüchtigten Amazon CAPTCHA) keine Kleinigkeit ist.

Das ist die Leistung von Bright Data + Cline, und das oben genannte Beispiel war nur ein einfacher Anwendungsfall. Sie können jetzt weitere Eingabeaufforderungen ausprobieren und erweiterte LLM-gesteuerte Daten-Workflows direkt in Visual Studio Code erkunden.

Et voilà! Sie haben soeben den nahtlosen Abruf von Webdaten mithilfe der MCP-Integration von Bright Data mit dem Cline AI Coding Agent erlebt.

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie Cline mit dem Bright Data Web MCP-Server integrieren, um einen KI-Codierungsagenten zu erstellen, der auf das Internet zugreifen kann. Dies wurde dank der Unterstützung von Cline für die MCP-Integration möglich.

Beachten Sie, dass dies nur ein einfaches Beispiel war. Wenn Sie fortschrittlichere Agenten erstellen möchten, sollten Sie die gesamte Palette der auf dem Bright Data Web MCP-Server verfügbaren Tools erkunden. Diese Tools können die meisten Ihrer KI-gesteuerten Datenanwendungsfälle unterstützen.

Erstellen Sie ein kostenloses Bright Data-Konto und erkunden Sie unsere KI-fähigen Webdatentools!