Das KI-Eingabefeld sieht aus wie eine simple Textzeile und ist doch das am schwersten sauber zu bauende Element jeder Chat-Anwendung. Der Entwickler Julien Thibeaut steckte Monate in dieses eine Feld und fasste seine Erkenntnisse in einer detaillierten Anatomie zusammen.[1] Für Agenturen und Inhouse-Teams im DACH-Raum steckt darin eine Bauanleitung, keine Spielerei.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Der Entwickler Julien Thibeaut zerlegt das KI-Eingabefeld in sechs Schichten, von der Textzeile bis zur Anhang-Zone.
- Sein Open-Source-Baukasten prompt-kit baut auf React, Tailwind CSS und shadcn/ui auf und steht kostenlos unter MIT-Lizenz.
- Über 3.000 Sterne auf GitHub zeigen den Zuspruch, Wettbewerber wie Vercel AI Elements und assistant-ui lösen dieselbe Aufgabe.
- Für barrierefreie Assistenten zählen die Tastaturbedienung und ein Feld, das während der Antwort nie blockiert.
Woran scheitern die meisten KI-Eingabefelder?
Die Details entscheiden. Die Textzeile soll fließend über mehrere Zeilen wachsen und bei einer festen Höhe stoppen, die Eingabetaste sendet, Umschalt und Eingabetaste setzen einen Zeilenumbruch. Auf dem iPhone zoomt Safari das Layout hoch, sobald die Schrift kleiner als 16 Pixel gerät, ein verbreiteter Stolperstein.
Zustandsführung ist die zweite Falle. Während das Modell antwortet, darf das Feld nie einfrieren. Der Senden-Knopf wird zum Stopp-Knopf, die Eingabe bleibt bedienbar. Diese Zwischenzustände einer KI-Oberfläche sind ein eigenes Handwerk. Fehlermeldungen zu Anhängen gehören direkt an die Eingabe, nicht in eine flüchtige Einblendung am Bildrand.
Was steckt im Baukasten prompt-kit?
Fertige Bausteine statt Handarbeit. Thibeaut goss seine Anatomie in prompt-kit, eine Sammlung barrierearmer Komponenten für React, aufgesetzt auf Tailwind CSS und shadcn/ui.[2] Entwickler ziehen einzelne Teile über die shadcn-Kommandozeile ins Projekt, von der Eingabezeile über den Kontextbalken bis zur Anhang-Zone.
Offen und kostenlos bleibt das Ganze. Der Code steht unter MIT-Lizenz und zählt über 3.000 Sterne auf GitHub. Das senkt die Hürde, einen Assistenten auf erprobten Mustern aufzusetzen statt aus dem Nichts, ähnlich den React-Bausteinen zum Kopieren, die gerade Konjunktur haben.
Über die Eingabezeile entscheidet sich die Nutzererfahrung eines Assistenten, lange bevor das Modell ein Wort erzeugt. Fertige Baukästen ersparen Teams diese Lernkurve, ohne die Kontrolle über die Oberfläche abzugeben.
— Michael Dobler, Herausgeber Dr. Web
Was heißt das für Agenturen im DACH-Raum?
Ein neuer Markt für Oberflächen-Baukästen entsteht. Neben prompt-kit bündeln Vercel mit AI Elements und das Projekt assistant-ui dieselbe Aufgabe zu fertigen Komponenten, samt Streaming und Nachrichtenverlauf. Parallel verschieben agentische Design-Tools die Rolle der Designer. Selbst Design-Systeme wandern als MCP-Server zu den KI-Agenten.
Barrierefreiheit gibt den Ausschlag. Seit dem Barrierefreiheitsstärkungsgesetz vom Juni 2025 müssen viele digitale Dienste in Deutschland bedienbar sein, auch per Tastatur. Genau diese Tastaturführung liefern die Baukästen mit. Vor dem Start prüfen Teams drei Punkte: die Bedienung auf dem Smartphone, das Verhalten während der Antwort und die Zugänglichkeit ganz ohne Maus.
Quellen
[1] Julien Thibeaut: „Anatomy of AI Input“
[2] prompt-kit auf GitHub: „Core building blocks for AI apps“
Mehr Newshunger?
- Lucet: Open-Source-Bausteine für die Zustände, die KI-Oberflächen wirklich treffen
- Opensource UI: Über 150 React-Bausteine zum Kopieren, ohne Radix im Unterbau
- DialKit: Interface-Parameter live justieren, ohne den Code neu zu laden
- Mesurer: Der Open-Source-Inspektor, der Design-Feedback an KI-Agenten liefert
- Agentische Design-Tools: Miro und Figma verschieben die Rolle der Designer
- Design-Systeme für KI-Agenten: Warum Microsoft sein Design-System als MCP-Server ausliefert
