Erweiterung der KI-Fähigkeiten von Cursor über Bright Data Web MCP

In diesem Lernprogramm erfahren Sie:

1. Was Cursor ist und warum er so populär geworden ist.
2. Die wichtigsten Gründe für die Integration eines MCP-Servers wie dem von Bright Data in Cursor.
3. Wie Sie Cursor mit dem Bright Data Web MCP verbinden.
4. Wie Sie die gleichen Ergebnisse in Visual Studio Code erzielen.

Tauchen wir ein!

Was ist Cursor?

Cursor ist ein KI-gestützter Code-Editor, der als Fork von Visual Studio Code entwickelt wurde. Seine Kernfunktionalität besteht wie bei jedem Texteditor darin, eine Schnittstelle zum Schreiben von Code zu bieten. Das Besondere an Cursor ist jedoch seine integrierte KI-Integration.

Anstelle einer einfachen Autovervollständigung verwendet Cursor LLms, um Ihre gesamte Codebasis und Ihren Kontext zu verstehen. Dies ermöglicht die Bereitstellung intelligenter Funktionen wie:

• Konversationelle Eingabeaufforderungen: Beschreiben Sie in einfachem Englisch, was Sie wollen, und Cursor wird den Code für Sie schreiben oder bearbeiten.
• Mehrzeilige Autovervollständigung: Es werden ganze Codeblöcke vorgeschlagen und vervollständigt, nicht nur einzelne Zeilen.
• KI-gesteuertes Refactoring: Es kann Ihren Code auf intelligente Weise optimieren, bereinigen und korrigieren, basierend auf dem projektweiten Kontext.
• Unterstützung bei der Fehlersuche: Bitten Sie die KI, Fehler in Ihrem Code zu finden und zu erklären.

Cursor verwandelt einen Standard-Code-Editor in einen proaktiven, hochintelligenten Paarprogrammierer. Er unterstützt mehrere LLMs von verschiedenen Anbietern und bietet integrierte Unterstützung für Tools über MCP.

Warum Cursor mit dem Web MCP von Bright Data ergänzen?

Hinter den Kulissen stützt sich Cursor auf bekannte LLM-Modelle. Obwohl seine Integration tiefer und ausgefeilter ist als die der meisten Tools, unterliegt er dennoch denselben Einschränkungen wie jedes LLM: KI-Wissen ist statisch!

Schließlich spiegeln KI-Trainingsdaten eine Momentaufnahme in der Zeit wider. Diese sind schnell veraltet, insbesondere in sich schnell entwickelnden Bereichen wie der Softwareentwicklung. Stellen Sie sich nun vor, dass der KI-Agent von Cursor in der Lage ist:

• die neuesten Tutorials und Dokumentationen für RAG-Workflows abzurufen,
• Live-Anleitungen zu konsultieren, während er Code schreibt, und
• Echtzeit-Websites so einfach zu durchsuchen, wie er in Ihren lokalen Dateien navigieren kann.

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

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

Selbst in der kostenlosen Version kann Ihr Cursor-Agent bereits auf zwei leistungsstarke Tools zugreifen:

Tool	Beschreibung
such_engine	Rufen Sie Suchergebnisse von Google, Bing oder Yandex in JSON oder Markdown ab.
scrape_as_markdown	Scrape eine beliebige Webseite in ein sauberes Markdown-Format und umgehe dabei Bot-Erkennung und CAPTCHA.

Darüber hinaus umfasst Web MCP Tools für die Automatisierung von Cloud-Browsern und den Abruf strukturierter Daten von Plattformen wie Amazon, YouTube, LinkedIn, TikTok, Google Maps und vielen anderen.

Hier sind nur einige Beispiele dafür, was durch die Erweiterung von Cursor mit Web MCP von Bright Data möglich wird:

1. Abrufen der neuesten API-Referenzen oder Framework-Tutorials und anschließendes automatisches Generieren von Arbeitscode oder Projektgerüsten.
2. Sofortige Abfrage aktueller Suchmaschinenergebnisse und deren Einbettung in Ihre Dokumentation oder Codekommentare.
3. Sammeln Sie Live-Webdaten, um realistische Test-Mocks, Analyse-Dashboards oder automatisierte Content-Pipelines zu erstellen.

In der Dokumentation zu Bright Data MCP können Sie sich über die gesamte Bandbreite der Funktionen informieren.

Integration von Web MCP in Cursor für ein verbessertes KI-Codierungserlebnis

