Bereiche

KI-Oberflächen

Chats, Antworten mit Quellen, Agenten und Einstellungen für Produkte mit KI. Gebaut, um klar zu zeigen, was die KI getan hat, woher es stammt und wo ein Mensch entscheidet.

Auf dieser Seite

Die KI-Kategorien#

Die KI-Oberflächen verteilen sich auf die Kategorien unten, eine davon für Marketing-Sections. Alle zeigen erfundene Antworten aus Props, das Modell bindest du selbst an.

Kategorie	Components	Wofür
AI und Chat	ai-chat, prompt-input, agent-run	Der Chat selbst, das Eingabefeld und Agenten bei der Arbeit.
KI-Antworten	citations, feedback-on-answer, compare-outputs, ai-search	Antworten mit Quellen, Prüfungen, Vergleichen und Feedback.
KI-Schreiben und Erstellen	writing-assistant, generation-gallery, prompt-library	Schreibhilfe, erzeugte Bilder und Prompt-Bibliotheken.
KI-Einrichtung	model-picker, ai-settings, ai-onboarding	Modelle, Gedächtnis, Datenkontrolle und die ersten Schritte.
KI-Assistenten	chat-widget, voice-assistant	Support-Chat für Websites und Sprachassistenten für Anrufe.
AI Features	ai-features	Marketing-Sections, die zeigen, was KI in einem Produkt leistet.

Jede Kategorie hat ihre Seite mit Live-Vorschau, etwa KI-Antworten oder KI-Assistenten.

Ehrlich gestaltet#

Vertrauen in ein KI-Produkt entsteht, wenn Menschen sehen, was die KI getan hat. Die Components sind darauf gebaut.

Wo eine KI antwortet, steht es dabei. Chat-Widget und KI-Suche tragen einen festen Hinweis, dass Antworten von einer KI stammen und falsch sein können. Der Wortlaut lässt sich über labels ändern, der Hinweis bleibt sichtbar auf der Seite.
Unsicherheit wird gezeigt, nicht versteckt. AiSearch nimmt confidence und caveats, die Belegprüfung in Citations markiert Aussagen ohne Quelle.
Ein Mensch ist erreichbar. Das Chat-Widget hat eine Übergabe an das Team mit Warteschlange, oder die Antwort kommt per E-Mail.
Was die KI über jemanden weiß, ist sichtbar und löschbar. AiSettings zeigt Gedächtnis, Anweisungen und Datenkontrolle.
Feedback ist eine Einladung. FeedbackOnAnswer fragt nach dem Grund und nimmt eine Korrektur an.

Quellen#

Eine Antwort mit Quelle lässt sich prüfen. In answer stehen Absätze mit Verweisen wie [1] oder [1, 2], sources trägt die Quellen mit derselben id. Im Auszug markieren ==doppelte Gleichheitszeichen== die Worte, auf die sich die Antwort stützt.

Citations, Variante claim-checkIn Components ansehen

import { Citations } from '@/components/ui/citations';

<Citations
  variant="source-cards"
  question="Wie viel Strom braucht eine Wärmepumpe?"
  answer={[
    'Ein übliches Einfamilienhaus braucht **3.500 bis 5.000 kWh** im Jahr [1]. Ältere Häuser liegen am oberen Ende [1, 2].',
  ]}
  sources={[
    { id: 1, title: 'Wärmepumpen im Bestand', site: 'energy-agency.example', href: 'https://energy-agency.example/heat-pumps', date: 'März 2026', kind: 'paper' },
    { id: 2, title: 'Dein Angebot, Seite 3', site: 'Ordner Angebote', kind: 'doc', excerpt: 'Geplanter Verbrauch ==4.200 kWh im Jahr==.' },
  ]}
/>

Die Variante claim-check nimmt claims mit Status supported, partial oder missing und zeigt, welche Aussage wie gut belegt ist.

Freigaben#

Handelt ein Agent in der echten Welt, entscheidet ein Mensch. AgentRun zeigt das in mehreren Formen. approval-queue sammelt wartende Aktionen mit Grund, Risiko und den genauen Änderungen, plan-review lässt den Plan vor dem Start prüfen und Rechte setzen. Im Chat hält ein Schritt mit Freigabe den Lauf an, bis jemand bestätigt.

import { AgentRun } from '@/components/ui/agent-run';

<AgentRun
  variant="approval-queue"
  approvals={[
    {
      id: 'a1',
      agent: 'Buchhaltungs-Agent',
      run: 'Zahlungserinnerungen September',
      action: '12 Zahlungserinnerungen senden',
      icon: 'mail',
      risk: 'medium',
      reason: 'Die Rechnungen sind seit mehr als 14 Tagen fällig.',
      changes: [{ field: 'Status', before: 'Offen', after: 'Erinnert' }],
      requested: 'vor 4 Min.',
    },
  ]}
/>

Dein Modell anbinden#

Wo Antworten entstehen, nimmt die Component eine Funktion. respond im Chat-Widget und onAction in der Schreibhilfe geben einen Text oder ein Promise zurück, onSubmit liefert Feedback und Korrekturen an dich. Ohne Funktion zeigen sie ihre Beispielantworten.

import { ChatWidget } from '@/components/ui/chat-widget';
import { FeedbackOnAnswer } from '@/components/ui/feedback-on-answer';

<ChatWidget
  variant="handoff"
  name="Lumen Hilfe"
  greeting="Hallo, frag mich alles zu deiner Bestellung."
  agent={{ name: 'Mara Lindqvist', role: 'Support', initials: 'ML' }}
  respond={(text) => ask(text)}
/>

<FeedbackOnAnswer
  variant="thumbs"
  answer={{ question: 'Kann ich reduzierte Ware zurückgeben?', text: 'Ja, innerhalb von 30 Tagen, ungetragen und mit Beleg.' }}
  onSubmit={(value) => save(value)}
/>

// Läuft im Browser und ruft deinen eigenen Endpunkt auf
async function ask(text: string): Promise<string> {
  const res = await fetch('/api/answer', { method: 'POST', body: JSON.stringify({ text }) });
  return res.ok ? (await res.json()).answer : 'Da hing kurz die Verbindung. Ein Mensch aus dem Team liest mit.';
}