Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# So richten Sie Ihr durchgängiges Self-Service-Chat-Erlebnis für Agenten ein
<a name="setup-agentic-selfservice-end-to-end"></a>

**Anmerkung**  
Orchestrierung Für KI-Agenten muss das Chat-Streaming für Chat-Kontakte aktiviert sein. Ohne aktiviertes Chat-Streaming können einige Nachrichten nicht gerendert werden. Siehe [Nachrichtenstreaming für KI-gestützten Chat aktivieren](message-streaming-ai-chat.md).

## Was ist AI Messaging Streaming?
<a name="what-is-ai-message-streaming"></a>

AI Message Streaming ist eine Amazon Connect Connect-Funktion, die die **progressive Anzeige von Antworten von KI-Agenten** während Chat-Interaktionen ermöglicht. Anstatt darauf zu warten, dass die KI eine vollständige Antwort generiert, bevor sie dem Kunden etwas zeigt, wird beim Streaming der Text während der Generierung angezeigt, was zu einem natürlicheren Konversationserlebnis führt.

### So funktioniert’s
<a name="how-streaming-works"></a>

Bei Standard-Chat-Antworten warten die 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 schrittweise 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 unter[Nachrichtenstreaming für KI-gestützten Chat aktivieren](message-streaming-ai-chat.md).

### Vorteile der progressiven Textanzeige
<a name="benefits-progressive-text"></a>

KI-Nachrichtenstreaming bietet mehrere wichtige Vorteile für das Kundenerlebnis:
+ **Verkürzte gefühlte Wartezeit** — Kunden sehen sofortige Aktivitäten, anstatt auf ein Ladespinner zu starren
+ **Natürlicherer Gesprächsfluss** — Progressiver Text ahmt das Tippen von Menschen nach und sorgt so für eine ansprechendere Interaktion
+ **Besseres Engagement** — Kunden können beginnen, die Antwort zu lesen, während sie noch generiert wird
+ **Erfolgsmeldungen** — KI-Agenten können während der Bearbeitung Zwischennachrichten wie „Einen Moment, während ich Ihr Konto überprüfe“ bereitstellen

### Standard-Chat im Vergleich zum Streaming-Chat
<a name="standard-vs-streaming-chat"></a>

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


| Aspekt | Standard-Chat | Streaming-Chat | 
| --- | --- | --- | 
| Anzeige der Antwort | Die vollständige Meldung wird auf einmal angezeigt | Der Text erscheint schrittweise (wachsende Blase) | 
| Kundenerlebnis | Warten Sie auf die vollständige Antwort mit Ladeanzeige | Sehen Sie, wie Wörter in Echtzeit erscheinen | 
| Empfundene Wartezeit | Länger (Warten auf vollständige Antwort) | Kürzer (sofortiges visuelles Feedback) | 
| Gesprächsgefühl | Transaktional | Natürlich, wie mit einer Person zu chatten | 
| Botschaften zur Erfüllung | Nicht verfügbar | KI kann vorläufige Status-Updates senden | 
| Umgang mit Lex Timeout | Vorbehaltlich der Lex Timeout-Limits | Beseitigt Lex-Timeout-Einschränkungen | 

## Aktivierungsstatus
<a name="enablement-status"></a>

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

### Automatische Aktivierung für neue Instances
<a name="automatic-enablement-new-instances"></a>

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

**Wichtig**  
Wenn Sie ein AWS Konto mit einer Amazon Connect Connect-Instance 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 KI-gestützten Chat aktivieren](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html), um das `MESSAGE_STREAMING` Attribut Ihrer Instance zu überprüfen und es bei Bedarf zu aktivieren.

### Amazon Lex Bot-Berechtigungen
<a name="amazon-lex-bot-permissions"></a>

AI Message Streaming erfordert die `lex:RecognizeMessageAsync` entsprechende Genehmigung, um korrekt zu funktionieren. Diese Berechtigung ermöglicht Amazon Connect, die asynchrone Nachrichtenerkennungs-API aufzurufen, die Streaming-Antworten ermöglicht.

**Für neue Lex-Bot-Zuordnungen**: Wenn Sie Ihrer Amazon Connect-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 Lex-Bot haben, der mit Ihrer Amazon Connect Connect-Instance verknüpft war, **bevor** AI Message Streaming aktiviert wurde, müssen Sie möglicherweise die ressourcenbasierte Richtlinie des Bots aktualisieren, um die `lex:RecognizeMessageAsync` Genehmigung einzubeziehen.  
So aktualisieren Sie Ihre bestehende Lex-Bot-Richtlinie:  
Navigieren Sie zur Amazon Lex Lex-Konsole
Wählen Sie Ihren Bot aus und gehen Sie zu **Ressourcenbasierte Richtlinie**
Fügen Sie die `lex:RecognizeMessageAsync` Aktion zur Richtlinienerklärung hinzu, die Amazon Connect Connect-Zugriff gewährt
Speichern Sie die aktualisierte Richtlinie
Eine ausführliche Anleitung finden Sie im Abschnitt [Lex-Bot-Berechtigungen](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions) in der AWS Dokumentation.

## Kommunikations-Widget erstellen
<a name="create-communications-widget"></a>

