KI-Chat, Prompts und Agenten

Chats, Prompts, Agents und Antworten mit Quellen.

3 Components · 16 Variants

Kategorie wechseln

Oberflächen für Produkte mit KI

Produkte mit KI brauchen Oberflächen, die klar zeigen, was das Modell getan hat, woher eine Antwort stammt und wo ein Mensch entscheidet. Die drei Components hier decken das Gespräch, die Eingabe und den Agenten ab, der selbst handelt, und jede Antwort läuft ein, ohne den Rest der Seite zu verschieben.

Der KI-Chat bringt Chatfenster, Composer, Verlauf, Antworten mit nummerierten Quellen und ein Sprach-Widget. Die Prompt-Eingabe ist das Eingabefeld in fünf Fassungen, mit Anhängen und Upload-Grenzen, Befehlen mit Schrägstrich, Kontext per @, Modi mit Zeit und Kosten und einer Diktierfunktion, die unsichere Wörter markiert. Der Agenten-Lauf zeigt einen laufenden Durchgang mit Stopp, jeden Tool-Aufruf mit Ein- und Ausgabe, eine Warteschlange für Freigaben und die Historie.

Kennzeichne KI-Ausgaben als solche, jede Variante hat einen Platz dafür. Zeig Quellen neben der Aussage, die sie belegen. Stell vor jede Aktion, die sich nicht rückgängig machen lässt, einen Menschen, dafür gibt es die Freigabe-Warteschlange. Die Components zeichnen die Oberfläche, dein eigenes Modell oder deine API bindest du über Props an.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

KI-Chat6
Agenten-Lauf5
Prompt-Eingabe5

ai-chat

KI-Chat

Chats, Eingaben, Agenten und Antworten mit Quellen. Antworten laufen ein, alles geht mit der Tastatur.

Chatfenster
Eingabe mit Vorschlägen
Agenten-Schritte
Mit Verlauf
Antwort mit Quellen
Sprach-Widget

Props und Details

Chatfenster

Ein vollständiges Gespräch mit einlaufenden Antworten, Aktionen je Nachricht und Schnellantworten.

Installv1.0.1

aiw add @ai-website/ai-chat

Bringt mit utils, kit, button, icon

Usage

<AiChat variant="chat-window" assistant={{ name, model }} messages={[…]} respond={async (prompt) => …} />

Source

Eingabe mit Vorschlägen

Eine große Eingabe mit Modell, Websuche, Anhängen und Vorschlagskarten.

Installv1.0.1

aiw add @ai-website/ai-chat

Bringt mit utils, kit, button, icon

Usage

<AiChat variant="prompt-composer" title="…" suggestions={[{ label, prompt, icon }]} models={[…]} />

Source

Agenten-Schritte

Eine Aufgabe in Schritten mit Werkzeugen, Live-Fortschritt, aufklappbaren Details und einer Freigabe, bevor etwas rausgeht.

Installv1.0.1

aiw add @ai-website/ai-chat

Bringt mit utils, kit, button, icon

Usage

<AiChat variant="agent-steps" task={{ title, started, files }} steps={[{ title, tool, status, output }]} />

Source

Mit Verlauf

Chats nach Tagen mit Suche und neuem Chat. Telefone öffnen die Liste als Panel.

Installv1.0.1

aiw add @ai-website/ai-chat

Bringt mit utils, kit, button, icon

Usage

<AiChat variant="history-sidebar" history={[{ id, title, group, active }]} messages={[…]} />

Source

Antwort mit Quellen

Erst die Quellen, dann eine Antwort, deren Belege ihre Quelle aufleuchten lassen. Danach weiterführende Fragen.

Installv1.0.1

aiw add @ai-website/ai-chat

Bringt mit utils, kit, button, icon

Usage

<AiChat variant="answer-with-sources" question="…" sources={[{ id, title, site, href }]} answer={[{ text, cites: [1, 3] }]} />

Source

Sprach-Widget

Ein kompakter Assistent in der Ecke mit Mikrofon, Live-Wellenform, Schnellantworten und Text als Ausweg.

agent-run

Agenten-Lauf

Screens für KI-Agenten, die selbst handeln. Ein Live-Lauf mit Stopp, jeder Werkzeugaufruf mit Ein- und Ausgabe, eine Warteschlange für Freigaben, ein Plan zum Prüfen vor dem Start und der Verlauf aller Läufe.

Live-Lauf
Werkzeugaufrufe
Freigaben
Plan prüfen
Verlauf der Läufe

Props und Details

Live-Lauf

Der Lauf spielt beim Hereinscrollen ab. Protokolle schreiben sich, Schritte haken sich ab, der Verbrauch zählt mit, und der Agent hält für eine Freigabe an. Stoppen beendet ihn sofort.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/agent-run

Bringt mit utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="live-run" goal="…" agent={{ name }} elapsed={74} budget={{ used, limit, unit }} steps={[{ id, title, tool, status, log }]} />

Source

Werkzeugaufrufe

Jeder Aufruf eines Laufs mit Status, Dauer und Wiederholungen. Am Desktop stehen Ein- und Ausgabe neben der Liste, auf dem Telefon klappt jeder Aufruf an Ort und Stelle auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/agent-run

Bringt mit utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="tool-calls" steps={[{ id, title, tool, status, duration, retries, input, output }]} />

Source

Freigaben

Aktionen mehrerer Agenten, die auf einen Menschen warten, jeweils mit Grund, Risiko und den genauen Änderungen. Entscheidungen gleiten hinaus und lassen sich zurücknehmen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/agent-run

Bringt mit utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="approval-queue" approvals={[{ id, agent, run, action, risk, reason, changes, requested }]} />

Source

Plan prüfen

Der Plan vor dem Start. Schritte gleiten beim Umsortieren, lassen sich streichen, ergänzen oder auf Rückfrage stellen, und Schalter legen fest, was der Agent allein darf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/agent-run

Bringt mit utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="plan-review" goal="…" plan={[{ id, title, tool, ask }]} permissions={[{ id, label, description, on }]} />

Source

Verlauf der Läufe

Erfolgsquote mit Verlauf, Summen und jeder Lauf mit Auslöser, Schritten, Dauer und Verbrauch. Filter sortieren gleitend um, eine Zeile öffnet ihre Zusammenfassung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/agent-run

Bringt mit utils, kit, icon, reveal, motion, switch

Usage

<AgentRun variant="run-history" runs={[{ id, title, trigger, status, started, duration, cost, steps, summary }]} trend={[…]} stats={{ period, duration, spend }} />

Source

prompt-input

Prompt-Eingabe

Die Eingabe eines KI-Produkts mit einer Fähigkeit je Variante. Dateien mit Upload-Stand und Grenzen, Befehle mit Schrägstrich, Kontext per @ mit Anzeige, Modi mit Dauer und Kosten und Diktat, das unsichere Wörter markiert.

Mit Anhängen
Befehle mit Schrägstrich
Kontext mit @
Modi mit Schätzung
Diktieren

Props und Details

Mit Anhängen

Dateien per Ziehen oder Auswahl, jede mit Art, Größe und Upload-Fortschritt, eine klare Meldung bei zu großen Dateien und die Grenzen im Blick.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/prompt-input

Bringt mit utils, kit, icon, reveal

Usage

<PromptInput variant="attachments" attachments={[{ id, name, size, kind, progress }]} maxFiles={10} maxSizeMb={25} onSubmit={…} />

Source

Befehle mit Schrägstrich

Ein Schrägstrich öffnet die Befehle nach Gruppen, Pfeiltasten wählen, Enter macht daraus einen Baustein am Anfang der Nachricht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/prompt-input

Bringt mit utils, kit, icon, reveal

Usage

<PromptInput variant="slash-commands" commands={[{ id, label, description, icon, group }]} defaultValue="/" />

Source

Kontext mit @

Dokumente, Projekte und Personen per @ oder Auswahl, jeweils mit Größe, und eine Anzeige, die warnt, bevor der Kontext voll ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/prompt-input

Bringt mit utils, kit, icon, reveal

Usage

<PromptInput variant="context-mentions" contexts={[{ id, label, kind, detail, tokens }]} selected={["c1"]} contextLimit={128000} />

Source

Modi mit Schätzung

Schnelle Antwort, Recherche oder Schreiben als Auswahl mit gleitender Marke, jeder Modus mit Hinweis, Dauer und Kosten, dazu Websuche und längeres Nachdenken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/prompt-input

Bringt mit utils, kit, icon, reveal

Usage

<PromptInput variant="modes" modes={[{ id, label, icon, description, placeholder, time, cost }]} defaultMode="research" />

Source

Diktieren

Diktieren statt tippen, mit Live-Wellenform, Zeit und Mitschrift. Schwer verständliche Wörter sind beim Sprechen unterstrichen und stehen bis zum Senden unter dem Feld.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/prompt-input

Bringt mit utils, kit, icon, reveal

Usage

<PromptInput variant="voice-dictation" onListen={(push) => { /* speech to text */ return stop }} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben AI und Chat stehen.

Oberflächen für Produkte mit KI

Auf dieser Seite

Chatfenster

Eingabe mit Vorschlägen

Agenten-Schritte

Mit Verlauf

Antwort mit Quellen

Sprach-Widget

Live-Lauf

Werkzeugaufrufe

Freigaben

Plan prüfen

Verlauf der Läufe

Mit Anhängen

Befehle mit Schrägstrich

Kontext mit @

Modi mit Schätzung

Diktieren

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit