Frontend für LangChain Deep Agents mit CopilotKit erstellen

In der heutigen digitalen Welt, in der KI-gestützte Anwendungen immer mehr an Bedeutung gewinnen, ist die Entwicklung von Frontend-Lösungen für komplexe Agentensysteme von entscheidender Bedeutung. CopilotKit hat ein umfassendes Tutorial veröffentlicht, das zeigt, wie man eine vollständige Deep Agent-Anwendung erstellt, die Lebensläufe verarbeitet, Fähigkeiten extrahiert, Sub-Agenten mit Websuche integriert und eine Streaming-Benutzeroberfläche bietet.

Einführung in Deep Agents

Die LangChain hat kürzlich die Deep Agents eingeführt: eine neue Methode zur Erstellung strukturierter, multi-agenten Systeme, die planen, delegieren und über mehrere Schritte hinweg logisch denken können. Diese Agenten bieten integrierte Planungsfunktionen, ein Dateisystem für den Kontext und die Möglichkeit, Sub-Agenten zu erzeugen. Die Verbindung eines solchen Agenten mit einem echten Frontend ist jedoch oft eine Herausforderung.

Was sind Deep Agents?

Die meisten Agenten, die heute verwendet werden, sind im Wesentlichen “LLM in einer Schleife + Werkzeuge”. Diese Methode ist zwar funktional, neigt jedoch dazu, oberflächlich zu sein: Es fehlt an einem expliziten Plan, die langfristige Ausführung ist schwach und der Zustand wird unübersichtlich, je länger die Ausführung dauert. Beliebte Agenten wie Claude Code, DeepResearch und Manus umgehen diese Probleme, indem sie einem gemeinsamen Muster folgen: Sie planen zuerst, externalisieren den Arbeitskontext (häufig über Dateien oder eine Shell) und delegieren isolierte Arbeitsabschnitte an Sub-Agenten.

Architektur und Schlüsselkomponenten

In diesem Tutorial werden wir einen Deep Agent erstellen, der als Job-Suchassistent fungiert und mit einer Live-Next.js-Benutzeroberfläche verbunden ist. Die Architektur umfasst:

• Planungstools: Eingebaute Planungs- und To-Do-Funktionen, die es dem Agenten ermöglichen, den Arbeitsablauf in Schritte zu unterteilen.
• Sub-Agenten: Ermöglichen es dem Hauptagenten, fokussierte Aufgaben in isolierte Ausführungsschleifen zu delegieren.
• Werkzeuge: Hierbei handelt es sich um die Funktionen, die der Agent tatsächlich nutzt, um Aufgaben zu erledigen.

Frontend: Verbindung des Agenten mit der Benutzeroberfläche

Um das Frontend zu erstellen, verwenden wir Next.js. Die Verzeichnisstruktur sieht folgendermaßen aus:

src/ ← Next.js Frontend
├── app/
│   ├── page.tsx
│   ├── layout.tsx ← CopilotKit Provider
│   └── api/
│       ├── upload-resume/route.ts ← Upload-Endpunkt
│       └── copilotkit/route.ts ← CopilotKit AG-UI-Laufzeit
├── components/
│   ├── ChatPanel.tsx ← Chat + Werkzeugerfassung
│   ├── ResumeUpload.tsx ← PDF-Upload-UI
│   ├── JobsResults.tsx ← Jobstabelle
│   └── LivePreviewPanel.tsx
└── lib/
    └── types.ts

Wir installieren die erforderlichen CopilotKit-Pakete und richten den CopilotKit-Provider in der layout.tsx ein, um die UI mit dem Agenten zu verbinden.

Backend: Aufbau des Agentenservices

Der Backend-Service wird mit FastAPI erstellt und hostet unseren Deep Agent. Die Hauptaufgaben des Backends umfassen:

• Bereitstellung eines CopilotKit-kompatiblen Agentenendpunkts für das Streaming von Agentenzuständen und Werkzeugaufrufen.
• Bereitstellung eines Endpunkts für das Hochladen von Lebensläufen.
• Aufbau eines Deep Agents, der plant, delegiert und Jobs im Internet sucht.

Datenfluss zwischen Frontend und Backend

Nachdem wir sowohl das Frontend als auch den Agentenservice erstellt haben, sieht der Datenfluss folgendermaßen aus:

[Benutzer lädt Lebenslauf hoch & sendet Jobanfrage]
↓
Next.js UI (ResumeUpload + CopilotChat)
↓
useCopilotReadable synchronisiert Lebenslauf + Präferenzen
↓
POST /api/copilotkit (AG-UI-Protokoll)
↓
FastAPI + Deep Agents (/copilotkit-Endpunkt)
↓
Lebenslaufkontext + Fähigkeiten werden in den Agenten injiziert
↓
Deep Agents Orchestrierung
├─ internet_search (Tavily)
├─ Jobfilterung & Normalisierung
└─ update_jobs_list (Werkzeugaufruf)
↓
AG-UI Streaming (SSE)
↓
CopilotKit-Laufzeit empfängt das Werkzeugergebnis
↓
Frontend erfasst die Werkzeugausgabe
↓
Jobs werden in der Tabelle gerendert + Chat bleibt sauber

Das ist es! 🎉 Sie haben jetzt einen von Deep Agents unterstützten Jobanwendungsassistenten mit CopilotKit als Frontend-Schicht erstellt.

Quellenliste:

• Quelle: Building Deep Agent Frontends
• Deep Agents auf GitHub
• CopilotKit Dokumentation