Das Amazon Connect 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 zum Testen von AI Message Streaming. Sie können diesen Abschnitt überspringen, wenn Sie Ihr eigenes Kunden-Chat-Widget verwenden möchten.

### Schritt 1: Navigieren Sie zum Kommunikations-Widget
<a name="navigate-to-widget"></a>

1. Navigieren Sie in der Amazon Connect Connect-Konsole zu Ihrer Instance

1. Klicken Sie im linken Navigationsmenü auf **Kanäle**

1. Klicken Sie auf das **Kommunikations-Widget**

1. Sie sehen die Verwaltungsseite des Kommunikations-Widgets

**Anmerkung**  
**Was ist das Kommunikations-Widget?** Das Communications Widget ist die out-of-the-box Chat-Lösung von Amazon Connect. Es bietet eine voll funktionsfähige Chat-Oberfläche, die Sie mithilfe eines einfachen JavaScript Snippets in Websites einbetten können. Das Widget bewältigt die gesamte Komplexität des Verbindungsaufbaus, der Sitzungsverwaltung und der Anzeige von Nachrichten.

### Schritt 2: Erstellen Sie ein neues Widget
<a name="create-new-widget"></a>

1. Klicken Sie auf **Widget hinzufügen**, um ein neues Kommunikations-Widget zu erstellen

1. Geben Sie folgende Details ein:
   + **Name (Name:** **AI-Streaming-Demo-Widget**
   + **Description (Beschreibung:** **Widget for testing AI Message Streaming**

1. Stellen **Sie sicher, dass unter **Kommunikationsoptionen** die Option Chat hinzufügen** ausgewählt ist

1. Wählen Sie **Self Service Test Flow** als Chat-Kontaktablauf

1. Klicken Sie auf **Speichern und fahren Sie fort**, um zur Konfigurationsseite zu gelangen

**Auswahl von Contact Flow**  
Stellen Sie sicher, dass Sie einen Kontaktablauf auswählen, der:  
Hat die Grundeinstellungen konfiguriert (erstellt eine KI-Sitzung, Protokollierung usw.)
Routen zu Ihrem Lex-Bot mit AI Agent-Integration
Verfügt über eine korrekte Fehlerbehandlung bei Verbindungsabbrüchen
Wenn Sie noch keinen Kontakt-Flow erstellt haben, schließen Sie zuerst den Abschnitt [Flow erstellen](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/) ab.

### Schritt 3: Passen Sie das Aussehen des Widgets an
<a name="customize-widget-appearance"></a>

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

### Schritt 4: Zulässige Domains konfigurieren
<a name="configure-allowed-domains"></a>

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

1. Scrollen Sie nach unten zu **Zulässige Domains**

1. Klicken Sie auf **Domain hinzufügen** und fügen Sie die folgende Domain für Localhost-Tests hinzu:
   + **http://localhost**

1. Wählen Sie unter **Sicherheit die Option Nein** aus

1. Wenn Sie die Bereitstellung später auf einer Produktionswebsite planen, fügen Sie auch diese Domains hinzu und stellen Sie sicher, dass Sie die Sicherheit konfigurieren **https://www.example.com** (z. B.

### Schritt 5: Widget-Code speichern und abrufen
<a name="save-get-widget-code"></a>

1. Klicken Sie auf **Speichern und fahren Sie fort**, um Ihre Widget-Konfiguration zu speichern

1. Nach der Erstellung wird die Seite mit den **Widget-Details** und Ihrem Einbettungscode angezeigt

1. **Wichtig**: Kopiere und speichere die folgenden Werte aus dem Einbettungscode-Snippet:
   + **Client-URI** — Die URL zur Widget-Datei JavaScript 
   + **Widget-ID** — Eine eindeutige Kennung für Ihr Widget
   + **Snippet-ID** — Eine Base64-kodierte Konfigurationszeichenfolge

### Schritt 6: Richten Sie die lokale Testumgebung ein
<a name="setup-local-testing"></a>

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

1. Erstellen Sie zum Testen einen neuen Ordner auf Ihrem Computer `ai-streaming-test` (z. B.

1. Laden Sie das Hintergrundbild für die Demoseite herunter und speichern Sie es wie `background.jpg` in Ihrem Testordner

1. Erstellen Sie eine neue Datei namens `index.html` in Ihrem Testordner 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
<a name="replace-placeholder-values"></a>

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


| Placeholder | Ersetze durch | Beispiel | 
| --- | --- | --- | 
| REPLACE\_WITH\_CLIENT\_URI | Ihre 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
<a name="start-local-web-server"></a>

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
+ Klicken Sie mit der rechten Maustaste auf `index.html` und wählen Sie „Mit Live Server öffnen“

Nachdem Sie den Server gestartet haben, öffnen Sie Ihren Browser und navigieren Sie zu: `http://localhost:8001`

Sie sollten die Demo-Seite mit einer orangefarbenen Chat-Schaltfläche in der unteren rechten Ecke sehen.

## Testen Sie das Streaming-Erlebnis
<a name="test-streaming-experience"></a>

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 im Vergleich zu Non-Streaming
<a name="what-to-look-for"></a>

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


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