Was ich wirklich baue, wenn ein Kunde sagt „KI ins Produkt einbauen“
„KI hinzufügen“ ist kein einzelnes Feature. Es ist eine gestreamte Antwort, verdrahtet mit dem Vercel AI SDK, ein per MCP-Server aus Figma gezogener Komponenten-Entwurf, ein internes Tool, das einen Screenshot statt eines Support-Tickets liest, und eine Entscheidung, welches davon zuerst gebaut werden sollte. Wie jedes davon in echtem Code wirklich aussieht, und wo multimodale KI sich tatsächlich lohnt.
„KI ins Produkt einbauen“ ist der Auftrag, den ich jetzt am häufigsten höre, und fast nie ist es ein einzelnes Feature. Darunter steckt meist eine von vier verschiedenen Aufgaben: ein Chat oder eine Suche, die eine Antwort streamt statt einen Spinner zu zeigen, ein Design-zu-Code-Schritt, der eine Komponente aus Figma entwirft statt sie von Grund auf zu schreiben, ein internes Tool, das etwas Unordentliches liest (einen Screenshot, ein PDF, eine Tabelle), statt jemanden zum Neutippen zu zwingen, oder ein echtes multimodales Feature, bei dem die Eingabe gar kein Text ist. Zu benennen, welche es wirklich ist, entscheidet den ganzen Build.
Ich verbringe den ersten Call lieber damit, den Auftrag in diese vier einzuteilen, als mit einer Modellvergleichstabelle anzufangen. Das Modell ist selten der schwierige Teil. Die Verkabelung drumherum - Zustand, während Tokens streamen, eine Figma-Datei, die ein Agent wirklich parsen kann, eine Warteschlange für die Screenshots, die ein internes Bot verarbeiten muss - dahin gehen die Wochen.
1. Streaming-UI mit dem Vercel AI SDK
Eine Chat-Box, die erst nach fünf Sekunden Warten alles auf einmal antwortet, fühlt sich kaputt an, selbst wenn das Modell schnell ist - Leute lesen den ersten Satz, während er noch getippt wird, nicht danach. Die Hooks useChat und useCompletion des Vercel AI SDK übernehmen den Token-Stream, aber das, was Kunden wirklich beurteilen, ist das Drumherum: ein Stop-Button, der die Anfrage wirklich abbricht, ein Regenerate, das die letzte Nachricht nicht dupliziert, und ein UI, das nicht springt, wenn ein Codeblock oder eine Tabelle mitten im Satz einströmt.
Der häufigste Fehler, den ich in bestehenden Builds sehe, ist nicht das Streaming selbst - es ist der Zustand. Eine React-Komponente, die bei jedem Token die ganze Nachrichtenliste neu rendert, ein Lade-Flag, das nach einer abgebrochenen Anfrage nie zurückgesetzt wird, ein Eingabefeld, das nach einem Fehler deaktiviert bleibt. Nichts davon zeigt sich in einer Demo mit einer einzigen Happy-Path-Nachricht; alles davon zeigt sich nach der zehnten Nachricht eines Nutzers am Tag.
2. Figma-to-Code über MCP, und wo der Mensch noch hinschauen muss
Ein MCP-Server, der eine Figma-Datei zugänglich macht, lässt Cursor oder Claude das tatsächliche Layout lesen - Frame-Namen, Abstandstokens, Komponentenvarianten - statt aus einem Screenshot zu raten. Das bringt einen ersten Komponentenentwurf schnell auf ein vernünftiges Niveau: korrekte Struktur, ungefähr korrekte Abstände, echte Klassennamen statt Platzhalter.
Er liefert responsive Breakpoints, Barrierefreiheit oder Zustände, die eine Designerin nie gezeichnet hat - Hover, Disabled, leer, Laden - ohne menschliche Prüfung nicht richtig. Ich behandle die MCP-Ausgabe als schnellen ersten Entwurf, nicht als mergefertigen PR: die Zeit, die es spart, liegt im Abtippen des Boilerplates, nicht im Review.
3. KI-gestützte interne Tools, und wo Multimodalität sich wirklich lohnt
Das KI-Feature mit dem besten ROI, das ich baue, ist selten kundenseitig. Ein internes Tool, das die PDF-Rechnung eines Lieferanten liest und die Felder ausfüllt, die eine Buchhalterin früher neu tippte, oder eines, das sich einen Screenshot eines Bugreports ansieht und ein Ticket entwirft - geringeres Risiko als ein öffentlicher Chatbot, höheres Volumen, als die meisten erwarten, und niemand stört sich an einer rauen Kante, weil es die eigene Zeit spart.
Genau dort verdient sich multimodale KI - ein Modell, das ein Bild oder ein PDF liest statt nur Text - ihre Kosten zurück. Bild-Input in ein kundenseitiges Feature einzubauen, „weil es möglich ist“, lohnt sich meist nicht angesichts der zusätzlichen Fehlerfläche. Es in ein Formular einzubauen, das eine Mitarbeiterin vierzig Mal am Tag ausfüllt, statt eines Dokuments, das sie sonst neu tippen würde, zahlt sich im ersten Monat aus.
Fazit: benennen Sie das Feature, bevor Sie das Modell benennen
„KI ins Produkt einbauen“ wird erst dann zu einem Plan, wenn es eines davon ist: ein Chat, der richtig streamt, ein Design-Schritt, der entwirft statt einen Entwickler zu ersetzen, ein internes Tool, das eine bestimmte Neutipp-Arbeit automatisiert, oder ein echter multimodaler Input. Ich baue alle vier, verdrahtet mit dem Vercel AI SDK, MCP und dem Modell, das zur Aufgabe passt, statt dem, über das diesen Monat am lautesten geredet wird. Schreiben Sie über das Formular, was die KI tatsächlich lesen oder sagen soll, und ich sage Ihnen, welches der vier es ist.
Soll das gebaut werden, nicht nur erklärt?
KI-Lösungen für Unternehmen: RAG, Agenten, Next.js. Direkte Auftragnehmerin.
Sprechen wir über Ihr Projekt
Ich bin Senior-Webentwicklerin mit Schwerpunkt React und Next.js - verfügbar für Freelance-Projekte weltweit.
Standort
Kiew, Ukraine
Upwork
Profil ansehenTelegram
Kontakt aufnehmenViber
Kontakt aufnehmen