In diesem Abschnitt erfahren Sie Schritt für Schritt, wie Sie eine lokale Web MCP-Serverinstanz von Bright Data mit Cursor verbinden. Dieses Setup bietet ein optimiertes KI-Erlebnis mit über 60 Tools, die direkt in Ihrer IDE verfügbar sind.

Im Einzelnen werden wir die Web MCP-Tools verwenden, um ein Express-Backend mit einer gespiegelten API zu erstellen, die reale Daten von Amazon zurückgibt. Dies ist nur ein Beispiel für die vielen Anwendungsfälle, die von dieser Integration unterstützt werden.

Folgen Sie den Anweisungen unten!

Voraussetzungen

Um diesem Tutorial folgen zu können, sollten Sie folgendes haben

• Ein Cursor-Konto (ein kostenloser Plan ist ausreichend).
• Ein Bright Data-Konto mit einem aktiven API-Schlüssel.

Kümmern Sie sich jetzt nicht um die Einrichtung von Bright Data. Sie werden im Laufe des Artikels durch den Prozess geführt!

Ein grundlegendes Verständnis der Funktionsweise von MCP, der Funktionsweise von Cursor und der von Web MCP bereitgestellten Tools ist ebenfalls hilfreich.

Schritt 1: Erste Schritte mit Cursor

Installieren Sie die Cursor-Version für Ihr Betriebssystem, öffnen Sie sie und melden Sie sich mit Ihrem Konto an.
Wenn Sie die Anwendung zum ersten Mal starten, führen Sie den Einrichtungsassistenten aus.

Sie sollten dann etwas Ähnliches wie das hier sehen:

Großartig! Öffnen Sie nun Ihren Projektordner und machen Sie sich bereit, den eingebauten KI-Codierungsagenten, erweitert um Web MCP, zu verwenden.

Schritt #2: Konfigurieren Sie Ihr LLM

Zum jetzigen Zeitpunkt verwendet Cursor standardmäßig das Modell Claude 4.5 (im Modus “Auto”). Wenn Sie damit einverstanden sind, können Sie zum nächsten Abschnitt übergehen. Denken Sie daran, dass Claude auch mit Web MCP integriert werden kann.

Wenn Sie das Standardmodell ändern möchten, suchen Sie nach “Cursor-Einstellungen” und wählen Sie die entsprechende Option:

Gehen Sie in der sich öffnenden Registerkarte auf die Registerkarte “Modelle”:

Hier können Sie konfigurieren, welcher KI-Agent von LLM Cursor verwendet werden soll. Beachten Sie, dass kostenlose Nutzer nur zwischen GPT-4.1 und “Auto” als Premium-Modell wählen können.

Um das Modell auf GTP 4.1 zu ändern, suchen Sie nach “gpt”, finden Sie das Modell “gpt-4.1” und aktivieren Sie es:

Wenn Sie ein Pro- oder Business-Abonnement haben, können Sie alle anderen unterstützten LLMs aktivieren. Außerdem können Sie sogar Ihren eigenen API-Schlüssel für den gewählten Anbieter angeben.

Öffnen Sie dann das Feld “Neuer Chat” auf der rechten Seite. Klicken Sie auf das Dropdown-Menü “Auto”, deaktivieren Sie es und wählen Sie die Option “gpt-4.1”:

Gut gemacht! Cursor arbeitet jetzt über Ihr konfiguriertes LLM.

Schritt 3: Testen Sie Bright Data’s Web MCP auf Ihrem Rechner

Bevor Sie Cursor mit dem Bright Data Web MCP verbinden, sollten Sie überprüfen, ob Sie den Server tatsächlich lokal ausführen können. Dies ist erforderlich, da der MCP-Server über STDIO konfiguriert wird.

Beginnen Sie damit, sich bei Bright Data zu registrieren. Wenn Sie bereits ein Konto haben, melden Sie sich einfach an. Für eine schnelle Einrichtung folgen Sie den Anweisungen im Abschnitt “MCP” des Dashboards:

Weitere Hinweise finden Sie in den folgenden Anweisungen.

Generieren Sie zunächst Ihren Bright Data-API-Schlüssel, und bewahren Sie ihn an einem sicheren Ort auf. Sie werden ihn im nächsten Schritt benötigen. Wir gehen davon aus, dass Ihr API-Schlüssel über Admin-Berechtigungen verfügt, da dies die Web MCP-Integration vereinfacht.

Installieren Sie nun die Web MCP mit diesem npm-Befehl global auf Ihrem Rechner:

npm install -g @brightdata/mcp

Überprüfen Sie, dass der MCP-Server funktioniert, indem Sie ihn starten:

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

Oder, äquivalent, in PowerShell:

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

Ersetzen Sie den Platzhalter <YOUR_BRIGHT_DATA_API> durch Ihr Bright Data-API-Token. Mit diesen Befehlen wird die erforderliche Umgebungsvariable API_TOKEN festgelegt und der Web MCP lokal über das Paket @brightdata/mcp gestartet.

Bei Erfolg sollten Sie eine Ausgabe wie die folgende sehen:

Beim ersten Start erstellt die Web MCP zwei Standardzonen in Ihrem Bright Data-Konto:

• mcp_unlocker: Eine Zone für Web Unlocker.
• mcp_browser: Eine Zone für Browser API.
  Web MCP stützt sich auf diese beiden Bright Data-Dienste, um seine über 60 Tools zu betreiben.

Wenn Sie überprüfen möchten, ob die Zonen eingerichtet wurden, rufen Sie die Seite “Proxies & Scraping-Infrastruktur” in Ihrem Bright Data-Konto auf. Sie sollten die beiden Zonen in der Tabelle sehen:

Hinweis: Wenn Ihr API-Token nicht über Admin-Berechtigungen verfügt, werden die beiden Zonen nicht automatisch erstellt. Definieren Sie sie in diesem Fall manuell und legen Sie sie über Umgebungsvariablen fest , wie auf GitHub erläutert.

Denken Sie daran, dass Web MCP in der kostenlosen Version nur die Tools search_engine und scrape_as_markdown (und deren Batch-Versionen) freigibt. Um alle anderen Tools freizuschalten, aktivieren Sie den Pro-Modus **durch Setzen der Umgebungsvariablen PRO_MODE="true":

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

Der Pro-Modus schaltet alle 60+ Werkzeuge frei, ist aber nicht in der kostenlosen Version enthalten, was bedeutet, dass zusätzliche Kosten anfallen.

Großartig! Sie haben gerade sichergestellt, dass der Web-MCP-Server lokal funktioniert. Beenden Sie den MCP-Prozess, denn Sie werden Cursor so konfigurieren, dass er für Sie gestartet wird und eine Verbindung zu ihm herstellt.

Schritt Nr. 4: Konfigurieren Sie Web MCP in Cursor

Beginnen Sie mit der Suche nach “>mcp” und wählen Sie “View: MCP-Einstellungen öffnen”:

Im Abschnitt “Tools & MCP” klicken Sie auf die Schaltfläche “Add Custom MCP”:

Daraufhin wird die folgende Konfigurationsdatei mcp.json geöffnet:

Wie Sie sehen können, ist sie standardmäßig leer. Füllen Sie sie für die Web-MCP-Integration von Bright Data wie folgt aus:

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

Speichern Sie anschließend die Datei mit Strg + S (oder Cmd + S unter macOS):

Die obige Konfiguration repliziert den npx-Befehl, den wir zuvor getestet haben, und verwendet Umgebungsvariablen zur Übergabe von Anmeldeinformationen und Einstellungen:

• API_TOKEN ist erforderlich. Setzen Sie diesen Wert auf den API-Schlüssel von Bright Data, den Sie zuvor generiert haben.
• PRO_MODE ist optional. Entfernen Sie diese Variable, wenn Sie den Pro-Modus nicht aktivieren möchten.

Mit anderen Worten: Cursor verwendet die Konfiguration in mcp.json, um den zuvor gesehenen npx-Befehl auszuführen. Es wird ein Web-MCP-Prozess lokal ausgeführt, eine Verbindung zu ihm hergestellt und Zugriff auf die offengelegten Tools erhalten.

Schließen Sie die Registerkarte mcp.json, da die Integration von Cursor + Bright Data Web MCP abgeschlossen ist!

Hinweis: Wenn Sie es vorziehen, STDIO nicht zu verwenden und SSE oder streamable HTTP zu nutzen, denken Sie daran, dass Bright Data Web MCP auch eine Remote-Server-Option bietet.

Schritt Nr. 5: Überprüfen der Toolverfügbarkeit über die MCP-Integration

Es ist an der Zeit zu überprüfen, ob Cursor erfolgreich eine Verbindung zum Web MCP-Server hergestellt hat und auf alle Tools zugreifen kann.

