翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# エージェントセルフサービスチャットエクスペリエンスをエンドツーエンドで設定する方法
<a name="setup-agentic-selfservice-end-to-end"></a>

**注記**  
オーケストレーション AI エージェントでは、チャットコンタクトに対してチャットストリーミングを有効にする必要があります。チャットストリーミングを有効にしないと、一部のメッセージはレンダリングに失敗します。「[AI を活用したチャットのメッセージストリーミングを有効にする](message-streaming-ai-chat.md)」を参照してください。

## AI メッセージングストリーミングとは
<a name="what-is-ai-message-streaming"></a>

AI メッセージストリーミングは、チャットインタラクション中に **AI エージェントレスポンスをプログレッシブに表示**できるようにする Amazon Connect 機能です。AI が顧客に何も表示する前に完全なレスポンスを生成するのを待つ代わりに、ストリーミングは生成中にテキストを表示し、より自然で会話的なエクスペリエンスを作成します。

### 仕組み
<a name="how-streaming-works"></a>

標準のチャットレスポンスでは、お客様は AI がレスポンス全体を生成するまで待機し、完全なメッセージが一度にすべて表示されます。AI Message Streaming を使用すると、AI が生成するにつれて単語が徐々に出現する**テキストバブルが増え**、リアルタイムで誰かのタイプを見るのと同様に表示されます。

**注記**  
**公式ドキュメント**: 完全な技術リファレンスについては、「」を参照してください[AI を活用したチャットのメッセージストリーミングを有効にする](message-streaming-ai-chat.md)。

### プログレッシブテキスト表示の利点
<a name="benefits-progressive-text"></a>

AI メッセージストリーミングは、カスタマーエクスペリエンスにいくつかの重要な利点をもたらします。
+ **認識される待機時間の短縮** - 顧客はローディングスピナーを見つめるのではなく、すぐにアクティビティを確認できます。
+ **より自然な会話フロー** - プログレッシブテキストは人間のタイピングを模倣し、より魅力的なやり取りを生み出す
+ **エンゲージメントの向上** - 顧客は、まだ生成されている間にレスポンスの読み取りを開始できます。
+ **フルフィルメントメッセージ** - AI エージェントは、処理中に「アカウントを確認する一瞬」などの中間メッセージを提供できます

### 標準チャットとストリーミングチャット
<a name="standard-vs-streaming-chat"></a>

次の表は、標準チャットとストリーミングチャットのカスタマーエクスペリエンスを比較したものです。


| 側面 | 標準チャット | ストリーミングチャット | 
| --- | --- | --- | 
| レスポンスの表示 | 完全なメッセージが一度にすべて表示される | テキストが徐々に表示される (バブルが大きくなる) | 
| カスタマーエクスペリエンス | ロードインジケータ付きのフルレスポンスを待機する | リアルタイムに表示される単語を表示する | 
| 認識された待機時間 | Longer (完全応答待ち) | 短い (視覚的な即時フィードバック) | 
| 会話のフィール | トランザクション | 人とチャットするなど、自然 | 
| フルフィルメントメッセージ | 利用不可 | AI が中間ステータスの更新を送信できる | 
| Lex タイムアウト処理 | Lex タイムアウト制限の対象 | Lex タイムアウトの制限を排除 | 

## 有効化ステータス
<a name="enablement-status"></a>

AI メッセージストリーミングの可用性は、Amazon Connect インスタンスが作成されたタイミングと設定方法によって異なります。

### 新しいインスタンスの自動有効化
<a name="automatic-enablement-new-instances"></a>

**2025 年 12 月以降に**作成された Amazon Connect インスタンスでは、AI メッセージストリーミングがデフォルトで有効になっています。これらの`MESSAGE_STREAMING`インスタンス`true`のインスタンス属性は自動的に に設定されているため、追加の設定は必要ありません。

**重要**  
**2025 年 12 月より前に**作成された Amazon Connect インスタンスで AWS アカウントを使用している場合は、AI メッセージストリーミングを手動で有効にする必要がある場合があります。[AI を活用したチャットのメッセージストリーミングを有効にする](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html)ドキュメントの指示に従って、インスタンスの `MESSAGE_STREAMING` 属性を確認し、必要に応じて有効にします。

