Was ist KI-Messaging-Streaming?Status der Aktivierung Kommunikations-Widget erstellen Testen Sie das Streaming-Erlebnis

So richten Sie Ihr agentisches Self-Service-Chat-Erlebnis von Anfang bis Ende ein

Anmerkung

Für Orchestration AI Agents muss das Chat-Streaming für Chat-Kontakte aktiviert sein. Wenn das Chat-Streaming nicht aktiviert ist, können einige Nachrichten nicht gerendert werden. Siehe Nachrichtenstreaming für AI-powered Chat aktivieren.

Was ist KI-Messaging-Streaming?

AI Message Streaming ist eine Connect-Customer-Funktion, die die progressive Anzeige der Antworten von AI-Agenten bei Chat-Interaktionen ermöglicht. Anstatt darauf zu warten, dass die KI eine vollständige Antwort generiert, bevor sie dem Kunden etwas zeigt, zeigt das Streaming den Text während der Generierung an, wodurch ein natürlicheres Konversationserlebnis entsteht.

So funktioniert’s

Bei Standard-Chat-Antworten warten Kunden, bis die KI ihre gesamte Antwort generiert, und dann erscheint die vollständige Nachricht auf einmal. Beim KI-Nachrichtenstreaming sehen Kunden eine wachsende Textblase, in der Wörter nach und nach erscheinen, während die KI sie generiert, ähnlich wie wenn sie jemandem in Echtzeit beim Tippen zuschauen.

Anmerkung

Offizielle Dokumentation: Die vollständige technische Referenz finden Sie unterNachrichtenstreaming für AI-powered Chat aktivieren.

Vorteile der progressiven Textanzeige

AI Message Streaming bietet mehrere wichtige Vorteile für das Kundenerlebnis:

Verkürzte wahrgenommene Wartezeit — Kunden sehen unmittelbare Aktivitäten, anstatt auf einen Ladespinner zu starren
Natürlicherer Gesprächsfluss — Progressiver Text ahmt menschliches Tippen nach und sorgt so für eine ansprechendere Interaktion
Bessere Interaktion — Kunden können damit beginnen, die Antwort zu lesen, während sie noch generiert wird
Meldungen zur Auftragsabwicklung — KI-Agenten können während der Bearbeitung Zwischennachrichten wie „Einen Moment, ich überprüfe Ihr Konto“ bereitstellen

Standard-Chat im Vergleich zum Streaming-Chat

In der folgenden Tabelle wird das Kundenerlebnis zwischen Standard-Chat und Streaming-Chat verglichen:

Aspekt	Standard-Chat	Chat streamen
Anzeige der Antwort	Die vollständige Meldung wird auf einmal angezeigt	Der Text erscheint progressiv (wachsende Blase)
Kundenerlebnis	Warten Sie auf die vollständige Antwort mit Ladeanzeige	Sehen Sie, wie Wörter in Echtzeit erscheinen
Wahrgenommene Wartezeit	Länger (auf vollständige Antwort warten)	Kürzer (sofortiges visuelles Feedback)
Konversation — Gefühl	Transaktional	Natürlich, als würde man mit einer Person chatten
Nachrichten zur Erfüllung	Nicht verfügbar	KI kann vorläufige Statusaktualisierungen senden
Umgang mit Lex Timeouts	Vorbehaltlich der Lex-Timeout-Grenzwerte	Beseitigt Lex-Timeout-Beschränkungen

Status der Aktivierung

Die Verfügbarkeit von AI Message Streaming hängt davon ab, wann Ihre Connect Customer-Instanz erstellt wurde und wie sie konfiguriert ist.

Automatische Aktivierung für neue Instanzen

Bei Connect Customer-Instances, die nach Dezember 2025 erstellt wurden, ist AI Message Streaming standardmäßig aktiviert. Das MESSAGE_STREAMING Instanzattribut wird true für diese Instances automatisch auf gesetzt, sodass keine zusätzliche Konfiguration erforderlich ist.

Wichtig

Wenn Sie eine Instanz AWS-Konto mit einer Connect Customer-Instanz verwenden, die vor Dezember 2025 erstellt wurde, müssen Sie AI Message Streaming möglicherweise manuell aktivieren. Folgen Sie den Anweisungen in der Dokumentation „Nachrichtenstreaming für AI-powered Chat aktivieren“, um das MESSAGE_STREAMING Attribut Ihrer Instanz zu überprüfen und es bei Bedarf zu aktivieren.

Amazon Lex Bot-Berechtigungen

AI Message Streaming benötigt die lex:RecognizeMessageAsync Erlaubnis, um ordnungsgemäß zu funktionieren. Diese Berechtigung ermöglicht es Connect Customer, die asynchrone Nachrichtenerkennungs-API aufzurufen, die Streaming-Antworten ermöglicht.

Für neue Lex-Bot-Verknüpfungen: Wenn Sie Ihrer Connect Customer-Instance einen neuen Amazon Lex-Bot zuordnen, ist die erforderliche lex:RecognizeMessageAsync Berechtigung automatisch in der ressourcenbasierten Richtlinie des Bots enthalten. Es ist keine zusätzliche Konfiguration erforderlich.

Wichtig

Wenn Sie einen Amazon Lex-Bot haben, der mit Ihrer Connect Customer-Instance verknüpft war, bevor AI Message Streaming aktiviert wurde, müssen Sie möglicherweise die ressourcenbasierte Richtlinie des Bots aktualisieren, um die Erlaubnis einzubeziehen. lex:RecognizeMessageAsync

So aktualisieren Sie Ihre bestehende Lex-Bot-Richtlinie:

Navigieren Sie zur Amazon Lex-Konsole
Wählen Sie Ihren Bot aus und gehen Sie zur Resource-based Richtlinie
Fügen Sie die lex:RecognizeMessageAsync Aktion der Grundsatzerklärung hinzu, die Connect-Kunden Zugriff gewährt
Speichern Sie die aktualisierte Richtlinie

Eine ausführliche Anleitung finden Sie im Abschnitt Lex-Bot-Berechtigungen in der AWS Dokumentation.

Das Connect Customer Communications Widget ist eine einbettbare Chat-Oberfläche, die Sie zu jeder Website hinzufügen können. In diesem Abschnitt erstellen und konfigurieren Sie ein Widget, um AI Message Streaming zu testen. Du kannst diesen Abschnitt überspringen, wenn du dein eigenes Kunden-Chat-Widget verwenden möchtest.

Navigieren Sie in der Connect Customer-Konsole zu Ihrer Instanz
Wählen Sie im linken Navigationsmenü Kanäle aus
Wählen Sie das Kommunikations-Widget
Sie werden die Verwaltungsseite des Kommunikations-Widgets sehen

Anmerkung

Was ist das Kommunikations-Widget? Das Communications Widget ist die sofort einsatzbereite Chat-Lösung von Connect Customer. Es bietet eine voll funktionsfähige Chat-Oberfläche, die Sie mit einem einfachen JavaScript Snippet in Websites einbetten können. Das Widget bewältigt die gesamte Komplexität des Verbindungsaufbaus, der Verwaltung von Sitzungen und der Anzeige von Nachrichten.

Wählen Sie Widget hinzufügen, um ein neues Kommunikations-Widget zu erstellen
Geben Sie folgende Details ein:
- Name (Name: AI-Streaming-Demo-Widget
- Description (Beschreibung: Widget for testing AI Message Streaming
Vergewissern Sie sich, dass unter Kommunikationsoptionen die Option Chat hinzufügen ausgewählt ist
Wählen Sie Self Service Test Flow als Ihren Chat-Kontaktablauf aus
Wählen Sie Speichern und fahren Sie mit der Konfigurationsseite fort

Contact Flow Selection

Stellen Sie sicher, dass Sie einen Kontaktablauf auswählen, der:

Hat die Grundeinstellungen konfiguriert (erstellt eine AI-Sitzung, Protokollierung usw.)
Leitet mit AI Agent-Integration zu Ihrem Lex-Bot
Hat eine korrekte Fehlerbehandlung bei Verbindungsabbrüchen

Wenn Sie noch keinen Kontakt-Flow erstellt haben, schließen Sie zuerst den Abschnitt „Flow erstellen“ ab.

Passen Sie das Erscheinungsbild Ihres Chat-Widgets an Ihre Marke an und wählen Sie Speichern und fortfahren.

Schritt 4: Zulässige Domains konfigurieren

Das Kommunikations-Widget wird nur auf Websites geladen, die ausdrücklich zugelassen sind. Diese Sicherheitsfunktion verhindert die unbefugte Verwendung Ihres Widgets.

Scrollen Sie nach unten zu Erlaubte Domains
Wähle Domain hinzufügen und füge die folgende Domain für Localhost-Tests hinzu:
- http://localhost
Wählen Sie unter Sicherheit Nein aus
Wenn Sie die Bereitstellung später auf einer Produktionswebsite planen, fügen Sie auch diese Domänen hinzu und stellen Sie sicher, dass Sie die Sicherheit konfigurieren (z. B.https://www.example.com)

Wählen Sie Speichern und fahren Sie mit dem Speichern Ihrer Widget-Konfiguration fort
Nach der Erstellung wird die Widget-Detailseite mit Ihrem Einbettungscode angezeigt
Wichtig: Kopiere und speichere die folgenden Werte aus dem eingebetteten Codeausschnitt:
- Client-URI — Die URL zur Widget-Datei JavaScript
- Widget-ID — Eine eindeutige Kennung für Ihr Widget
- Snippet-ID — Eine Konfigurationszeichenfolge Base64-encoded

Schritt 6: Lokale Testumgebung einrichten

Um das Widget lokal zu testen, erstellen Sie eine einfache HTML-Datei, die das Kommunikations-Widget lädt.

Erstellen Sie zum Testen einen neuen Ordner auf Ihrem Computer (z. B.ai-streaming-test)
Laden Sie das Hintergrundbild für die Demoseite herunter und speichern Sie es wie background.jpg in Ihrem Testordner
Erstellen Sie index.html in Ihrem Testordner eine neue Datei mit dem folgenden Inhalt:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

Schritt 7: Platzhalterwerte ersetzen

Ersetzen Sie die Platzhalterwerte in der HTML-Datei durch Ihre tatsächlichen Widget-Werte:

Placeholder	Ersetzen durch	Beispiel
`REPLACE_WITH_CLIENT_URI`	Ihr Client-URI aus Schritt 5	`https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js`
`REPLACE_WITH_WIDGET_ID`	Ihre Widget-ID aus Schritt 5	`amazon_connect_widget_abc123`
`REPLACE_WITH_SNIPPET_ID`	Deine Snippet-ID aus Schritt 5	`QVFJREFIaWJYbG...`(lange Base64-Zeichenfolge)

Schritt 8: Starten Sie einen lokalen Webserver

Um das Widget zu testen, müssen Sie die HTML-Datei von einem lokalen Webserver aus bereitstellen. Hier sind mehrere Optionen:

Option A: Python (falls installiert)


python -m http.server 8001

Option B: Node.js (falls installiert)


npx http-server -p 8001

Option C: VS Code Live-Servererweiterung

Installieren Sie die Erweiterung „Live Server“ in VS Code
Öffnen Sie das Kontextmenü für on index.html und wählen Sie „Mit Live Server öffnen“

Öffnen Sie nach dem Start des Servers Ihren Browser und navigieren Sie zu: http://localhost:8001

Sie sollten die Demo-Seite mit einer orangefarbenen Chat-Schaltfläche sehen.

Testen Sie das Streaming-Erlebnis

Jetzt, da Ihr Widget geladen ist, ist es an der Zeit, AI Message Streaming zu testen und die progressive Textanzeige in Aktion zu beobachten.

Worauf Sie achten sollten: Streaming vs Non-Streaming

Wenn Sie den Unterschied zwischen Streaming-Antworten und Antworten ohne Streaming kennen, können Sie überprüfen, ob AI Message Streaming funktioniert:

Behavior	Non-Streaming (Standard)	Streaming (KI-Nachrichtenstreaming)
Erste Anzeige	Anzeige wird geladen oder Punkte eingegeben	Der Text wird sofort angezeigt
Erscheinungsbild des Textes	Die vollständige Nachricht wird auf einmal angezeigt	Wörter erscheinen nach und nach (wachsende Blase)
Zeitpunkt der Reaktion	Warte, bis die KI die Generierung abgeschlossen hat	Sehen Sie sich die Antwort an, während sie generiert wird
Visueller Effekt	„Pop“ des kompletten Textes	Geschmeidiger, fließender Text, als würde man jemandem beim Tippen zuschauen

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Verwenden Sie den agentischen Self-Service

(veraltet) Verwenden Sie generativen Self-Service AI-powered

So richten Sie Ihr agentisches Self-Service-Chat-Erlebnis von Anfang bis Ende ein

Anmerkung

Was ist KI-Messaging-Streaming?

So funktioniert’s

Anmerkung

Vorteile der progressiven Textanzeige

Standard-Chat im Vergleich zum Streaming-Chat

Status der Aktivierung

Automatische Aktivierung für neue Instanzen

Wichtig

Amazon Lex Bot-Berechtigungen

Wichtig

Kommunikations-Widget erstellen

Schritt 1: Navigieren Sie zum Kommunikations-Widget

Anmerkung

Schritt 2: Erstellen Sie ein neues Widget

Contact Flow Selection

Schritt 3: Passen Sie das Aussehen des Widgets an

Schritt 4: Zulässige Domains konfigurieren

Schritt 5: Widget-Code speichern und abrufen

Schritt 6: Lokale Testumgebung einrichten

Schritt 7: Platzhalterwerte ersetzen

Schritt 8: Starten Sie einen lokalen Webserver

Option A: Python (falls installiert)

Option B: Node.js (falls installiert)

Option C: VS Code Live-Servererweiterung

Testen Sie das Streaming-Erlebnis

Worauf Sie achten sollten: Streaming vs Non-Streaming