Wie man AI-Apps mit Webdatenzugriff in Langflow erstellt

In diesem Leitfaden erfahren Sie mehr:

• Was Langflow ist und warum er so beliebt geworden ist.
• Die Grenzen der Verwendung von Standard-LLMs in Langflow-Anwendungen und wie man sie mit externen Daten überwinden kann.
• Wie man eine mit Bright Data integrierte Langflow-KI-App für den Webdatenzugriff erstellt.

Lasst uns eintauchen!

Was ist Langflow?

Langflow ist ein Open-Source-Tool, das in Python und JavaScript entwickelt wurde, um KI-gestützte Agenten und Workflows zu erstellen und bereitzustellen. Mit über 92k Sternen auf GitHub ist es eine der beliebtesten und am weitesten verbreiteten Bibliotheken für die Entwicklung von KI-Agenten.

Langflow arbeitet als visuelle Low-Code-Entwicklungsplattform. Sie ermöglicht es Ihnen, komplexe KI-Anwendungen zu erstellen, indem Sie vorgefertigte Komponenten über eine Drag-and-Drop-Schnittstelle miteinander verbinden. Durch diesen Ansatz entfällt der Bedarf an umfangreicher Codierung. Dennoch unterstützt es die Integration von benutzerdefiniertem Code für maximale Flexibilität.

Langflow bietet eine breite Palette von KI-Funktionen, einschließlich Agenten, LLMs, Vektorspeicher und Integration mit jeder API, jedem Modell oder jeder Datenbank.

Warum AI-Apps Datenzugang brauchen

Im Vergleich zu anderen Frameworks glänzt Langflow als visuelle Low-Code-Plattform für die Entwicklung von KI-Anwendungen. Aber wie jedes andere LLM-basierte System sind auch Langflow-basierte Apps nur so intelligent wie die Daten, auf die sie Zugriff haben.

LLMs sind auf statische Datensätze trainiert und haben kein eingebautes Bewusstsein für Echtzeitereignisse oder private Geschäftsdaten. Dadurch sind sie von der aktuellen Welt abgekoppelt, es sei denn, man verbindet sie mit neuen, relevanten Datenquellen. Und das Internet ist die umfangreichste verfügbare Informationsquelle.

Um diese Einschränkungen von LLMs zu überwinden, können Sie mit Langflow eine Verbindung zu flexiblen Webdaten-Pipelines herstellen. Dieses Muster ist grundlegend für wichtige Anwendungsfälle wie:

• RAG-Workflows, bei denen die abgerufenen Daten die Ergebnisse des LLM verbessern.
• Datenpipelines, in denen Daten vor der Analyse extrahiert und bereinigt werden.
• KI-Agenten, die externes Wissen benötigen, um Aufgaben wie die Beantwortung von Anfragen, die Zusammenfassung von Dokumenten oder die Durchführung von Websuchen zu erfüllen.

Nun ist es nicht trivial, genaue öffentliche Daten aus dem Internet abzurufen. Sie brauchen eine Infrastruktur, die das kann:

1. Verbindung zu praktisch jeder Website (auch zu solchen, die durch Anti-Scraping-Technologien geschützt sind).
2. Extrahieren Sie zuverlässig die benötigten Daten.
3. Senden Sie sie in einem strukturierten, AI-fertigen Format zurück.

Genau das bietet Bright Data. Durch die Kombination von Langflow mit Bright Data-Tools erhält Ihre KI-App leistungsstarke Funktionen, darunter:

• Web-Scraping in Echtzeit unter Umgehung von Anti-Bot-Schutzmaßnahmen.
• Strukturierte Datenextraktion aus erstklassigen Plattformen wie Amazon, LinkedIn, Zillow und anderen.
• Zugriff auf Suchmaschinenergebnisse für Live-SERP-Daten auf der Grundlage von Suchanfragen.
• Visuelle Datenerfassung durch automatische ganzseitige Screenshots.

Sie können eine direkte Verbindung zu Bright Data über eine benutzerdefinierte Langflow-Komponente herstellen. Das bedeutet, dass Sie keine komplexe Backend-Logik erstellen oder pflegen müssen. Binden Sie die Komponente einfach in Ihren Ablauf ein, und schon können Sie loslegen!

