KI-Assistenten

Support-Chat für Websites und Sprachassistenten für Anrufe.

2 Components · 9 Variants

Kategorie wechseln

chat-widget

Chat-Widget

Ein Support-Chat für Websites mit einem Starter samt Hilfe-Start, einem Gespräch mit KI-Hinweis und Schnellantworten, der Übergabe an einen Menschen mit Warteschlange, einem Kontaktformular im Chat und einer KI-Antwort direkt auf der Hilfeseite.

Starter mit Startseite
Gespräch
Übergabe an einen Menschen
Kontaktformular im Chat
Antwort auf der Hilfeseite

Props und Details

Starter mit Startseite

Ein runder Knopf in der Ecke mit kurzem Anstoß. Geöffnet zeigt er Begrüßung, Fragefeld, Schnellaktionen und beliebte Artikel, Telefone bekommen ein ganzes Panel.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/chat-widget

Bringt mit utils, kit, icon, reveal

Usage

<ChatWidget variant="launcher" name="…" greeting="…" actions={[{ id, label, icon, prompt }]} articles={[{ id, title, meta, href }]} />

Source

Gespräch

Der offene Chat mit klarem Hinweis, dass eine KI antwortet, Quellen unter Antworten, Schnellantworten und Schreibanzeige. Enter sendet.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/chat-widget

Bringt mit utils, kit, icon, reveal

Usage

<ChatWidget variant="conversation" name="…" messages={[{ id, from, text, time, sources }]} suggestions={[…]} respond={async (text) => …} />

Source

Übergabe an einen Menschen

Der Bot übergibt, die Warteschlange zählt beim Hereinscrollen herunter, dann kommt der Mensch mit dem bisherigen Verlauf dazu. Statt zu warten geht auch E-Mail.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/chat-widget

Bringt mit utils, kit, icon, reveal

Usage

<ChatWidget variant="handoff" name="…" messages={[…]} queue={{ position: 3, wait: "2 min" }} agent={{ name, role, initials, greeting }} />

Source

Kontaktformular im Chat

Der Bot fragt im Gespräch nach Name und E-Mail, mit Einwilligung und Link zur Datenschutzerklärung. Fehler sagen, was zu tun ist.

Im Studio öffnen

Antwort auf der Hilfeseite

Eine Suche, die antwortet. Die KI-Antwort aus den Hilfeartikeln steht direkt unter dem Feld, mit Link zum Artikel, kurzer Rückfrage und dem Weg zum Team.

Im Studio öffnen

voice-assistant

Sprachassistent

Sprachoberflächen in vier Formen. Ein Gespräch um eine Kugel, die zuhört, nachdenkt und spricht, mit Live-Untertiteln, die Mitschrift eines Anrufs mit Wiedergabe und Zusammenfassung, eine Stimme mit Hörproben wählen und Halten zum Sprechen mit Sprachnachrichten.

Sprachgespräch
Anrufmitschrift
Stimme wählen
Halten zum Sprechen

Props und Details

Sprachgespräch

Eine ruhige dunkle Bühne. Die Kugel wirft Wellen, wenn sie zuhört, dreht sich beim Nachdenken und pulsiert beim Sprechen. Untertitel schreiben mit und lassen sich ausschalten, Mikrofon und Beenden sind ein Tipp.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/voice-assistant

Bringt mit utils, kit, icon, reveal, motion

Usage

<VoiceAssistant variant="orb" name="…" lines={[{ id, speaker, text }]} note="…" />

Source

Anrufmitschrift

Ein Anruf, den der Assistent angenommen hat, mit Wellenform mit Wiedergabe und Suchen, die Mitschrift folgt dem Ton, und jede Zeile springt zu ihrer Stelle. Ergebnis und Vereinbartes stehen daneben.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/voice-assistant

Bringt mit utils, kit, icon, reveal, motion

Usage

<VoiceAssistant variant="call-transcript" call={{ caller, number, duration, date, outcome }} lines={[{ id, speaker, text, at }]} summary={[{ label, value }]} />

Source

Stimme wählen

Stimmen zur Auswahl mit Charakter, Sprachen und Beispielsatz. Abspielen bewegt die Wellenform, Tempo und Tonhöhe stimmen die gewählte fein ab.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/voice-assistant

Bringt mit utils, kit, icon, reveal, motion

Usage

<VoiceAssistant variant="voice-picker" voices={[{ id, name, character, languages, sample, tag }]} defaultVoice="nova" />

Source

Halten zum Sprechen

Für Hände, die beschäftigt sind. Knopf oder Leertaste halten, loslassen zum Senden. Sprachnachrichten zeigen Länge und Text, der sich ein- und ausblenden lässt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/voice-assistant

Bringt mit utils, kit, icon, reveal, motion

Usage

<VoiceAssistant variant="push-to-talk" name="…" lines={[{ id, speaker, text, duration }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben KI-Assistenten stehen.

Starter mit Startseite

Gespräch

Übergabe an einen Menschen

Kontaktformular im Chat

Antwort auf der Hilfeseite

Sprachgespräch

Anrufmitschrift

Stimme wählen

Halten zum Sprechen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit