AI Elements Alternative: 5 React-KI-Chat-Kits im Vergleich

Wahrscheinlich hast du mit AI Elements von Vercel angefangen, weil es für einen Chat auf dem AI SDK die naheliegende Wahl war, und jetzt suchst du eine AI Elements Alternative. Vielleicht hast du den Hinweis in der Doku gesehen, vielleicht ist dein Backend gar nicht das AI SDK, oder der Chat fühlt sich auf dem Smartphone falsch an. Dieser Beitrag vergleicht fünf React-Kits für KI-Oberflächen in den vier Punkten, die die Wahl entscheiden: Streaming, Tool Calls, Verhalten auf dem Smartphone und Lock-in. Jede Angabe ist datiert und verlinkt. Eines der fünf Kits ist Wingo UI, die Bibliothek, die wir bauen. Wir sind also nicht neutral, und wir sagen klar, wo AI Elements oder ein anderes Kit die bessere Wahl ist.

Was ist mit AI Elements passiert?

AI Elements zieht zu shadcn/ui um, und das ursprüngliche Projekt wird Ende November 2026 eingestellt. Stand 16. Oktober 2026 kündigt die Doku-Seite (opens in a new tab) genau diesen Umzug und das Einstellen zum Ende November 2026 an und schickt neue Projekte zu AI Elements in shadcn/ui (opens in a new tab). Gestartet ist AI Elements am 6. August 2025 (opens in a new tab) als Open-Source-Sammlung von React-Komponenten für das AI SDK, gebaut auf shadcn/ui.

Die Version in shadcn/ui ist etwas grundlegend anderes. Ihre Seite beschreibt AI Elements als Patterns für agentische Oberflächen und stellt klar, dass es kein Paket zu installieren gibt und der Code dir gehört. Jedes Pattern ist eine Komposition aus shadcn/ui-Komponenten, die du in dein Projekt kopierst oder per Prompt einem Coding-Agenten gibst: Ein Chat besteht aus Message-Turns in einem Message Scroller, und Reasoning, Tool und Plan bauen auf Trace auf. Die Seite listet 21 Patterns, von Chat und Prompt Input bis Plan, Queue, Terminal und Test Results. Sie ordnet die alten AI-Elements-Dateien ihren Nachfolgern zu und nennt die, für die es keinen direkten Ersatz gibt, etwa canvas.tsx (bau es mit React Flow neu) und web-preview.tsx (ein iframe).

Hast du AI Elements schon installiert, bricht nichts. Laut der Seite bei shadcn/ui musst du nicht migrieren, denn die Dateien liegen in deinem Repo. Was endet, ist die Weiterentwicklung auf elements.ai-sdk.dev. Das spielt beim nächsten Release des AI SDK eine größere Rolle als heute.

Vercel AI Elements vs. die Alternativen: Wie schneiden sie ab?

Hier sind die fünf Kits, geprüft am 16. Oktober 2026. Die Frage, die sie am stärksten trennt, ist der „Chat-State“: Wer hält die Nachrichten, den Streaming-Status und die Tool Calls?

Quellen: die Doku (opens in a new tab), die Seiten zu Tool (opens in a new tab) und Confirmation (opens in a new tab) und das Repository von AI Elements; die AI-Elements-Seite (opens in a new tab) von shadcn/ui und ihr Tool-Pattern (opens in a new tab); das Repository von prompt-kit, seine README und sein Ordner components/prompt-kit; die Doku (opens in a new tab) und die Preise (opens in a new tab) von assistant-ui. Die Lizenzen sind so angegeben, wie die Repositories sie deklarieren.

Vier der fünf Kits sind kostenlos. Wingo UI ist das kostenpflichtige, und das ist der erste Filter: Wenn ein kostenloses Kit deinen Screen abdeckt, nimm es.

Welches Kit kann Streaming am besten?

Keines der fünf Kits gewinnt klar: Alle rendern eine Antwort, während sie gestreamt wird. Sie unterscheiden sich in zwei Details: wo die Scrollposition steht, während Text ankommt, und was mit halb geschriebenem Markdown passiert.

• AI Elements rendert Markdown mit Streamdown, dem Streaming-Markdown-Renderer von Vercel. Das Paket hängt von streamdown ^2.4.0 ab (geprüft in der package.json des Repositorys, Oktober 2026).
• Das Chat-Pattern von shadcn/ui macht die Nachricht der Person zum Scroll-Anker: Eine neue Frage landet nahe am oberen Rand, und die Antwort streamt darunter herein. autoScroll folgt der Antwort, solange die Person am Live-Ende bleibt, so steht es auf der Seite zum Chat-Pattern (opens in a new tab).
• prompt-kit liefert die Dateien chat-container, markdown und response-stream. Die Teile sind also da, das Verdrahten übernimmst du.
• assistant-ui erledigt das Streaming in seiner Runtime, die Komponenten bekommen also einen State, der schon zusammengeführt ist.
• Wingo UI: Der Chat Thread folgt dem Stream nur, solange die Person unten steht, und lässt los, sobald sie nach oben scrollt. Schon eine Drehung des Mausrads nach oben löst die Verfolgung, bevor sich scrollTop überhaupt bewegt. So zieht das nächste Token niemanden zurück, der ganz unten stand. Eine Pill zählt die Antworten, die angekommen sind, während du weg warst. Die Markdown-Komponente repariert das unfertige Ende (ein offener Code-Fence, ein ** ohne Gegenstück, ein halb getippter Link), bevor sie parst, und Screenreader hören eine Ansage, wenn eine Antwort beginnt, und eine, wenn sie fertig ist.

Die Wahl des Ankers ist ein echter Designunterschied. shadcn/ui hält deine Frage im Blick, während die Antwort darunter wächst. Chat Thread folgt dem neuesten Text, so wie es die meisten Chat-Apps tun. Keins von beiden ist falsch; nimm das, was zur Länge deiner Antworten passt. Wie die Reparatur des unfertigen Endes im Detail funktioniert, steht in unserem Beitrag zu React Markdown Streaming.

Wie gehen die Kits mit Tool Calls und Freigaben um?

Bei Tool Calls teilen sich die Kits in zwei Lager: Tool-UIs, die AI SDK Parts direkt lesen, und Tool-UIs, die deine eigenen Daten nehmen. Das erste Lager spart Glue-Code auf dem AI SDK, das zweite übersteht einen Wechsel des SDK.

AI Elements gehört zum ersten Lager. Die Komponente Tool nimmt einen ToolUIPart (oder einen DynamicToolUIPart) und gibt den state des Parts an ToolHeader weiter, der jeden Zustand des SDK (input-streaming, approval-requested, output-denied, output-error und die übrigen) auf ein Badge abbildet. Die separate Komponente Confirmation rendert die Freigabeanfrage, und im Beispiel der Doku rufen die Buttons Approve und Reject addToolApprovalResponse aus useChat auf. Läuft deine App auf dem AI SDK, schreibst du fast keinen Glue-Code. Ein Detail für Smartphones aus dem Quellcode: ConfirmationAction ist mit h-8 gestylt, also ein Button mit 32px.

Das Tool-Pattern von shadcn/ui zeichnet jeden Aufruf als Zeile in einem Trace und legt lange Ausgaben in einen Code Block oder, wenn sie sehr lang sind, in ein Sheet. Laut der Seite lesen die Bausteine keine Tool Parts, und du bildest jeden Zustand selbst ab, auch wenn der Beispielcode gegen useChat geschrieben ist. Eine ausstehende Freigabe erscheint außerhalb des Trace als Item mit Approve und Deny.

Tool Call Timeline gehört zum zweiten Lager. Jeder Aufruf ist ein ToolCall-Objekt mit einem Status (pending, running, complete, error, canceled oder awaiting-approval), einer Eingabe, einer Ausgabe, Zeiten, Logs und Teilschritten. Fehlgeschlagene Aufrufe öffnen sich von selbst und zeigen Retry, wenn du onRetry übergibst. Ein Aufruf, der auf einen Menschen wartet, zeigt Approve und Reject unter seinen genauen Argumenten, und ein onApprove, das ein Promise zurückgibt, hält den Spinner im Button, bis das Promise erledigt ist. Es gibt drei Varianten: eine Leiste für eine Agent-Seite, eine Karte mit dem Fortschritt und der Gesamtzeit des Laufs und eine Inline-Zusammenfassung für eine Chat-Nachricht.