Erstellung einer KI-App in Langflow mit Webdatenzugriff dank Bright Data

In diesem schrittweisen Tutorial werden Sie Langflow verwenden, um einen KI-Agenten zu erstellen, der in der Lage ist, Live-Webdaten abzurufen, indem er mit Bright Data integriert wird.

Denken Sie daran, dass das hier vorgestellte KI-Agenten-Setup nur ein einfaches Beispiel dafür ist, was Sie dank dieser Integration erstellen können. Es gibt unzählige andere KI-Apps, die Sie mit der Bright Data × Langflow-Integration erstellen können. Lassen Sie sich von unserer Liste der möglichen Anwendungsfälle inspirieren.

Folgen Sie der folgenden Anleitung, um einen Bright Data-gestützten KI-Agenten in Langflow zu erstellen!

Voraussetzungen

Um diesem Tutorial folgen zu können, müssen Sie die folgenden Voraussetzungen erfüllen:

• Mindestens eine Dual-Core-CPU und 2 GB RAM (empfohlen: Multi-Core-CPU und mindestens 4 GB RAM).
• Python Version 3.10 bis 3.12 unter Windows, oder 3.10 bis 3.13 unter macOS/Linux, lokal installiert.
• uv-Paket lokal installiert.
• Ein Bright Data-API-Schlüssel.
• Einen API-Schlüssel, um eine Verbindung zu einem der unterstützten LLMs herzustellen (in diesem Fall wird Gemini verwendet, das über die API kostenlos genutzt werden kann).

Machen Sie sich keine Sorgen, wenn Sie keinen Bright Data-API-Schlüssel haben, denn Sie werden während des Tutorials durch den Einrichtungsprozess geführt.

Um uv zu installieren, geben Sie den folgenden Befehl ein:

pip install uv

Wenn Sie ein Windows-Benutzer sind, benötigen Sie außerdem Microsoft Visual C++ 14.0 oder höher. Laden Sie es herunter und folgen Sie der Anleitung, um die Installation abzuschließen.

Schritt 1: Langflow einrichten

Erstellen Sie zunächst einen Ordner für Ihr Langflow-Projekt und navigieren Sie dorthin:

mkdir langflow-agent
cd langflow-agent

Der Ordner langflow-agent dient als Ihr Langflow-Projektverzeichnis.

Erstellen Sie im Projektordner mit uv eine virtuelle Python-Umgebung:

uv venv venv

Unter macOS/Linux aktivieren Sie es dann mit:

source venv/bin/activate

Unter Windows führen Sie entsprechend aus:

venv\Scripts\activate

Bei aktivierter virtueller Umgebung installieren Sie Langflow in Ihrer Projektumgebung:

uv pip install langflow

Dies wird eine Weile dauern, haben Sie also etwas Geduld.

Überprüfen Sie nach Abschluss der Installation, ob das Setup funktioniert, indem Sie die Anwendung mit diesem Befehl ausführen:

uv run langflow run

Warten Sie auf die Initialisierung des lokalen Servers durch LangFlow. Sobald er fertig ist, sollte er auf dieser Seite in Ihrem Browser verfügbar sein:

http://localhost:7860

Öffnen Sie es, und wenn alles wie erwartet gelaufen ist und Sie Langflow zum ersten Mal verwenden, sehen Sie diese Schnittstelle:

Wenn Sie auf Fehler stoßen, lesen Sie bitte die offizielle Installationsanleitung.

Erstaunlich! Ihr LangFlow-Setup ist jetzt einsatzbereit und läuft.

Schritt 2: Konfigurieren Sie Bright Data

Um Ihrer KI-Anwendung die Möglichkeit zu geben, Daten aus dem Web abzurufen, müssen Sie sie mit der KI-Infrastruktur von Bright Data verbinden.

Bright Data bietet viele Lösungen für die Datenerfassung an, aber in diesem Tutorial werden wir uns auf diese konzentrieren:

• Web Unlocker: Eine fortschrittliche Scraping-API, die den Bot-Schutz umgeht und jede Webseite im HTML- oder Markdown-Format zurückgibt.

Hinweis: Die Integration mit anderen Bright Data-Tools wie Web Scraper-APIs ist ebenfalls möglich, aber dieser Leitfaden konzentriert sich auf den universellen Web Unlocker.

