Bright Data Web MCP zu Roo Code in Visual Studio Code hinzufügen

In diesem Tutorial werden Sie lernen:

1. Was Roo Code ist und warum er derzeit einer der am häufigsten verwendeten KI-Codierungsagenten für IDEs ist.
2. Wie die Ausstattung mit Webinteraktions- und Datenextraktionsfunktionen ihn noch nützlicher machen kann.
3. Wie man Roo Code mit dem Bright Data Web MCP Server in Visual Studio Code verbindet, um einen erweiterten KI-Codierungsagenten zu erstellen.

Lassen Sie uns eintauchen!

Was ist Roo Code?

Roo Code ist ein autonomer KI-Agent, der sich direkt in Ihrem Editor befindet. Im Einzelnen kann er:

• Als KI-gesteuerter, paarweiser Programmierer fungieren, mit dem Sie in natürlicher Sprache kommunizieren können.
• Dateien direkt in Ihrem Arbeitsbereich lesen und schreiben.
• Terminal-Befehle ausführen.
• Automatisieren von Browser-Aktionen über eine integrierte Browser-Integration.
• Integration mit einer breiten Palette von OpenAI-kompatiblen oder eigenen APIs/Modellen.
• Anpassung der “Persönlichkeit” und Fähigkeiten durch verschiedene Modi.
• Verbinden Sie es mit Drittanbietern über die MCP-Integration.

Roo Code wurde als Cline-Fork geboren und ist als Open-Source-Erweiterung für Visual Studio Code verfügbar. Sie ermöglicht es Ihnen, Codierungsaufgaben zu automatisieren und Ihren Entwicklungsworkflow mithilfe von KI direkt in VS Code zu verbessern.

Im Gegensatz zu Cline benötigt Roo Code kein Konto, um zu funktionieren (obwohl eine Roo Cloud-Plattform mit zusätzlichen Funktionen für Unternehmen verfügbar ist). Weitere Einzelheiten finden Sie in unserem Leitfaden zur Integration von Cline mit dem Web MCP-Server von Bright Data.

Derzeit hat das Roo Code-Projekt über 18.000 Sterne auf GitHub und 750.000 Installationen auf dem Visual Studio Code-Marktplatz. Das bedeutet, dass es einer der am häufigsten verwendeten KI-Codierungsagenten für IDEs ist.

Warum die Integration des Web MCP in die Roo Code VS Code Erweiterung

Das LLM, das Sie in Roo Code konfigurieren, hat die gemeinsame Einschränkung aller Sprachmodelle: veraltetes Wissen. Ein LLM kann nur Antworten generieren, die auf den statischen Daten basieren , auf denen es trainiert wurde, was nichts anderes als eine Momentaufnahme der Vergangenheit ist.

In Anbetracht der Tatsache, wie schnell sich die technische Welt weiterentwickelt, kann diese Einschränkung nicht ignoriert werden. LLMs können leicht veraltete Kodierungsansätze und veraltete Methoden vorschlagen oder neu eingeführte Funktionen völlig übersehen.

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

Genau das finden Sie im Web MCP Server von Bright Data. Dieser quelloffene MCP-Server(jetzt mit kostenlosem Tier) bietet über 60 KI-fähige Tools für Echtzeit-Webinteraktion und Datenerfassung.

Die beiden am häufigsten verwendeten Tools des MCP-Servers sind:

Darüber hinaus gibt es über 55 spezialisierte Tools, die mit Webseiten interagieren (z. B. scraping_browser_click) und strukturierte Daten von einer Vielzahl von Websites sammeln, darunter Amazon, Yahoo Finance, TikTok, LinkedIn und andere. Das Tool web_data_amazon_product beispielsweise ruft detaillierte, strukturierte Produktinformationen von Amazon ab, indem es eine gültige Produkt-URL als Eingabe akzeptiert.

Mögliche Anwendungsfälle für Bright Data Web MCP + Roo Code sind:

• Abrufen von Live-SERP-Daten und Einfügen von kontextbezogenen Links in Ihre Markdown-Berichte direkt in VS Code.
• Anfordern von Tutorials oder Dokumentation basierend auf dem Code, den Sie gerade schreiben.
• Scraping frischer öffentlicher Daten von Websites und deren lokale Speicherung für Mocking, Analyse oder weitere Verarbeitung.

Sehen wir uns nun den Web MCP in Aktion innerhalb von Roo Code an!

Wie man Roo Code mit dem Web MCP von Bright Data in Visual Studio Code verbindet

In diesem geführten Abschnitt erfahren Sie, wie Sie Roo Code zu Visual Studio Code hinzufügen und mit dem Web MCP von Bright Data integrieren. Das Endergebnis wird ein KI-Codierungsagent sein, der auf das Web zugreifen und mit ihm interagieren kann. Diese Fähigkeiten machen den Agenten einfallsreicher und genauer.

Konkret werden Sie einen erweiterten Roo Code KI-Agenten mit Datenabruf-Fähigkeiten erstellen und ihn verwenden, um:

1. Scrapen einer Amazon-Produktseite in Echtzeit.
2. Speichern Sie die Daten lokal.
3. Ein Python-Skript zum Laden und Verarbeiten der gesammelten Daten zu erstellen.

Folgen Sie den folgenden Schritten, um loszulegen!

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

• Einen Bright Data-API-Schlüssel
• Einen API-Schlüssel von einem der unterstützten LLM-Anbieter (in dieser Anleitung wird ein OpenRouter-API-Schlüssel verwendet)

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

Um die generierte Ausgabe auszuführen, müssen Sie außerdem Python lokal installieren.

Schritt 1: Installieren von Roo Code in Visual Studio Code

Öffnen Sie Visual Studio Code. Klicken Sie dann auf das Symbol “Erweiterungen” in der linken Seitenleiste, suchen Sie nach “Roo Code” und wählen Sie die Erweiterung Roo Code aus. Klicken Sie auf der Registerkarte der Roo Code-Erweiterung auf die Schaltfläche “Installieren”:

Wenn Sie zum ersten Mal eine Erweiterung des Roo Code-Anbieters installieren, werden Sie aufgefordert, dem Herausgeber zu vertrauen. Klicken Sie auf “Herausgeber vertrauen & installieren”, um fortzufahren.

Sobald die Installation abgeschlossen ist, sehen Sie ein Roo Code-Symbol in der linken Seitenleiste. Klicken Sie darauf, um die Erweiterung zu öffnen:

Hinweis: Wenn das Roo Code Symbol nicht angezeigt wird, versuchen Sie Visual Studio Code neu zu laden. Für alle anderen Probleme lesen Sie bitte die offizielle Installationsanleitung.

Geschafft! Roo Code ist nun in VS Code verfügbar.

Schritt #2: Richten Sie Ihre OpenRouter-Verbindung ein

Nun, da Roo Code installiert ist, besteht der nächste Schritt darin, ihn mit einem LLM-Anbieter zu verbinden. Roo Code unterstützt eine breite Palette von Anbietern, darunter Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok) und viele mehr.

In dieser Anleitung werden wir Roo Code mit einem OpenRouter verbinden und das qwen/qwen3-coder:free Modell verwenden. Diese Einrichtung ist völlig kostenlos, d.h. es werden keine Gelder oder Kredite benötigt.

Hinweis: Wenn Sie einen anderen Anbieter bevorzugen oder bereits andere API-Schlüssel haben, folgen Sie der spezifischen Integrationsanleitung in der Roo Code Dokumentation.

Erstellen Sie ein OpenRouter-Konto und rufen Sie Ihren API-Schlüssel ab. Wenn Sie mit diesem Prozess nicht vertraut sind, schauen Sie sich an, was wir in unserem Tutorial über Qwen-Agent gemacht haben.

Scrollen Sie im Roo Code Erweiterungspanel nach unten, bis Sie die Schaltfläche “OpenRouter” sehen. Klicken Sie diese an:

Es öffnet sich ein Browserfenster, in dem Sie aufgefordert werden, sich bei Ihrem OpenRouter-Konto anzumelden und Roo Code zu autorisieren. Klicken Sie auf “Autorisieren”, um fortzufahren:

Zurück in VS Code, werden Sie aufgefordert, die Verbindung zu bestätigen. Klicken Sie auf “Öffnen”, um den Autorisierungsprozess abzuschließen:

Dies sollten Sie nun in Visual Studio Code sehen:

Wie Sie sehen können, hat die Autorisierung gut funktioniert und Roo Code ist einsatzbereit!

Standardmäßig verwendet Roo Code das Claude Opus 4 Modell (welches ein kostenpflichtiges OpenRouter-Konto voraussetzt, um verwendet zu werden). Um zu einem freien Modell (oder einem anderen Modell) zu wechseln, klicken Sie auf das Zahnradsymbol im oberen Menü:

Scrollen Sie auf der Registerkarte “Einstellungen” nach unten zum Dropdown-Menü “Modell” und wählen Sie das Modell aus, das Sie konfigurieren möchten:

Wählen Sie zum Beispiel qwen/qwen3-coder:free, ein kostenloses Modell, das für Coding-Szenarien optimiert ist. Klicken Sie anschließend auf die Schaltfläche “Fertig”, um die Änderungen zu bestätigen.

Fantastisch! Roo Code ist nun vollständig in VS Code eingerichtet. Es ist nun an der Zeit, ihn zu einem Coding Agent mit Webdatenabruf- und Interaktionsfunktionen über die MCP-Integration zu machen.

Schritt #3: Installieren Sie den Web-MCP von Bright Data

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

Befolgen Sie die offiziellen Anweisungen, um Ihren Bright Data-API-Schlüssel zu generieren. Bewahren Sie ihn an einem sicheren Ort auf. Wir gehen davon aus, dass Sie einen API-Schlüssel mit Admin-Berechtigungen verwenden, da dies die Integration erleichtert.

Öffnen Sie das Terminal, und installieren Sie das Web MCP global über das Paket @brightdata/mcp:

npm install -g @brightdata/mcp

Überprüfen Sie mit diesem Bash-Befehl, ob der lokale MCP-Server funktioniert:

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

Oder, äquivalent, auf Windows PowerShell:

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

Ersetzen Sie den Platzhalter <YOUR_BRIGHT_DATA_API> durch das tatsächliche Bright Data-API-Token. Mit den beiden obigen Befehlen wird die erforderliche API_TOKEN-Umgebungsvariable festgelegt, und anschließend wird der MCP-Server über das npm-Paket @brightdata/mcp gestartet.

Im Erfolgsfall sollten Sie Protokolle wie in der folgenden Abbildung sehen:

Beim ersten Start richtet das Paket automatisch zwei Standardzonen in Ihrem Bright Data-Konto ein:

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

Diese beiden Zonen sind für den Zugriff auf alle von Web MCP bereitgestellten Tools erforderlich.

Um zu bestätigen, dass die oben genannten Zonen erstellt wurden, melden Sie sich bei Ihrem Bright Data Dashboard an. Navigieren Sie zur Seite“Proxies & Scraping-Infrastruktur“. Dort sollten die beiden Zonen aufgelistet sein:

Hinweis: Wenn Ihr API-Token nicht über Admin-Berechtigungen verfügt, werden diese Zonen möglicherweise nicht automatisch eingerichtet. In diesem Fall können Sie sie manuell im Dashboard erstellen und ihre Namen über Umgebungsvariablen angeben, wie auf der GitHub-Seite des Pakets dokumentiert.

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

Um erweiterte Funktionen wie Browser-Automatisierung und strukturierte Datenextraktion aus einer langen Liste von Domains 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, in PowerShell:

$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. Andererseits ist der Pro-Modus nicht in der kostenlosen Version enthalten und verursacht zusätzliche Kosten.

Perfekt! Sie haben sichergestellt, dass der Web MCP-Server auf Ihrem Rechner funktioniert. Beenden Sie den Serverprozess, denn Sie werden Roo Code jetzt so konfigurieren, dass er automatisch für Sie startet und sich mit ihm verbindet.

Schritt #4: Verbinden Sie Roo Code mit dem Web MCP