### Amazon Lex ボットのアクセス許可
<a name="amazon-lex-bot-permissions"></a>

AI メッセージストリーミングを正しく機能させるには、 アクセス`lex:RecognizeMessageAsync`許可が必要です。このアクセス許可により、Amazon Connect はストリーミングレスポンスを有効にする非同期メッセージ認識 API を呼び出すことができます。

**新しい Lex ボットの関連付け**の場合: 新しい Amazon Lex ボットを Amazon Connect インスタンスに関連付けると、必要な`lex:RecognizeMessageAsync`アクセス許可が自動的に**ボットのリソースベースのポリシーに含まれ**ます。追加の設定は必要ありません。

**重要**  
AI メッセージストリーミングが有効になる**前に** Amazon Connect インスタンスに関連付けられた Amazon Lex ボットがある場合は、ボットのリソースベースのポリシーを更新して アクセス`lex:RecognizeMessageAsync`許可を含める必要がある場合があります。  
既存の Lex ボットポリシーを更新するには:  
Amazon Lex コンソールに移動する
ボットを選択し、**リソースベースのポリシー**に移動する
Amazon Connect アクセスを許可するポリシーステートメントに `lex:RecognizeMessageAsync`アクションを追加する
更新されたポリシーを保存する
詳細な手順については、 AWS ドキュメントの [Lex ボットのアクセス許可](https://docs.aws.amazon.com/connect/latest/adminguide/message-streaming-ai-chat.html#lex-bot-permissions)セクションを参照してください。

## 通信ウィジェットの作成
<a name="create-communications-widget"></a>

Amazon Connect Communications Widget は、任意のウェブサイトに追加できる埋め込み可能なチャットインターフェイスです。このセクションでは、AI メッセージストリーミングをテストするウィジェットを作成して設定します。独自のカスタマーチャットウィジェットを使用する場合は、このセクションをスキップできます。

### ステップ 1: Communications Widget に移動する
<a name="navigate-to-widget"></a>

1. Amazon Connect コンソールで、インスタンスに移動します。

1. 左側のナビゲーションメニューで**チャネル**をクリックします。

1. **コミュニケーションウィジェット**をクリックします。

1. Communications Widget 管理ページが表示されます。

**注記**  
**Communications Widget とは** Communications Widget は、Amazon Connect out-of-the-boxチャットソリューションです。シンプルな JavaScript スニペットを使用してウェブサイトに埋め込むことができる、完全に機能するチャットインターフェイスを提供します。ウィジェットは、接続の確立、セッションの管理、メッセージの表示の複雑さをすべて処理します。

### ステップ 2: 新しいウィジェットを作成する
<a name="create-new-widget"></a>

1. **ウィジェットの追加**をクリックして、新しいコミュニケーションウィジェットを作成します。

1. 次の詳細情報を入力します。
   + **名前:** **AI-Streaming-Demo-Widget**
   + **説明:** **Widget for testing AI Message Streaming**

1. **コミュニケーションオプション**で**チャットの追加**が選択されていることを確認します

1. チャット問い合わせ**フローとしてセルフサービステスト**フローを選択する

1. **保存**をクリックして設定ページに進みます

**問い合わせフローの選択**  
次の問い合わせフローを選択してください。  
基本設定が設定されている (AI セッション、ログ記録などを作成)
AI エージェント統合を使用して Lex ボットにルーティングする
切断に対する適切なエラー処理がある
問い合わせフローをまだ作成していない場合は、まず[フローの作成](https://catalog.workshops.aws/amazon-q-in-connect/en-US/03-Self-Service-Track/01-ai-agent-configuration/04-creating-flow/)セクションを完了します。

### ステップ 3: ウィジェットの外観をカスタマイズする
<a name="customize-widget-appearance"></a>

ブランドに合わせてチャットウィジェットのルックアンドフィールをカスタマイズし、**保存して続行**を選択します。

### ステップ 4: 許可されたドメインを設定する
<a name="configure-allowed-domains"></a>

Communications Widget は、明示的に許可されているウェブサイトにのみロードされます。このセキュリティ機能は、ウィジェットの不正使用を防止します。

1. **許可されたドメインまで下にスクロールする**

1. **ドメインを追加**をクリックし、localhost テスト用に次のドメインを追加します。
   + **http://localhost**

1. セキュリティで **No** を選択する

1. 後で本番稼働用ウェブサイトにデプロイする場合は、それらのドメインも追加し、セキュリティ (例: **https://www.example.com**) を設定してください。

### ステップ 5: ウィジェットコードを保存して取得する
<a name="save-get-widget-code"></a>

1. 保存をクリックし**、ウィジェット設定の保存を続行**します

1. 作成後、埋め込みコードを含む**ウィジェットの詳細**ページが表示されます。

1. **重要**: 埋め込みコードスニペットから次の値をコピーして保存します。
   + **クライアント URI** - ウィジェット JavaScript ファイルへの URL
   + **ウィジェット ID** - ウィジェットの一意の識別子
   + **スニペット ID** - Base64-encoded設定文字列

### ステップ 6: ローカルテスト環境を設定する
<a name="setup-local-testing"></a>

ウィジェットをローカルでテストするには、コミュニケーションウィジェットをロードするシンプルな HTML ファイルを作成します。

1. テスト用にコンピュータに新しいフォルダを作成する (例: `ai-streaming-test`)

1. デモページの背景イメージをダウンロードし、テストフォルダ`background.jpg`に として保存します。

1. 次の内容で、テストフォルダ`index.html`に という名前の新しいファイルを作成します。

```
<!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>
```

### ステップ 7: プレースホルダー値を置き換える
<a name="replace-placeholder-values"></a>

HTML ファイルのプレースホルダー値を実際のウィジェット値に置き換えます。


| Placeholder | を に置き換える | 例 | 
| --- | --- | --- | 
| REPLACE\$1WITH\$1CLIENT\$1URI | ステップ 5 のクライアント URI | https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js | 
| REPLACE\$1WITH\$1WIDGET\$1ID | ステップ 5 のウィジェット ID | amazon\$1connect\$1widget\$1abc123 | 
| REPLACE\$1WITH\$1SNIPPET\$1ID | ステップ 5 のスニペット ID | QVFJREFIaWJYbG... (長い Base64 文字列) | 

### ステップ 8: ローカルウェブサーバーを起動する
<a name="start-local-web-server"></a>

ウィジェットをテストするには、ローカルウェブサーバーから HTML ファイルを提供する必要があります。いくつかのオプションは次のとおりです。

**オプション A: Python (インストールされている場合)**  


```
python -m http.server 8001
```

**オプション B: Node.js (インストールされている場合)**  


```
npx http-server -p 8001
```

**オプション C: VS Code Live Server Extension**  

+ VS Code に「ライブサーバー」拡張機能をインストールする
+ 右クリック`index.html`して「ライブサーバーで開く」を選択します。

サーバーを起動したら、ブラウザを開き、以下に移動します。 `http://localhost:8001`

デモページには、右下隅にオレンジ色のチャットボタンが表示されます。

## ストリーミングエクスペリエンスをテストする
<a name="test-streaming-experience"></a>

ウィジェットがロードされたら、AI メッセージストリーミングをテストし、プログレッシブテキスト表示の動作を確認します。

### 検索対象: ストリーミングと非ストリーミング
<a name="what-to-look-for"></a>

ストリーミングレスポンスと非ストリーミングレスポンスの違いを理解することで、AI メッセージストリーミングが機能していることを確認できます。


| 行動 | 非ストリーミング (標準) | ストリーミング (AI メッセージストリーミング) | 
| --- | --- | --- | 
| 初期表示 | インジケータのロードまたはドットの入力 | テキストがすぐに表示される | 
| テキストの外観 | 完全なメッセージが一度にすべて表示される | 単語が徐々に表示される (バブルが大きくなる) | 
| レスポンスのタイミング | AI の生成が完了するまで待機する | 生成中のレスポンスを確認する | 
| ビジュアル効果 | 全文の「ポップ」 | 誰かのタイプを見るようなスムーズで流れるテキスト |