Gehen Sie dazu in der Registerkarte “Cursor-Einstellungen” zurück zum Abschnitt “Tools & MCP”. Sie sollten nun die konfigurierte Option “Bright Data” sehen, die alle verfügbaren Tools auflistet:

Erweitern Sie das Dropdown-Menü “N Tools aktiviert” (wobei N die Anzahl der aktivierten Tools ist), um alle verfügbaren Tools zu sehen:

Beachten Sie, dass Cursor automatisch eine Verbindung zum Server herstellt und dessen über 60 Werkzeuge abruft.
Wenn der Pro-Modus deaktiviert ist, sehen Sie nur die 4/5 verfügbaren freien Tools. Hier können Sie auch die Werkzeuge aktivieren oder deaktivieren, wie Sie es wünschen. Standardmäßig sind sie alle aktiviert.

Wenn Sie dies bestätigt haben, schließen Sie die Registerkarte “Cursor-Einstellungen”. Bereiten Sie sich darauf vor, die Vorteile dieser Werkzeuge für eine erweiterte KI-gestützte Coding-Erfahrung zu nutzen!

Schritt #6: Führen Sie eine Aufgabe mit dem erweiterten KI-Codierungsagenten aus

Um die Fähigkeiten Ihres Cursor-Coding-Agenten zu testen, benötigen Sie eine Eingabeaufforderung, die die neu konfigurierten Funktionen zum Abrufen von Webdaten nutzt.

Nehmen wir zum Beispiel an, Sie bauen ein Backend in Express.js für Ihre E-Commerce-Anwendung. Sie möchten eine API nachbilden, die reale Amazon-Produktdaten zurückgibt.

Erreichen Sie dies mit einer Eingabeaufforderung wie dieser:

Scrapen Sie die Daten der folgenden Amazon-Produkte:
1. https://www.amazon.com/Clean-Skin-Club-Disposable-Sensitive/dp/B07PBXXNCY/
2. https://www.amazon.com/Neutrogena-Cleansing-Towelettes-Waterproof-Alcohol-Free/dp/B00U2VQZDS/
3. https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG/

Speichern Sie dann die gescrapten Daten in einer lokalen JSON-Datei. Erstellen Sie anschließend ein einfaches Express.js-Projekt mit einem Endpunkt, der eine ASIN (die ein Amazon-Produkt darstellt) akzeptiert und die entsprechenden Daten aus der JSON-Datei zurückgibt.

Angenommen, Sie arbeiten im Pro-Modus. Führen Sie die obige Eingabeaufforderung in Cursor aus.

Als Nächstes geschieht Folgendes, Schritt für Schritt:

1. Der in Cursor konfigurierte LLM identifiziert web_data_amazon_product als das Tool zum Abrufen von Amazon-Produktdaten.
2. Für jedes der drei Amazon-Produkte in der Eingabeaufforderung werden Sie um die Erlaubnis gebeten, web_data_amazon_product zum Abrufen der Daten auszuführen.
3. Sie erteilen die Erlaubnis für jedes Tool, wodurch asynchrone Datenerfassungsaufgaben ausgelöst werden (die unter der Haube den Bright Data Amazon Scraper aufrufen).
4. Die abgerufenen Daten für jedes Produkt werden im JSON-Format angezeigt.
5. GPT-4.1 verarbeitet die abgerufenen Daten und füllt eine products.json-Datei mit ihnen auf.
6. Cursor erstellt die npm-Projektstruktur, definiert package.json und die index.js-Datei mit der Express-Serverlogik.
7. Sie werden um die Erlaubnis gebeten, die Projektabhängigkeiten über npm install zu installieren. Dies führt zu einer package.json-Datei im Ordner node_modules/.
8. Sie werden um die Erlaubnis gebeten, den Server mit npm start zu starten.

Hinweis: Auch wenn es in der Eingabeaufforderung nicht explizit angegeben wurde, hat GPT-4.1 beschlossen, auch nach der Installation der Projektabhängigkeiten und der Einrichtung des Servers zu fragen. Das war eine nette Ergänzung!

In diesem Beispiel wird die endgültige Ausgabe eine Projektstruktur wie folgt erzeugen

ihr-projekt/
├── node_modules/
├─── index.js
├─── package.json
├─── package-lock.json
└─── products.json

Perfekt! Schauen wir uns das Ergebnis an, um zu sehen, ob es das beabsichtigte Ziel erreicht hat.

Schritt #7: Untersuchen Sie das Ausgabeprojekt

Da der KI-Codierungsagent die Dateien generiert hat, erscheinen sie in der linken Spalte in Cursor.

Haftungsausschluss: Ihre Dateien können von den unten gezeigten abweichen, da verschiedene KI-Läufe unterschiedliche Ergebnisse liefern können.

Beginnen Sie mit der Untersuchung der Datei products.json:

Wie Sie sehen können, enthält diese eine vereinfachte Version der gescrapten Daten, die vom web_data_amazon_product-Tool zurückgegeben wurden:

Wichtig: web_data_amazon_product gibt tatsächlich alle Produktdaten von der Amazon-Seite zurück, nicht nur einige wenige Felder. Dennoch hat die KI beschlossen, nur die relevantesten Felder aufzunehmen. Mit einer Optimierung der Eingabeaufforderung können Sie die KI anweisen, alle Felder einzubeziehen, falls gewünscht.

Als nächstes öffnen Sie index.js, um die Express.js-Serverlogik zu sehen:

Der gespottete Endpunkt für den Abruf von Produktdaten verwendet den Pfad /product/:asin.

Überprüfen Sie auch die anderen Dateien, aber sie sollten alle in Ordnung sein. Drücken Sie also auf die Schaltfläche “Keep All”, um die von der KI generierte Ausgabe zu bestätigen, und machen Sie sich bereit, Ihr Projekt zu testen!

Schritt #8: Testen Sie das produzierte Projekt

Ihre Express.js-Anwendung sollte bereits laufen, da GPT-4.1 um die Erlaubnis gebeten hat, npm start auszuführen. Wenn dies nicht der Fall ist, können Sie es manuell starten mit:

npm start

Ihr Express.js-Backend sollte nun unter http://localhost laufen .

Führen Sie als nächstes den folgenden cURL-Befehl aus, um den Endpunkt GET /product/:asin zu testen:

curl "http://localhost/ product/B07PBXXNCY

Dabei ist B07PBXXNCY die ASIN eines der in der Eingabeaufforderung genannten Amazon-Produkte.

Sie sollten etwas wie dieses sehen:

Wunderbar! Diese Daten wurden korrekt in die generierte Datei products.json übertragen. Das Ergebnis entspricht (in vereinfachter Form) den Daten von der ursprünglichen Amazon-Seite.

Wenn Sie schon einmal versucht haben, Produktdaten von Amazon abzurufen, wissen Sie, wie schwierig das aufgrund des berüchtigten Amazon CAPTCHA und anderer Anti-Bot-Maßnahmen sein kann. Sicherlich kann Vanilla GPT-4.1 allein keine Daten von Amazon abrufen.

Hier zeigt sich die Stärke der Kombination von Web MCP und Cursor. Das war jetzt nur ein sehr einfaches Beispiel. Mit den über 60 verfügbaren Tools und den richtigen Prompts können Sie jedoch auch fortgeschrittenere Szenarien direkt in Ihrer IDE bearbeiten!

Et voilà! Dank der Cursor + Bright Data Web MCP-Integration wurde erfolgreich ein Express-Backend mit einem API-Endpunkt erstellt, der nachgebildet ist.

[Extra] Alternative Ansätze in Visual Studio Code

Wenn Sie eine Cursor-ähnliche Erfahrung in Visual Studio Code erreichen möchten, verwenden Sie Erweiterungen wie Cline oder Roo Code.

Insbesondere für die Integration von Web MCP in VS Code lesen Sie diese Anleitungen:

• Hinzufügen von Bright Data’s Web MCP zu Roo Code in Visual Studio Code
• Web-Scraping in Cline mit dem MCP-Server von Bright Data

Schlussfolgerung

In diesem Blogbeitrag haben Sie erfahren, wie Sie die Vorteile der MCP-Integration in Cursor voll ausschöpfen können. Der in die IDE integrierte KI-Codierungsagent ist bereits hilfreich, aber er wird noch viel leistungsfähiger und einfallsreicher, wenn er mit dem Web-MCP von Bright Data verbunden wird.

Durch diese Integration ist Cursor in der Lage, Live-Web-Suchen durchzuführen, strukturierte Daten zu extrahieren, dynamische Daten-Feeds zu nutzen und sogar Browser-Interaktionen zu automatisieren. Und das alles direkt in Ihrer Programmierumgebung.

Wenn Sie noch fortschrittlichere KI-gestützte Workflows erstellen möchten, sollten Sie die gesamte Palette der im KI-Ökosystem von Bright Data verfügbaren Services und Datenlösungen kennenlernen.

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