CopilotKit
Open-Source-Frontend-SDK für Apps mit Agenten: Chat-UI, generative UI, geteilter Zustand und menschliche Freigabe
CopilotKit ist ein Open-Source-SDK, um einen Agenten in dein eigenes Produkt zu setzen: eine anpassbare Chat-Oberfläche, UI-Komponenten, die der Agent zur Laufzeit rendern kann, eine Zustandsschicht, aus der Agent und App gleichermaßen lesen und schreiben, und ein Schritt, an dem der Lauf für eine menschliche Entscheidung pausiert. Es steht unter MIT-Lizenz, deckt React, Angular, Vue und React Native ab und stammt vom Team hinter dem AG-UI-Protokoll. Es löst die Interface-Hälfte davon, ein KI-Feature auszuliefern — nicht die schwerere Hälfte, nämlich jemanden dazu zu bringen, es zu benutzen.
Was CopilotKit ist
CopilotKit beschreibt sich als SDK zum Bau vollständiger agentischer Anwendungen, generativer UI und Chat-Anwendungen. Es begann als React-Bibliothek und ist heute plattformübergreifend: Die README führt React und Next.js als allgemein verfügbar, Angular, Vue und React Native als unterstützt sowie Slack und Microsoft Teams als Beta, mit Discord und Google Chat als angekündigt — hinter jeder Oberfläche dasselbe Agenten-Backend. Der Einstieg ist ein einziger Befehl, npx copilotkit@latest create, plus ein Modellschlüssel von OpenAI, Anthropic, Gemini oder einem anderen Anbieter. Der Quellcode des Repositorys steht unter MIT.
Dasselbe Team pflegt AG-UI, das darunterliegende Interaktionsprotokoll zwischen Agent und Nutzer, das laut README quer durch das Agenten-Ökosystem übernommen wurde, unter anderem von LangChain, CrewAI, Mastra und PydanticAI. Für Gründerinnen und Gründer zählt das ganz praktisch: Das Übertragungsformat zwischen deinem Agenten und deiner Oberfläche ist eine Entscheidung, die du sonst selbst triffst und später bereust, und sich auf ein Protokoll zu stützen, das andere Frameworks bereits sprechen, hält die Agentenseite austauschbar. Das Projekt liefert außerdem installierbare Skills mit, die einem Coding-Assistenten beibringen, die Bibliothek einzurichten und zu debuggen — ein fairer Hinweis darauf, wer die Integration schreiben soll.
Die Muster, die es dir gibt, und wofür jedes gedacht ist
Die Feature-Liste ist eigentlich eine Liste von Interface-Mustern für Agentenprodukte, und sie sind nicht austauschbar. Zu wissen, welches Problem jedes einzelne löst, verhindert, dass du ein Chatfenster auf eine Aufgabe schraubst, die mit einem Knopf erledigt gewesen wäre.
| Muster | Was es löst | Wo es überstrapaziert wird |
|---|---|---|
| Chat-UI | Ein Ort für offene Anfragen, für die die Oberfläche keinen Knopf hat, mit gestreamten Antworten und sichtbaren Tool-Aufrufen. | Als gesamtes Produkt. Einen Satz zu tippen, um etwas auszulösen, das einen Klick entfernt war, ist mehr Arbeit, nicht weniger. |
| Generative UI | Den Agenten echte Komponenten rendern lassen — eine Tabelle, ein Formular, ein Diagramm — statt sie in Prosa zu beschreiben. | Für jede Antwort etwas Eigenes zu rendern, sodass das Produkt jedes Mal anders aussieht und nie erlernbar wird. |
| Geteilter Zustand | Agent und App auf dieselben Daten schauen lassen, damit eine Agentenaktion den Bildschirm aktualisiert und eine Nutzeränderung beim Agenten ankommt. | Mehr Zustand zu synchronisieren, als der Agent braucht, wodurch jede kleine UI-Änderung zur Verhaltensänderung des Agenten wird. |
| Menschliche Freigabe | Vor etwas Folgenreichem innehalten und um Bestätigung, eine Korrektur oder die fehlende Eingabe bitten. | Alles bestätigen zu lassen, bis Leute die Abfragen ungelesen wegklicken — die Fehlerart jeder Freigabestufe. |
Die letzte Zeile ist die, die man richtig hinbekommen sollte, und sie ist eine Produkt- und keine technische Entscheidung. Welche Aktionen eine Pause verdienen, ist eine Frage von Folgen und Umkehrbarkeit, nicht des Frameworks; die Begriffe stehen in Human-in-the-Loop und Freigabe-Gate.
Eine Erfahrung aus erster Hand zum Ausliefern einer Agentenoberfläche
Bei AgentCeres — dem KI-Wachstumsteam auf agentceres.com — ist die gesamte Produktoberfläche ein Gespräch mit Agenten, wir haben dieses Interface also gebaut und wieder gebaut. Das Nützlichste, was wir gelernt haben, steht in keiner SDK-Feature-Liste: Während eines langen Agentenlaufs liest sich Stille als kaputt. Wer eine halbe Minute wartet und nichts sich bewegen sieht, schließt nicht auf sorgfältige Arbeit, sondern darauf, dass das Produkt hängt, und lädt neu — womit genau die Arbeit abgebrochen wird, auf die er wartete. Am Ende zeigen wir eine einzige Live-Zeile dessen, was gerade passiert, und eine aufklappbare Spur pro Zug dessen, was getan wurde. Beschwerden über Langsamkeit wurden dadurch weitgehend zu Fragen danach, was das Produkt gerade tat.
Die zweite Lektion handelt von Zurückhaltung, und das ist der Teil, den keine Bibliothek für dich entscheiden kann. Unsere Agenten reichen einander Arbeit weiter, und die Nachrichten zwischen ihnen sind für uns aufschlussreich und für Kunden nutzlos. Also zeigen wir, dass ein Spezialist hinzugezogen wurde, mit Anzeigenamen, und nie, was gesagt wurde. Zu entscheiden, was ein Mensch sehen darf, war am Ende gar kein Rendering-Problem: Als wir diese Spur bauten, lagen die Daten die ganze Zeit im Transkript, und die eigentliche Arbeit bestand darin, auszuwählen, was vor einen Menschen gehört.
Genau dort verläuft für eine solche Bibliothek die Grenze zwischen Bauen und Wachsen. CopilotKit verkürzt tatsächlich den Weg von einem Agenten, der funktioniert, zu einem Agenten, den ein Kunde benutzen kann. Es tut nichts für die zwei Dinge, die darüber entscheiden, ob ein KI-Feature zählt: ob es überhaupt jemand findet und ob das Erste, was er versucht, gelingt. Beides ist Onboarding-Arbeit — usertour ist die geführte Variante davon, und langfuse zeigt dir, was der Agent tatsächlich getan hat, sobald echte Nutzer drin sind.
FAQ
- Ist CopilotKit kostenlos?
- Der Quellcode des Repositorys steht unter MIT-Lizenz, du kannst es also selbst hosten und ohne Softwarekosten ein kommerzielles Produkt darauf bauen. Das Projekt verkauft zusätzlich eine gehostete Cloud und eine Intelligence-Plattform, und einige Fähigkeiten — die selbstlernenden Funktionen, die die README als Early Access kennzeichnet, sowie die Slack- und Teams-Oberflächen — sitzen dahinter. Die Modellnutzung ist eine separate Rechnung des Anbieters, auf den du deinen Agenten richtest.
- Brauche ich ein Agenten-Framework dafür?
- Nein. Es spricht über AG-UI mit dem, was dahinter liegt, der Agent kann also ein Framework wie LangChain oder CrewAI sein oder dein eigener Code, der ein Modell direkt aufruft. Diese Trennung ist das praktische Argument dafür: Interface-Schicht und Agenten-Schicht verändern sich in völlig unterschiedlichem Tempo, und du willst die UI nicht jedes Mal neu schreiben, wenn du änderst, wie der Agent denkt.
- Warum nicht die Chat-Oberfläche selbst bauen?
- Ein einfaches Chatfenster mit Streaming ist ein Wochenende. Viel länger dauern die Teile, denen man erst später begegnet: Tool-Aufrufe, die Komponenten rendern, App-Zustand und Agenten-Zustand in Übereinstimmung halten, ein Gespräch über Sitzungen hinweg fortsetzen und mitten im Lauf für eine menschliche Entscheidung pausieren. Wenn dein Produkt ein Agent ist, hören die schnell auf, optional zu sein — das ist das Argument für eine Bibliothek. Brauchst du ein Support-Widget, ist das weit mehr als nötig.
- Lässt ein KI-Feature mein Produkt wachsen?
- Nicht von allein, und das gehört klar gesagt. Ein Agent in deinem Produkt ist ein Adoptions- und Bindungsfeature: Er kann einen schweren Ablauf für Menschen leicht machen, die dich bereits nutzen. Nachfrage erzeugt er nicht, und ihn auszuliefern heißt nicht, dass er gefunden wird — in der Praxis öffnen ihn die meisten Nutzer nie, wenn die erste Sitzung ihn ihnen nicht in den Weg legt. Plane die Einführung so sorgfältig wie die Umsetzung.
- Welche Frameworks werden unterstützt?
- Die README führt React und Next.js als allgemein verfügbar, Angular, Vue und React Native als unterstützt sowie Slack, Microsoft Teams, Discord und Google Chat als Beta oder in Vorbereitung — alle gegen ein einziges Agenten-Backend. Wenn du auf einem Stack unterwegs bist, den es nicht abdeckt, ist AG-UI das Protokoll, gegen das du implementieren würdest, und ohnehin das Haltbarere, auf das man sich stützt.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.