Um Web Unlocker in Ihrer Langflow-Anwendung zu verwenden, müssen Sie zunächst:

1. Richten Sie eine Web Unlocker-Zone in Ihrem Bright Data-Konto ein.
2. Generieren Sie Ihr Bright Data-API-Token zur Authentifizierung von Anforderungen.

Folgen Sie den nachstehenden Anweisungen, um beides zu tun! Als Referenz sollten Sie auch die offizielle Dokumentation lesen.

Wenn Sie noch kein Bright Data-Konto haben, melden Sie sich zunächst kostenlos an. Wenn Sie ein Konto haben, melden Sie sich an und öffnen Sie Ihr Dashboard. Klicken Sie auf die Schaltfläche “Proxies & Scraping”:

Sie werden auf die Seite “Proxies & Scraping-Infrastruktur” weitergeleitet:

Wenn Sie bereits eine Web Unlocker Zone haben, wird sie auf dieser Seite aufgeführt. In diesem Beispiel ist die Zone bereits vorhanden und heißt "unblocker" (merken Sie sich diesen Namen, da Sie ihn später noch benötigen).

Wenn Sie die gewünschte Zone noch nicht haben, scrollen Sie zur Karte “Web Unlocker API” und klicken Sie auf “Zone erstellen”:

Geben Sie Ihrer Zone einen Namen (z. B. “unlocker”), aktivieren Sie die erweiterten Funktionen für eine optimale Leistung, und klicken Sie auf die Schaltfläche “Hinzufügen”:

Nach der Erstellung gelangen Sie auf die Detailseite der Zone. Vergewissern Sie sich, dass der Kippschalter auf “Aktiv” steht, um zu bestätigen, dass das Produkt einsatzbereit ist:

Folgen Sie nun der offiziellen Bright Data-Dokumentation, um Ihren API-Schlüssel zu generieren. Sobald Sie ihn haben, bewahren Sie ihn an einem sicheren Ort auf, da Sie ihn bald benötigen werden.

Perfekt! Sie sind bereit, Bright Data mithilfe einer benutzerdefinierten Komponente in Langflow zu integrieren.

Schritt Nr. 3: Initialisieren eines neuen leeren Flusses

Bevor Sie fortfahren, müssen Sie einen neuen Langflow-Flow erstellen. Gehen Sie zurück zum lokalen Langflow-Server und klicken Sie auf die Schaltfläche “Ersten Fluss erstellen”:

Das folgende Modal wird angezeigt. Drücken Sie die Schaltfläche “Blank Flow” in der unteren rechten Ecke:

Geben Sie Ihrem Ablauf einen Namen, z. B. “Langflow x Bright Data AI App”. Nach der Erstellung sehen Sie eine leere Leinwand wie diese:

Im obigen Canvas können Sie Komponenten hinzufügen und verbinden, um Ihre KI-Anwendung zu definieren. Gut gemacht!

Schritt 4: Definieren einer benutzerdefinierten Bright Data-Komponente

Der einfachste Weg, Langflow mit Bright Data zu integrieren, ist die Erstellung einer benutzerdefinierten Komponente. Dadurch kann Ihr KI-Agent Webdaten mithilfe der Web Unlocker API von Bright Data sammeln.

In Langflow sind benutzerdefinierte Komponenten Python-Klassen, die durch:

• Eingaben: Die Daten oder Parameter, die Ihre Komponente benötigt.
• Ausgänge: Die Daten, die Ihre Komponente an nachgelagerte Knotenpunkte zurückgibt.
• Logik: Die interne Verarbeitung zur Umwandlung von Eingaben in Ausgaben.

Insbesondere sollte Ihre benutzerdefinierte Komponente Langflow x Bright Data:

1. Akzeptieren Sie Ihren Bright Data-API-Schlüssel und den Namen der Web Unlocker-Zone als Eingaben (zur Authentifizierung).
2. Empfangen Sie die Ziel-URL der Webseite, die Sie scrapen möchten.
3. Führen Sie eine Anfrage an die Web Unlocker API durch, die so konfiguriert ist, dass die Seite im Markdown-Format zurückgegeben wird ( ideal für die KI-Nutzung).
4. Gibt den abgerufenen Inhalt als Ausgabe zurück.