Weil ToolCall aus einfachen Daten besteht, brauchst du einen Adapter von AI SDK Parts. Das ist eine kurze Datei, und unser Guide zur Tool Call UI für KI-Agenten enthält die vollständige Version, samt der serverseitigen Freigabesperre in streamText.

Welches KI-Chat-UI-Kit funktioniert auf dem Smartphone?

Für eine native iOS- oder Android-App ist assistant-ui das einzige der fünf Kits mit React-Native-Unterstützung. Bei einer Web-App auf dem Smartphone zeigen sich die Lücken im Composer: Er rutscht hinter die Tastatur, Enter schickt einen halben Satz ab, und ein Modell-Menü, das an einem kleinen Button hängt, verdeckt den Daumen, der es geöffnet hat. Wir haben die Doku jedes Kits und den Quellcode seines Prompt Input auf Verhalten am Smartphone gelesen (Oktober 2026):

• assistant-ui: Die Doku nennt React Native für iOS und Android neben React fürs Web, Vue und React Ink für Terminal-Apps. Lieferst du eine native App aus, ist die Sache damit entschieden.
• AI Elements und die Patterns von shadcn/ui: Die Seite zum Chat-Pattern (opens in a new tab) erwähnt weder die Bildschirmtastatur noch IME-Komposition oder Touch Targets. Die prompt-input.tsx von AI Elements überspringt Enter zwar, solange ein IME komponiert, sendet aber bei jedem einfachen Enter, auch auf einer Smartphone-Tastatur ohne Shift+Enter, und ihre Freigabe-Buttons haben 32px. Das kannst du alles in deiner Kopie beheben, denn die Dateien gehören dir.
• prompt-kit: Die README behandelt kein Verhalten auf Smartphones, und die prompt-input.tsx sendet bei Enter ohne Shift und ohne Prüfung von isComposing. Wer mit einem japanischen oder chinesischen IME Enter drückt, um ein Wort zu bestätigen, schickt also stattdessen die Nachricht ab. Ergänz die Prüfung in deiner Kopie, bevor du für diese Märkte auslieferst.
• Wingo UI sieht das Smartphone als Hauptziel. Prompt Input ignoriert Enter, solange ein IME komponiert (es prüft isComposing und keyCode 229), fügt auf Touch-Tastaturen eine neue Zeile ein, damit der runde Button das Senden übernimmt, nutzt 16px Schrift, damit iOS Safari nie zoomt, und schiebt sich mit position="fixed" per visualViewport über die Tastatur. Die Modellliste und das +-Menü öffnen sich auf Smartphones als Bottom Sheets. Die Zeilen der Tool Call Timeline bekommen auf Touchscreens eine Trefferfläche von 44px, und ihre Buttons Approve, Reject und Retry sind auf Smartphone-Breiten 44px hoch.

Die Tastaturregeln für den Composer behandelt unser Guide zum React Prompt Input im Detail.

Wie viel Lock-in hat jedes Kit?

Wenig im Code, mehr im Datenmodell. Jedes Kit hier wird als Quellcode installiert, niemand kann dir die Dateien wegnehmen. Der Lock-in steckt in den Typen, die die Komponenten erwarten.

• AI Elements erwartet Typen des AI SDK. Das Paket hängt von ai ^6 und @ai-sdk/react ^3 ab, und die Doku nennt ein Next.js-Projekt mit installiertem AI SDK als Voraussetzung. Weg vom AI SDK heißt: den Glue-Code in jeder Komponente neu schreiben. Nach dem Stichtag pflegst du diese Dateien selbst.
• Die Patterns von shadcn/ui lockern das. Die Bausteine sind generisch, und shadcn/ui veröffentlicht @shadcn/helpers mit einem AI-SDK-Helper (opens in a new tab), der geskriptete Unterhaltungen ohne Modell durch useChat streamt, dazu einen Helper für TanStack AI.
• assistant-ui stellt seine Runtime in die Mitte. Über Adapter bekommst du viele Backends, und der State des Threads lebt im Modell der Runtime. Assistant Cloud ist optional.
• prompt-kit und Wingo UI nehmen Props und halten keinen Chat-State. Die Komponenten von Wingo UI lesen ChatMessageData und ToolCall aus lib/ai-chat: eine ID, eine Rolle, Markdown-Inhalt und einen Status, dazu optional Reasoning, Tool Calls, Anhänge und Quellen.

