CopilotKit: Das Problem mit KI-Chatbots in SaaS-Apps
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Die meisten KI-Funktionen und Apps haben dasselbe Problem: Sie sehen gut aus, sind aber im Grunde nur eine Chat-Box
00:00:06am Bildschirmrand. Man fragt nach etwas und bekommt Markdown, vielleicht eine Tabelle,
00:00:11vielleicht sogar ein paar Absätze, die erklären, was man noch tun muss. Aber was, wenn der Agent nicht
00:00:17nur redet? Das ist CopilotKit: Es kann echte Komponenten rendern, den Live-Status deiner App teilen
00:00:23und nach einer Freigabe fragen, bevor es etwas ändert. Kann eine KI-Funktion dadurch also
00:00:29mehr wie ein Teil des Produkts wirken? Finden wir es heraus.
00:00:37Zuerst einmal: Viele Leute denken, sie fügen ihrer App KI hinzu, aber eigentlich fügen sie eine
00:00:43zweite App in ihrer App hinzu. Dein Produkt ist da drüben, die KI ist dort, und der Benutzer muss
00:00:49den Kontext ständig im Kopf hin- und herkopieren, um wirklich etwas zu erreichen. Das ist in Ordnung, wenn alles,
00:00:54was man braucht, diese einfache F&A-Struktur ist. Aber sobald der Agent den Status aktualisieren,
00:01:00Tools aufrufen oder mit dem Benutzer in einem echten Workflow arbeiten soll, stößt man an Grenzen. Jetzt baut man
00:01:07Streaming-Events, Status-Synchronisierung, Freigabeprozesse und jeder baut dasselbe, nur ein bisschen
00:01:14anders. CopilotKit geht das Problem von Anfang an an: Wie machen wir nicht noch einen Chatbot? Die bessere
00:01:20Frage ist: Wie lassen wir Agenten nativ in den Apps selbst wirken? Fangen wir also mit der Demo an, dann
00:01:26werde ich aufschlüsseln, was echt ist, was nützlich ist und was ein bisschen zu viel des Guten ist. Wenn du Programmiertools
00:01:32magst, die deinen Workflow beschleunigen, abonniere den Kanal. Wir bringen ständig neue Videos. Also gut,
00:01:37pass auf. Ich fange bei einem leeren Terminal an und wir können einfach unsere Installation ausführen, die ich von CopilotKit habe.
00:01:42Das erstellt das Grundgerüst der App und gibt mir einen funktionierenden Startpunkt, genau wie bei jedem anderen Projekt, das wir wirklich
00:01:49starten würden. Nicht nur eine leere Chat-Blase, sondern echte Teile. Die Frontend-Teile sind bereits so weit
00:01:56miteinander verbunden, dass ich die eigentliche Erfahrung, die wir wollen, testen kann. Jetzt springe ich rein und starte den Entwicklungsmodus
00:02:02und hier läuft die App lokal. Natürlich kommt einem dieser Teil bekannt vor, da ist eine Chat-Oberfläche,
00:02:09aber das ist nicht wirklich der interessante Teil. Das wirklich Coole ist, was passiert, wenn
00:02:13der Agent mit der Benutzeroberfläche verbunden ist. Ich stelle hier eine Frage in der Schnittstelle, okay, los geht's,
00:02:21und beachte die große Sache hier: Der Agent antwortet nicht nur mit einem Textblock, er kann die
00:02:26Antwort streamen, er kann Tools aufrufen und er kann eine echte Komponente in der App rendern. Das ist die erste
00:02:32wirklich große Änderung hier mit CopilotKit: Die KI beschreibt nicht nur die Schnittstelle, sie ist jetzt
00:02:38ein Teil von alledem. Jetzt gehen wir einen Schritt weiter, ich stelle hier eine Folgefrage.
00:02:46Okay, und hier ist der Teil, den viele andere Agenten überspringen: Unser Agent hält inne, er bittet um
00:02:52Freigabe. Und das Bitten um Freigabe ist der Teil, der zählt. Das ist der Teil, der mir wirklich gefällt, denn
00:02:57in echter Software ist Kontrolle keine Option. Unsere Benutzer müssen am Ende immer das letzte Wort haben,
00:03:03was passiert. Coole Demo, oder? Der einfache Weg, CopilotKit zu erklären, ist eigentlich nur das hier: CopilotKit
00:03:09ist ein Frontend-Stack für agentische Apps. Es ist nicht nur eine Chat-Komponente, nicht nur ein Wrapper um
00:03:15eine andere LLM-API. Es gibt dir die Teile, die wir für KI-Erfahrungen brauchen, die im Produkt leben.
00:03:23Es gibt vier Teile, die man hier wirklich verstehen muss. Erstens: AGUI. AGUI ist ein offenes, eventbasiertes Protokoll
00:03:31dafür, wie Agenten mit Frontends sprechen. Im Moment haben Agent-Tools Verbindungsprobleme. Man hat LangGraph,
00:03:37CrewAI, Master-Custom-Agents und was auch immer für ein Framework heute Morgen gestartet ist. Wir versuchen,
00:03:43das in unsere App einzubinden, und dann hat man React-Apps, mobile Apps, Dashboards, all diese Dinge, die
00:03:48passieren. Das sind viele verschiedene Dinge, die jongliert werden, all diese Dinge werden ohne ein gemeinsames
00:03:55Protokoll jongliert. Jedes Backend benötigt benutzerdefinierten Code für jedes Frontend. AGUI versucht, die gemeinsame
00:04:01Sprache zwischen Agent und Schnittstelle zu werden: Nachrichten, Status-Updates, Tool-Aufrufe, UI-Events, alles bewegt sich
00:04:07durch einen gemeinsamen Event-Stream. Dann haben wir generative UI: Anstatt dass das Modell nur Text zurückgibt, kann der Agent
00:04:14echte Komponenten auslösen. Es ist kein zufälliges HTML, es ist nur deine UI, die im richtigen Moment gerendert wird. Dann gibt es geteilten
00:04:22Status, oder was CopilotKit Co-Agents nennt. Das Frontend und das Agent-Backend können den Status in beide
00:04:29Richtungen teilen. Wenn der Benutzer etwas ändert, kann der Agent reagieren; wenn der Agent etwas aktualisiert, kann die UI es
00:04:35widerspiegeln. Das ist riesig, wenn wir Tools, Dashboards oder irgendetwas bauen, bei dem Benutzer und Agent
00:04:41an demselben Objekt arbeiten. Und schließlich das ganze Human-in-the-Loop-Ding. Dies ist einer der
00:04:47wichtigsten Teile bei alledem. Viele Agenten, viele Agenten-Demos können so tun, als sei die beste Erfahrung
00:04:52volle Autonomie, aber in Wahrheit ist das nicht immer der Fall, oder? In echten Produkten wollen Benutzer Macht und
00:04:59Kontrolle: Bestätigen vor dem Senden, Genehmigen vor dem Erstellen, Wählen zwischen Optionen, all das. Und CopilotKit
00:05:05gibt uns genau das. CopilotKit ist natürlich nicht für jeden die richtige Wahl. Wenn man es
00:05:10mit etwas wie dem Vercel AI SDK vergleicht, ist CopilotKit eher ein Komplettpaket. Wenn du Streaming-Chat,
00:05:17generative UI, geteilten Status und Human-Approved-Muster direkt aus der Box willst, ist CopilotKit genau
00:05:23das, was näher an der vollständigen Produktschicht ist. Das Vercel AI SDK ist leichter, es gibt dir mehr Low-Level-Kontrolle,
00:05:31also wenn du jeden Teil der Architektur selbst besitzen willst, dann sicher, das ist ehrlich gesagt eine viel bessere Wahl. Nun, wenn
00:05:38du CopilotKit mit dem vergleichst, alles selbst zu bauen, dann ist es schwer zu schlagen,
00:05:43denn das Schwierige ist nicht, eine Chat-Blase zu rendern, das wird mittlerweile zum einfachen Teil, oder? Das
00:05:49Schwierige ist alles, was drumherum liegt. Aber natürlich gibt es bei alledem einen Kompromiss: Es kann sich
00:05:54schwerfälliger anfühlen als ein minimales AI-SDK. Natürlich übernimmst du die Muster von CopilotKit. Außerdem ist es bis zu einem
00:06:02gewissen Grad kostenlos. Ehrlich gesagt, wenn man solo spielt, okay, ist es super cool, aber es wird nervig, wenn
00:06:08man es für Skalierung verwenden will, weil dann all das nicht mehr kostenlos ist. Wenn ihr eine komplette
00:06:14Open-Source-Alternative dazu kennt, schreibt einen Kommentar und lasst es mich wissen, denn ich suche genau danach.
00:06:19Bei CopilotKit muss man verstehen, was Open Source ist, man muss verstehen, was Keys benötigt,
00:06:25was gehostet wird, was bezahlt werden muss. Das ist kein Herunterputzen von Copilot, als wäre alles schlecht, aber man muss
00:06:32verstehen, was frei ist und was nicht. Wenn du nur einen einfachen Support-Chatbot brauchst, ist CopilotKit wahrscheinlich
00:06:38übertrieben. Aber wenn du etwas willst, das wirklich gut für agentische UX funktioniert, wo die Agenten mit
00:06:44deiner UI und deinem App-Status arbeiten, ist das wirklich cool. Also solltest du CopilotKit benutzen? Nun, probier es aus, wenn
00:06:50du ernsthafte In-App-KI baust, besonders wenn du in React oder Next.js arbeitest und möchtest, dass die KI sich
00:06:56wie ein Teil des Produkts anfühlt, nicht nur wie ein Seitenpanel. Das ist wirklich cool, du kannst es wirklich
00:07:02schnell starten, und mit all den Komponenten, die wir haben, ist es wirklich praktisch, den Workflow einzubinden. Wenn du
00:07:07schon dein eigenes Streaming, Status, Tool-Aufruf, UI-Switching gebaut hast, lohnt es sich vielleicht nicht. Und wenn dein
00:07:13Feature buchstäblich nur ist: Frage stellen, Antwort bekommen, dann ist CopilotKit für
00:07:19diesen Zweck völlig übertrieben. Du brauchst wahrscheinlich keinen vollen agentischen Frontend-Stack, benutz einfach etwas Leichteres. Okay, ausliefern,
00:07:25weitermachen, loslegen. Wenn dir Programmiertools wie diese gefallen, abonniere den Better-Stack-Kanal.
00:07:30Wir sehen uns im nächsten Video.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video