Es ist an der Zeit, die Roo Code-Erweiterung mit dem Bright Data Web MCP zu verbinden. Wählen Sie im Roo Code-Bedienfeld im oberen Menü die Option “MCP Servers”:

Sie gelangen in den Konfigurationsbereich “MCP Servers”. Hier können Sie MCP-Server konfigurieren, entweder globale MCP-Server (für alle Projekte verfügbar) oder lokale MCP-Server (nur im aktuellen Projekt verfügbar).

Das Konfigurationsverfahren ist nahezu identisch, klicken Sie also auf die Schaltfläche “Edit Global MCP”. Dadurch wird eine mcp_settings.json-Datei geöffnet, die einen leeren mcpServers-Eintrag enthält:

In dieser Konfigurationsdatei müssen Sie die Details für die Verbindung mit dem Bright Data Web MCP angeben. Stellen Sie sicher, dass sie den folgenden Code enthält:

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

In dieser Konfiguration:

• Das Objekt mcpServers teilt Roo Code mit, wie externe MCP-Server zu starten sind.
• Der Eintrag brightData definiert den Befehl(npx) und die Umgebungsvariablen, die zum Starten des Web-MCPs benötigt werden. PRO_MODE ist optional, aber wenn Sie es aktivieren, können Sie alle verfügbaren Werkzeuge nutzen.

Dies sollten Sie sehen:

Ersetzen Sie den Platzhalter <YOUR_BRIGHT_DATA_API_KEY> durch den zuvor abgerufenen Bright Data API-Schlüssel.

Diese Konfiguration weist Roo Code an, denselben npx-Befehl mit den Umgebungsvariablen aus dem vorherigen Schritt auszuführen. Mit anderen Worten: Roo Code kann jetzt den Bright Data Web MCP-Server starten und eine Verbindung zu ihm herstellen. (Die Aktivierung von PRO_MODE ist optional, wird aber empfohlen.)

Sobald Sie den brightData-Eintrag in mcpServers hinzufügen, stellt Roo Code sofort eine Verbindung zum Web MCP-Server her und zeigt die verfügbaren Tools an:

Da wir die Umgebungsvariable PRO_MODE auf true gesetzt haben, bietet Roo Code nun Zugang zu mehr als 60 Tools. Ohne PRO_MODE wären nur 2 Tools verfügbar: scrape_as_markdown und search_engine.

Klicken Sie auf die Schaltfläche “Fertig”, und Sie haben die Web MCP erfolgreich in Roo Code integriert. Großartig!

Schritt #5: Testen Sie den Roo Code Agent

Standardmäßig läuft Roo Code im Architect-Modus, der als “erfahrener technischer Leiter und Planer fungiert , der hilft, Systeme zu entwerfen und Implementierungspläne zu erstellen”.

Für die meisten Szenarien werden Sie ihn stattdessen als KI-Paarprogrammierer verwenden wollen. Wechseln Sie dazu in den Modus Roo Code to Code, wie unten gezeigt:

Testen Sie nun die Fähigkeiten Ihres KI-Codieragenten zum Abrufen von Webdaten mit einer Aufforderung wie der folgenden:

Scrapen Sie Daten von "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", speichern Sie sie in einer lokalen "product.json"-Datei und erstellen Sie ein Python-Skript "script.py", um den Inhalt zu laden und zu drucken.

Dies simuliert einen realen Anwendungsfall, bei dem Daten für Analyse, Visualisierung, Mocking oder andere Arbeitsabläufe abgerufen werden.

Führen Sie die Eingabeaufforderung in Roo Code aus, und Sie sollten ein ähnliches Ergebnis wie dieses sehen:

Das obige GIF wurde beschleunigt, aber dies ist der Ablauf der einzelnen Schritte:

1. Roo Code zerlegt die Aufgabe in einen 3-Schritte-Plan.
2. Er stellt fest, dass die Amazon-Produktdaten am besten mit dem Tool web_data_amazon_product aus dem Web MCP abgerufen werden können.
3. Sie werden aufgefordert, der Ausführung des Scraping-Tools zuzustimmen.
4. Das Tool wird ausgeführt, und die Amazon-Produktdaten werden im JSON-Format abgerufen.
5. Sie werden gefragt, ob die Daten in einer lokalen product.json-Datei gespeichert werden sollen.
6. Nach der Genehmigung wird die JSON-Datei erstellt und mit Daten gefüllt.
7. Roo Code bittet um die Erlaubnis, eine script.py-Datei zu erstellen, die den Inhalt von product.json liest und ausgibt.
8. Die Datei wird mit dem generierten Python-Code erstellt.
9. Sie werden aufgefordert, das Skript mit python script.py auszuführen.
10. Das Skript schlägt aufgrund von Kodierungsproblemen fehl.
11. Roo Code schlägt vor, das Skript mit UTF-8-Behandlung zu aktualisieren.
12. Nach der Genehmigung wird das aktualisierte Skript korrekt ausgeführt und gibt das erwartete Ergebnis aus.

Beachten Sie, dass Roo Code proaktiv die Ausführung des Skripts vorschlug, obwohl Ihre ursprüngliche Eingabeaufforderung dies nicht ausdrücklich verlangte. Das war nützlich, da es dem Agenten half, Fehler zu erkennen und seine eigene Ausgabe zu verfeinern.

Nach Abschluss des Ablaufs sollte Ihr Arbeitsverzeichnis diese beiden Dateien enthalten:

├── product.json
└── script.py

Öffnen Sie product.json in VS Code:

Diese Datei enthält echte Amazon-Produktdaten – keine halluzinierten oder gefälschten Ausgaben. Die Daten wurden von Bright Data mit dem web_data_amazon_product-Tool (das intern den Amazon Scraper nutzt) von der unten angegebenen Zielproduktseite erfasst:

Hinweis: Das Scraping von Amazon ist aufgrund des strengen Anti-Bot-Schutzes (z. B. das berüchtigte Amazon CAPTCHA) bekanntermaßen schwierig. Ein Standard-LLM allein kann diese Aufgabe nicht zuverlässig bewältigen. Aus diesem Grund macht die Kombination von Roo Code mit dem Web MCP von Bright Data Ihren Coding Agent einzigartig leistungsstark.

Diese Datei enthält echte Amazon-Daten und keine halluzinierten oder erfundenen Inhalte, die von dem gewählten LLM generiert wurden. Die Daten wurden von Bright Data mit dem web_data_amazon_product-Tool (das intern als Amazon Scraper bezeichnet wird) erfasst.

Die generierte Datei script.py enthält die Logik zum Lesen und Drucken der JSON-Produktdaten:

Führen Sie das obige Python-Skript mit aus:

python script.py

Das Ergebnis sind die aus product.json geladenen Produktdaten:

Das ist die Stärke von Bright Data + Roo Code. Denken Sie daran, dass das obige Beispiel nur ein einfacher Anwendungsfall war, experimentieren Sie also mit weiteren Eingabeaufforderungen. Erforschen Sie fortgeschrittene LLM-gesteuerte Daten-Workflows, direkt in Visual Studio Code.

Et voilà! Sie haben die MCP-Integration von Bright Data in Roo Code abgeschlossen.

Fazit

In diesem Blog-Beitrag haben Sie gesehen, wie Sie Roo Code mit dem Bright Data Web MCP Server(der jetzt eine kostenlose Stufe anbietet!) in Visual Studio Code verbinden können. Das Ergebnis ist ein funktionsreicher KI-Agent, der in der Lage ist, Daten aus dem Web abzurufen und intelligent mit ihnen zu interagieren.

Wir haben diesen erweiterten Agenten verwendet, um ein einfaches Python-Skript mit Zugriff auf Amazon-Produktdaten zu erstellen. Für komplexere Projekte oder zur Inspiration sollten Sie daran denken, dass die von der Web MCP bereitgestellten Tools eine Vielzahl von agentenbasierten Workflows und Szenarien unterstützen können.

Um leistungsstarke KI-Agenten zu erstellen, erkunden Sie die gesamte Palette der in der KI-Infrastruktur von Bright Data verfügbaren Services.

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