Der Praxistest: Könntest du im nächsten Quartal deinen Modellanbieter oder dein SDK wechseln, ohne den Chat-Screen anzufassen? Mit einfachen Datentypen ja, denn nur der Adapter ändert sich.

Kannst du das AI SDK behalten und nur die UI tauschen?

Ja. Die Hooks des AI SDK sind der Teil, den es sich zu behalten lohnt, und sie sind getrennt von den AI SDK UI Komponenten, die du renderst. Hier bleibt useChat, sein Standard-Transport schickt weiter an /api/chat, und Chat Thread und Prompt Input ersetzen den Screen von AI Elements. Dein Route Handler gibt weiter streamText(...).toUIMessageStreamResponse() zurück.

npx wingo-ui@latest add chat-thread prompt-input

// app/assistant/assistant.tsx
"use client";

import { useMemo } from "react";
import { useChat } from "@ai-sdk/react";
import type { UIMessage } from "ai";
import { ChatThread, type ChatMessageData } from "@/components/ui/chat-thread";
import { PromptInput } from "@/components/ui/prompt-input";

// fertige nachrichten behalten ihr objekt, also rendert nur die streamende neu
const cache = new WeakMap<UIMessage, ChatMessageData>();

function toChatMessage(message: UIMessage, streaming: boolean): ChatMessageData {
  const cached = streaming ? undefined : cache.get(message);
  if (cached) return cached;
  const content = message.parts.flatMap((part) => (part.type === "text" ? [part.text] : [])).join("");
  const thought = message.parts.flatMap((part) => (part.type === "reasoning" ? [part.text] : [])).join("\n\n");
  const data: ChatMessageData = {
    id: message.id,
    role: message.role,
    content,
    status: streaming ? (content ? "streaming" : "pending") : "complete",
    reasoning: thought ? { content: thought, status: streaming && !content ? "streaming" : "complete" } : undefined,
  };
  if (!streaming) cache.set(message, data);
  return data;
}

export function Assistant() {
  const { messages, status, sendMessage, stop } = useChat();

  const thread = useMemo(
    () =>
      messages.map((message, index) =>
        toChatMessage(message, status === "streaming" && index === messages.length - 1 && message.role === "assistant"),
      ),
    [messages, status],
  );

  return (
    <div className="h-dvh">
      <ChatThread
        messages={thread}
        thinking={status === "submitted"}
        composer={
          <PromptInput
            status={status === "streaming" ? "streaming" : status === "submitted" ? "submitting" : "idle"}
            onSubmit={({ text }) => sendMessage({ text })}
            onStop={stop}
            stopShortcut="escape"
          />
        }
      />
    </div>
  );
}

Die Prop thinking zeigt die Tipp-Punkte zwischen dem Absenden und dem ersten Token, Stop ruft stop() des SDK auf, und Escape stoppt die Antwort, solange der Fokus im Composer liegt. Für Agenten ergänzt du toolCalls: toToolCalls(message) mit dem Adapter aus dem Guide zu Tool Calls, und die Nachricht klappt sie zu einer einzeiligen Übersicht ein, die sich öffnet, solange ein Aufruf läuft.

Wann ist AI Elements die bessere Wahl?

AI Elements, oder jetzt sein Nachfolger in shadcn/ui, ist in drei häufigen Fällen die bessere Wahl:

• Deine App läuft auf dem AI SDK, und das Budget ist null. Es ist kostenlos, Apache 2.0 oder MIT, und der Glue-Code zu useChat ist schon geschrieben.
• Du baust einen Coding-Agenten. Die Patterns von shadcn/ui enthalten Terminal, Test Results, Stack Trace, File Tree, Checkpoint, Plan und Queue. Wingo UI deckt einen Teil davon mit Diff Viewer, Log Viewer (ANSI-Farben, Tail-Follow) und Tree View ab, hat aber Stand dieses Releases keine Komponente für Terminal, Test Results, Stack Trace oder Checkpoint.
• Du arbeitest ohnehin mit shadcn/ui. Die KI-Patterns stehen jetzt in derselben Doku und derselben CLI wie der Rest von shadcn/ui, gebaut aus Komponenten, die du vielleicht schon hast.

Ein neues Projekt startest du wegen des Stichtags im November 2026 beim Original besser gleich mit der Version in shadcn/ui. Nimm assistant-ui, wenn die Bibliothek Threads, Verzweigungen und Persistenz übernehmen soll oder wenn du React Native auslieferst. Nimm prompt-kit für ein kleines, kostenloses Set an shadcn AI Chat Komponenten, die du selbst stylst. Wingo UI passt, wenn du dein Backend schon selbst in der Hand hast und die Scrollregeln, die Layouts für Smartphones, den Freigabeablauf und die Screenreader-Ansagen fertig haben willst. Dabei ist jeder visuelle Aspekt eine Prop, und dieselben Komponenten installierst du über die CLI oder den MCP-Server.

Was solltest du als Nächstes ausprobieren?

Öffne die Doku zu Chat Thread, probier die Props im Playground aus und installier dann alles mit npx wingo-ui@latest add chat-thread prompt-input tool-call-timeline. Alle drei gehören zu Wingo UI Pro. Wenn ein Coding-Agent deine Screens baut, zeigt der Guide zum MCP für Komponentenbibliotheken, wie er diese Props direkt lesen kann, und weitere Beiträge wie diesen findest du unter UI mit KI-Agenten bauen.

Häufige Fragen

Wird Vercel AI Elements eingestellt?

Ja. Laut der Doku von AI Elements (Stand Oktober 2026) zieht das Projekt zu shadcn/ui um und wird Ende November 2026 eingestellt; neue Projekte sollen AI Elements über shadcn/ui installieren. Die Seite bei shadcn/ui sagt, dass bestehende Kopien weiter funktionieren, weil der Code schon in deinem Projekt liegt.

Funktioniert AI Elements ohne das AI SDK?

Nicht so, wie es dokumentiert ist. Als Voraussetzung nennt die Doku ein Next.js-Projekt mit installiertem AI SDK, das Paket hängt von ai und @ai-sdk/react ab, und die Komponente Tool erwartet den Tool Part des SDK. Die Patterns von shadcn/ui sind lockerer: Ihre Bausteine lesen keine Tool Parts, auch wenn die Beispiele useChat nutzen.

Welche kostenlosen shadcn AI Chat Komponenten gibt es?

AI Elements (Apache 2.0), die KI-Patterns in shadcn/ui (MIT), prompt-kit (MIT) und assistant-ui (MIT) sind alle kostenlos und werden als Quellcode installiert. assistant-ui bietet zusätzlich ein optionales gehostetes Backend, Assistant Cloud, mit einem kostenlosen Tarif für 200 monatlich aktive Nutzer und einem Pro-Plan für $50 im Monat, Stand Oktober 2026.

Welches KI-Chat-UI-Kit funktioniert am besten auf dem Smartphone?

Für eine native iOS- oder Android-App ist es assistant-ui, weil es React Native unterstützt. Für eine Web-App, die auf Smartphones läuft, prüfst du bei jedem Kit 44px Touch Targets, Bottom Sheets statt Popovers, IME-sicheres Enter-Verhalten und einen Composer, der über der Tastatur bleibt. Wingo UI bringt alle vier mit; von den kostenlosen Web-Kits beachtet der Prompt Input von AI Elements die IME-Komposition, sendet aber auch auf Touch-Tastaturen bei einem einfachen Enter.

Sind die KI-Komponenten von Wingo UI kostenlos?

Nein. Chat Thread, Prompt Input und Tool Call Timeline gehören zu Wingo UI Pro, das $8 im Monat, $80 im Jahr oder einmalig $150 kostet. Die 75 kostenlosen Einträge enthalten Grundbausteine, auf denen sie aufbauen, etwa Button, Textarea und Tooltip.