Sie können all dies mit der folgenden benutzerdefinierten Python-Komponente umsetzen:

from langflow.custom import Component
from langflow.io import SecretStrInput, StrInput, Output
from langflow.schema import Data
import httpx

# A Langflow custom component must extend Component
class BrightDataComponent(Component):
    # The component name shown in the Langflow UI
    display_name = "Bright Data"
    # The description in the component details
    description = "Retrieve data from the web in Markdown format using Bright Data"
    icon = "sparkles"  # UI icon identifier
    name = "BrightData"  # Internal name used by Langflow

    # --- INPUTS ---
    # Define the inputs required by the component
    inputs = [
        SecretStrInput(
            name="api_key",
            display_name="Bright Data API Key",
            required=True,
            info="Your Bright Data API key from the dashboard"
        ),
        StrInput(
            name="zone",
            display_name="Web Unlocker Zone Name",
            info="The name of the Web Unlocker zone to connect to (e.g., 'web_unlocker')",
            required=True
        ),
        StrInput(
            name="url",
            display_name="Target URL",
            info="The URL to transform into Markdown data",
            tool_mode=True
        ),
    ]

    # --- OUTPUT ---
    # Define the output returned by the component
    outputs = [
        Output(
            name="web_data",
            display_name="Web Data Result",
            method="get_web_data"  # The name of the method used to generate the output
        )
    ]

    # --- LOGIC ---
    # This method retrieves web data from Bright Data and returns it
    def get_web_data(self) -> Data:
        try:
            # Bright Data Web Unlocker API endpoint
            url = "https://api.brightdata.com/request"

            # Request headers including API key for authentication
            headers = {
                "Authorization": f"Bearer {self.api_key}",
                "Content-Type": "application/json"
            }

            # Payload specifying the zone, URL, and output format
            payload = {
                "zone": self.zone,
                "url": self.url,
                "format": "raw",
                "data_format": "markdown"
            }

            # Send the POST request with a 180-second timeout
            with httpx.Client(timeout=180.0) as client:
                response = client.post(url, json=payload, headers=headers)

                # Raise an error if HTTP status code is not 2xx
                response.raise_for_status()

                # Extract contains the Markdown-formatted web data
                markdown_data = response.text
            return Data(data={"data": markdown_data})

        # Handle timeout errors
        except httpx.TimeoutException:
            error_msg = "The Web Unlocker request timed out"
            return Data(data={"error": error_msg, "data": None})

        # Handle other HTTP errors (e.g., 4xx, 5xx)
        except httpx.HTTPStatusError as e:
            error_msg = f"Request failed with status {e.response.status_code}: {e.response.text}"
            return Data(data={"error": error_msg, "data": None})

Die BrightDataComponent akzeptiert die folgenden Eingaben:

• Ihr Bright Data-API-Schlüssel.
• Der Name Ihrer Web Unlocker Zone.
• Die URL der Seite, die Sie abrufen möchten.

Dann verwendet sie den HTTPX-Python-Client, um eine Anfrage an die Web Unlocker API zu senden, die so konfiguriert ist, dass sie die Antwort im Markdown-Format zurückgibt. Die Markdown-Darstellung der von der API zurückgegebenen Seite wird die Ausgabe der Komponente.

Hinweis: Wir haben HTTPX verwendet, weil es die Standard-HTTP-Client-Bibliothek ist, die in Langflow verfügbar ist. Um mehr darüber zu erfahren, lesen Sie unsere Anleitung zur Verwendung von HTTPX für Web Scraping.

Fantastisch! Sehen Sie sich an, wie Sie diese Komponente in Ihren Ablauf einfügen und den KI-Agenten ihre Ausgabe konsumieren lassen.

Schritt Nr. 5: Hinzufügen der benutzerdefinierten Bright Data-Komponente

Um die zuvor definierte Komponente zu registrieren, klicken Sie auf die Schaltfläche “Neue benutzerdefinierte Komponente” in der unteren linken Ecke. Eine neue generische benutzerdefinierte Komponente “Hello, World” erscheint auf Ihrer Leinwand. Bewegen Sie den Mauszeiger über die Komponente und klicken Sie auf den Abschnitt “Code”, um die Logik der Komponente anzupassen:

Fügen Sie im daraufhin angezeigten Code-Editor den vollständigen Quellcode der BrightDataComponent-Klasse ein:

Drücken Sie die Schaltfläche “Prüfen & Speichern”. Sie sollten nun die allgemeine “Benutzerdefinierte Komponente” durch Ihre Bright Data-Komponente ersetzt sehen:

Wie Sie sehen können, wurde die benutzerdefinierte Platzhalterkomponente mit Ihrer benutzerdefinierten Komponente für die Integration mit Bright Data aktualisiert.

Hinweis: Sie müssen die Bright Data-Komponente nicht in jedem Ablauf manuell neu erstellen.
Speichern Sie Ihre benutzerdefinierte Komponente einfach in einer Python-Datei und laden Sie sie automatisch mit der in der Langflow-Dokumentation beschriebenen Methode.

Wunderbar! Ihr KI-Flow kann jetzt mit Bright Data integriert werden, um Webdaten abzurufen.

Schritt Nr. 6: Verbinden Sie den KI-Agenten mit Bright Data

Sie können die Bright Data-Komponente direkt in Ihrer Langflow-App verwenden oder sie in ein Tool verwandeln, mit dem KI-Agenten interagieren können. Indem Sie die Komponente in ein Tool umwandeln, geben Sie dem Agenten die Möglichkeit, Live-Inhalte von jeder beliebigen Webseite im KI-freundlichen Markdown-Format abzurufen. Mit anderen Worten: Sie ermöglichen Ihrer KI den Zugriff auf und das Abrufen von Echtzeitinformationen von jeder beliebigen Website.

Die Helle Komponente soll ein Werkzeug sein:

1. Bewegen Sie den Mauszeiger über Ihre Bright Data-Komponente.
2. Schalten Sie den Schalter “Werkzeugmodus” um, um ihn zu aktivieren.
3. Füllen Sie die erforderlichen Felder aus:
   • Ihr Bright Data-API-Schlüssel.
   • Der Name Ihrer Web Unlocker Zone (z.B. "unlocker").

Das sollten Sie jetzt sehen:

Jetzt, wo Ihre Bright Data-Komponente als Tool bereit ist, verbinden Sie sie mit einem KI-Agenten:

1. In der linken Seitenleiste finden Sie die Komponente “Agenten > Agent”.
2. Ziehen Sie es auf die Leinwand.
3. Konfigurieren Sie den Agenten so, dass er Ihr bevorzugtes LLM verwendet (in diesem Beispiel verwenden wir Gemini, indem wir ein kostenloses Modell wie gemini-2.5-flash auswählen und Ihren Gemini-API-Schlüssel einfügen).
4. Verbinden Sie den Ausgang der Bright Data-Komponente “Tools” mit dem Eingang der Agentenkomponente:

Jetzt geht’s los! Der Kern Ihrer KI-Anwendung ist nun vollständig verdrahtet. Sie haben gerade einen Gemini-basierten Agenten erstellt, der mithilfe der Scraping-Infrastruktur von Bright Data dynamisch Live-Webinhalte abrufen kann.

Schritt #7: Vervollständigen Sie den Fluss

Damit Ihr KI-Fluss voll funktionsfähig ist, benötigt er sowohl eine Eingabe- als auch eine Ausgabekomponente. Verbinden Sie also eine Input-Chat-Komponente mit Ihrem KI-Agenten und eine Output-Chat-Komponente, um seine Antwort zu erhalten.

Danach sollte Ihr Ablauf wie folgt aussehen:

Mit der obigen Einrichtung erhalten Sie eine Chat-ähnliche Schnittstelle zur Interaktion mit Ihrem KI-Agenten.

Das war’s! Ihre Langflow × Bright Data AI-App ist nun vollständig und einsatzbereit.

Schritt #8: Testen Sie die KI-App

Um Ihre KI-App zu starten, klicken Sie auf die Schaltfläche “Playground” in der oberen rechten Ecke der Langflow-Oberfläche:

Das ist es, was Sie sehen sollten:

Sie erhalten ein ChatGPT-ähnliches Erlebnis, das jedoch von Ihrem eigenen KI-Agenten gesteuert wird. Um zu überprüfen, ob alles funktioniert, geben Sie eine Eingabeaufforderung ein wie:

Give me a detailed summary with the key information about this product:
https://www.amazon.com/AmazonBasics-Pound-Neoprene-Dumbbells-Weights/dp/B01LR5S6HK/

Im Folgenden erfahren Sie, was hinter den Kulissen geschieht:

1. Die Eingabeaufforderung geht von der Chat-Eingabe zur KI-Agentenkomponente.
2. Der Agent verwendet den konfigurierten LLM (in diesem Fall Gemini) und löst das erforderliche Tool aus, das von der Bright Data-Komponente stammt.
3. Der Agent empfängt den gescrapten Webinhalt, verarbeitet ihn und übergibt die endgültige Antwort an die Chat-Ausgabe (die der Antwort entspricht, die Sie im Chat sehen werden).

Die obige Aufforderung ist ein großartiger Test, da Gemini allein Websites wie Amazon aufgrund ihres Anti-Bot-Schutzes nicht scrapen kann. Der Web Unlocker von Bright Data löst dieses Problem, indem er das Amazon CAPTCHA umgeht, Daten von der Seite extrahiert und sie im KI-kompatiblen Markdown-Format bereitstellt.

Führen Sie die Eingabeaufforderung aus, und Sie sollten das Ergebnis sehen:

Um zu bestätigen, dass der Agent Bright Data verwendet, erweitern Sie das Dropdown-Menü “Zugriff auf web_get_data”:

Dies zeigt die vollständigen Details des Funktionsaufrufs get_web_data, der Kernmethode in Ihrer Bright Data-Komponente. Dort können Sie überprüfen, ob die Daten erfolgreich von der Amazon-Produktseite abgerufen wurden.

Hier ist ein Teil des Screenshots der vom KI-Agenten erzeugten Ausgabe:

Alle Informationen in dieser von der KI generierten Zusammenfassung sind echt und keine Halluzinationen, wie Sie durch einen Besuch der Original-Amazon-Seite überprüfen können:

Et voilà! Sie haben gerade eine KI-App mit Webdatenzugriff unter Verwendung von Langflow und Bright Data erstellt und getestet.

Nächste Schritte

Jetzt, wo Ihre Integration funktioniert, können Sie die nächsten Schritte unternehmen:

• Stellen Sie Ihren Agenten mit einer der offiziell unterstützten Methoden bereit, entweder in der Cloud oder auf Ihrem eigenen Server.
• Erweitern Sie die Integration, indem Sie andere Bright Data-Produkte, wie z. B. die Web Scraper-APIs oder SERP-APIs, verbinden. Ändern Sie dazu einfach die Logik in Ihrer BrightDataComponent, um verschiedene Bright Data-APIs aufzurufen , wie in der offiziellen Dokumentation beschrieben.
• Kombinieren Sie Ihre Komponenten neu, um erweiterte Anwendungsfälle zu erstellen, einschließlich RAG-Pipelines, Daten-Workflows, KI-Automatisierungsabläufe und mehr.
• Verbinden Sie Ihren KI-Agenten mit dem Bright Data MCP-Server, um ihn in mehr als 50 Tools zu integrieren, die sofort einsatzbereit sind.

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie mit Langflow einen KI-Agenten mit Webdatenzugriff erstellen können. Dies wurde durch eine benutzerdefinierte Integration mit Bright Data-Tools ermöglicht. Diese Einrichtung gibt Ihrem LLM die Möglichkeit, Daten von praktisch jeder Website in Echtzeit abzurufen und zu verarbeiten.

Denken Sie daran, dass das, was wir hier vorgestellt haben, nur ein einfaches Beispiel war. Wenn Sie fortschrittlichere Agenten erstellen möchten, benötigen Sie Tools zum Abrufen, Validieren und Umwandeln von Live-Webdaten in Informationen, die für die KI-Nutzung optimiert sind. Genau diese Tools finden Sie in der KI-Infrastruktur von Bright Data.

Erstellen Sie ein kostenloses Bright Data-Konto und experimentieren Sie mit unseren KI-fähigen Tools für die Datenabfrage!