> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/ja/build/choose-channel/web-chat.md).

# Web Chat の概要

本ページでは、Web Chat のインタラクション機能とインターフェースのカスタマイズについて紹介します。企業らしさを反映した Web Chat サービスを構築できます

このページの内容：[一、Web Chat とは？](#what-is-webchat)｜[二、企業らしさを反映した Web Chat サービスの構築](#branding)｜[三、メッセージのカスタマイズ](#messages)｜[生成中の返信を停止する](#stop-generating)｜[四、多様な Q\&A コンテンツ](#multimodal-qa)｜[五、履歴の記憶と会話の共有](#memory-and-sharing)｜[六、使用ツール・引用ドキュメント一覧を表示するかどうかの選択](#display-tools-and-citations)｜[七、会話のアクセス権限 - 安全で管理しやすい会話環境](#access-control)｜[八、データ収集（Pre-chat フォーム）](#pre-chat-form)｜[接続に失敗した場合は？](#connection-failure)｜[返信の生成中に前の内容を見返す](#review-during-generation)

## <mark style="color:blue;">一、Web Chat とは？</mark> <a href="#what-is-webchat" id="what-is-webchat"></a>

MaiAgent で作成した Agent を自社のウェブサイトに埋め込み、リアルタイムのカスタマーサポートやその他の会話を提供できます。また、Web Chat は**レスポンシブデザインで、デスクトップ、タブレット、スマートフォンのいずれにも最適に対応します。**

現在、MaiAgent では次の 3 種類の埋め込み方法を提供しています。

### 1. ウェブサイト右下への埋め込み <a href="#embed-widget" id="embed-widget"></a>

* 公式サイトに埋め込み、サイト内蔵のスマートアシスタントとして利用できます
* ユーザーの通常の閲覧を妨げず、必要なときにいつでも利用できます
* 一般的なカスタマーサポートや問い合わせ対応に適しています

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-3880f664a77d58888b950e5e5612652da2b1fbcc%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20125237.png?alt=media" alt=""><figcaption><p>右下への埋め込み（ウィンドウはドラッグ可能）</p></figcaption></figure>

### 2. 全画面での埋め込み <a href="#embed-fullscreen" id="embed-fullscreen"></a>

* 完全な会話体験を提供します
* 複雑な問い合わせやサービスフローに適しています
* 企業のニーズに合わせてデザインをカスタマイズできます

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-84b25bce62e614b0545b739650995c0f8fc43225%2Fimage%20(116).png?alt=media" alt=""><figcaption><p>全画面埋め込みのデモ</p></figcaption></figure>

### 3. MaiGPT ウィンドウモードでの埋め込み <a href="#embed-maigpt" id="embed-maigpt"></a>

* ChatGPT スタイルの完全な会話インターフェース（左側に会話履歴一覧、右側にメインの会話エリア）を、ページに直接埋め込んでメイン UI にできます
* 指定したコンテナに常時表示することも、右下のフローティングボタンをクリックして全画面に展開することもできます
* AI ポータルサイト、社内ナレッジの入口、製品のメインの会話インターフェースとして適しています

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-40da32c6e68a4607ef47a4430950a10cbb1765b5%2Fmaigpt-embed-overview.png?alt=media" alt="MaiGPT ウィンドウモードでの埋め込み"><figcaption><p>MaiGPT ウィンドウモード：ChatGPT スタイルの完全なインターフェース</p></figcaption></figure>

{% hint style="info" %}
MaiGPT ウィンドウモードは、会話プラットフォーム設定の「<mark style="color:blue;">埋め込み</mark>」ウィンドウで選択できます。詳しい設定手順は [MaiGPT ウィンドウモードでの埋め込み](/maiagent-user-guide/ja/build/choose-channel/web-chat/maigpt-embed.md)をご覧ください。
{% endhint %}

### 訪問者が自分で切り替えられるウィンドウモード <a href="#visitor-window-modes" id="visitor-window-modes"></a>

右下に埋め込むウィンドウには、デフォルトの<mark style="color:blue;">フローティングウィンドウ</mark>に加えて、<mark style="color:blue;">サイドバー</mark>モードも開放できます。会話ウィンドウがページの右端に沿って全高で表示されるため、ページを見ながら質問したい場合に適しています。ウェブサイトのエンジニアが埋め込みコードで両方のモードを開放すると、PC 版の訪問者のタイトルバーに<mark style="color:blue;">ウィンドウモードの切り替え</mark>ボタンが表示され、クリックするだけで 2 つのモードを切り替えられます。サイドバーモードには、一時的に閉じるための<mark style="color:blue;">折りたたみ</mark>ボタンもあります。このほか、ページ内の特定のブロックに会話を直接配置するインラインモードや、フローティングボタンを表示しないモードもあり、これらはいずれも埋め込みコードで決まります。技術者向けマニュアルの [Web Chat の埋め込みと SDK：ウィンドウモード](https://docs.maiagent.ai/tech/serve/web-chat-sdk#window-modes)をご覧ください。

この設計により、次のようなメリットがあります。

* **即時性**：訪問者は待つことなくすぐに専門的な回答を得られ、ユーザー体験が向上します
* **利便性**：右下のフローティング表示は通常の閲覧を妨げず、必要なときにいつでも利用できます
* **コスト効率**：Agent が 24 時間 365 日対応し、人件費を大幅に削減できます
* **プロフェッショナルなイメージ**：企業の技術力とサービス品質をアピールできます

## <mark style="color:blue;">二、企業らしさを反映した Web Chat サービスの構築</mark> <a href="#branding" id="branding"></a>

MaiAgent では、ロゴ、アイコン、Q\&A のテーマカラーなどをカスタマイズでき、企業らしさを反映した Web Chat サービスの構築をサポートします。

次の設定が可能です。

1. Agent の表示名を選択する
2. 企業のロゴをアップロードする
3. Agent の表示アイコンを選択する
4. Web Chat のテーマカラーを選択する
5. Agent の返信メッセージの背景色を選択する

これらの機能で、オリジナルの Web Chat の外観を作成できます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-98048f7b5e57344d70831936ed727a91a00604c0%2Fimage%20(118).png?alt=media" alt=""><figcaption><p>デフォルトのスタイル</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-256f1d936b5145c36cf8f1106d1f9dbd1fbd9103%2Fimage%20(119)%20(1).png?alt=media" alt=""><figcaption><p>カスタムスタイル</p></figcaption></figure></div>

このようにして、企業のカラーに合わせた Web Chat サービスを構築できます。

Web Chat では、会話入力エリアの下にプラットフォームのブランドロゴが表示されます。ログイン、新規登録、読み込み画面でも、ブランド画像が一貫した比率で表示され、圧縮や拡大による歪みは生じません。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-08a452dcf190d99fb18802f136241351607d360a%2Fwebchat-brand-footer.png?alt=media" alt="Web Chat の入力エリアの下に表示された Powered by と MaiAgent のブランドロゴ"><figcaption><p>Web Chat 下部のブランドロゴは、鮮明さと縦横比を保ったまま表示されます</p></figcaption></figure>

### ダークモードの最適化 <a href="#dark-mode" id="dark-mode"></a>

MaiAgent の Web Chat ダークモードは全面的に最適化されており、より快適な視覚体験を提供します。

**動的なカラー調整**

* テーマカラーの明るさを自動調整し、暗い背景でもはっきり見えるようにします
* 文字のコントラストをインテリジェントに調整し、最適な読みやすさを保ちます
* アイコンやボタンの色を最適化し、ダークモードでより目立つようにします

**コントラストの最適化**

* メッセージ吹き出しの背景色は、視覚的な疲れを避けるよう丁寧に設計されています
* リンクや重要な情報には高コントラストの色を使い、はっきり識別できるようにします
* 入力ボックスやボタンの枠線の色を最適化し、操作性を高めます

**シームレスな切り替え体験**

* ユーザーはいつでもライトモードとダークモードを切り替えられます
* 切り替え時も会話内容と操作状態が保持されます
* システムがユーザーのテーマの設定を記憶します

ダークモードは特に次のような場合に適しています。

* 夜間や暗い環境での使用
* 長時間の会話で、目の疲れを軽減したい場合
* 企業ブランドに合わせたダーク系のデザインにしたい場合

## <mark style="color:blue;">三、メッセージのカスタマイズ</mark> <a href="#messages" id="messages"></a>

訪問者が初めて Web Chat サービスに入ったとき、以下のようなシーンに合わせて、Agent のオープニングメッセージを自由に設定できます。オープニングメッセージは固定の文面であり AI が生成したものではないため、メッセージに「いいね」／「よくない」のフィードバックボタンは表示されず、[使用分析](/maiagent-user-guide/ja/build/agent/usage.md#user-satisfaction-rate)のユーザー満足度にも含まれません。

### **1. オープニングメッセージのカスタマイズ** <a href="#greeting" id="greeting"></a>

#### **ブランドらしい挨拶**

「当サイトへようこそ！専属カスタマーサポートアシスタントです」と設定すると、企業のプロフェッショナルなイメージと親しみやすいサービス姿勢を表現できます。

#### **案内型のオープニング**

「商品情報の検索、ご利用に関する質問への回答、注文手続きのお手伝いができます」と設定すると、提供できるサービスの範囲をユーザーに明確に伝え、サービスへの信頼感を築けます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-b21ad3d1aa1d753ca4a0e9b2b73af621c62e8e8c%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20152318.png?alt=media" alt=""><figcaption><p>カスタムオープニングメッセージ</p></figcaption></figure>

### 2. ガイド付きのスタート質問 <a href="#starter-questions" id="starter-questions"></a>

* 「<mark style="color:blue;">会話開始時の質問</mark>」をクイックオプションとして設定します
* ユーザーはよくある質問を直接クリックでき、入力する必要がありません
* **質問例**：
  * 「注文済みの商品はどこで確認できますか？」
  * 「注文するにはどうすればよいですか？」
  * 「会員ポイントのルール」
  * 「営業時間」

ユーザーはスタート質問をクリックして会話を始められ、やり取りをスムーズに進められます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-ba6c8e8005961ff727708c56c2df863893c7e59b%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20153127.png?alt=media" alt=""><figcaption><p>スタート質問の設定例</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-c2847c1a6f8cdbfe8c6066e8d85089987d336d56%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20153719.png?alt=media" alt=""><figcaption><p>ユーザーがクリックして会話を開始</p></figcaption></figure></div>

## 生成中の返信を停止する <a href="#stop-generating" id="stop-generating"></a>

質問を送信した後で内容の誤りに気づいても、Agent が返信を最後まで生成するのを待つ必要はありません。返信の生成中は、入力ボックス右側の送信ボタンが四角い<mark style="color:blue;">停止</mark>ボタンに変わります。クリックするとその返信を停止でき、修正した質問を改めて入力できます。

たとえば、カスタマーサポート担当者が Agent に年次の新製品発表会の企画を依頼し、送信後にイベントの予算を伝え忘れたことに気づいたとします。Agent が返信を生成している間に<mark style="color:blue;">停止</mark>をクリックし、予算と人数を補足して質問し直せば、要件に合わない内容が生成し終わるのを待たずに済みます。

### 返信を停止する <a href="#stop-current-response" id="stop-current-response"></a>

{% stepper %}
{% step %}

### 1. 停止ボタンを見つける <a href="#find-stop-button" id="find-stop-button"></a>

質問を送信したら、Agent が返信を生成し始めるのを待ちます。このとき、入力ボックスの右側に四角い<mark style="color:blue;">停止</mark>ボタンが表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-5b470980c305488984de0c77295cf0ef2ae6f57f%2Fwebchat-stop-response.png?alt=media" alt="Web Chat の返信生成中、入力ボックスの右側に四角い停止ボタンが表示されている"><figcaption><p>返信の生成中は、入力ボックス右側の停止ボタンをクリックできます</p></figcaption></figure>
{% endstep %}

{% step %}

### 2. 停止して質問し直す <a href="#stop-and-ask-again" id="stop-and-ask-again"></a>

<mark style="color:blue;">停止</mark>をクリックします。停止した返信の下に「返信は中断されました」と表示され、入力ボックス右側はすぐに送信ボタンに戻るため、修正した質問を入力して再送信できます。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
停止されるのは現在生成中の返信だけです。送信済みの質問や、これまでの会話履歴が削除されることはありません。
{% endhint %}

### キーボードで停止する：Esc キーを押す <a href="#stop-with-esc" id="stop-with-esc"></a>

PC では、カーソルが入力ボックスにある状態でキーボードの Esc キーを押すと、<mark style="color:blue;">停止</mark>をクリックしたのと同じ効果があり、マウスを動かす必要はありません。返信が生成されていないときに Esc キーを押しても何も起こらず、入力ボックスに入力途中のテキストも保持されます。

### 返信中に続けてメッセージを送る：メッセージキュー <a href="#message-queue" id="message-queue"></a>

Agent がまだ返信している間も、PC の訪問者は続けて入力し、Enter キーで送信できます。これらのメッセージはすぐには Agent に送られず、入力ボックスの上にある「返信の完了後に順番に送信されます（N 件）」というリストに並び、現在の返信が終わると自動的に順番に送信されます。返信中は入力ボックス右側のボタンが<mark style="color:blue;">停止</mark>になっているため、キューへの追加は Enter キーで送信して行います。キューに入っているメッセージは次のように操作できます。

* クリックすると入力ボックスに戻して編集し、あらためて送信できます
* 右側の<mark style="color:blue;">削除</mark>をクリックすると取り消せます
* キューがいっぱいのときは「キューに入れられるメッセージは最大 N 件です。返信の完了までお待ちください」と表示されます

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-697fc31a977d189aef4631a049501e43b61e988d%2Fwebchat-message-queue.png?alt=media" alt="入力ボックスの上に「返信の完了後に順番に送信されます（1 件）」と待機中のメッセージが 1 件表示され、右側に削除ボタンがある。入力ボックスの右側は停止ボタン"><figcaption><p>返信中に Enter キーで送信したメッセージは、入力ボックスの上に並びます</p></figcaption></figure>

Agent にすぐ新しい質問を処理させたいときは、先に<mark style="color:blue;">停止</mark>または Esc キーを押してから送信してください。停止してもキューに入っているメッセージは保持され、中断された返信の後処理が終わると（最大で約 10 秒）自動的に送信されます。

たとえば、訪問者が公式サイトの Web Chat で Agent にプラットフォームのすべての機能を詳しく紹介してもらっていて、返信の途中で箇条書きにしてほしいと思ったとします。入力ボックスに「補足として、箇条書きで整理してください。」と入力して Enter キーを押すと、このメッセージが先にキューに入ります。続けて Esc キーを押して長い返信を中断すると、画面に「返信は中断されました」と表示され、しばらくするとキューのメッセージが自動的に送信され、Agent がこの新しいメッセージに返信します。

{% hint style="warning" %}
次の場合はキューに入りません。

* **添付ファイル付きのメッセージ**：返信中にファイルを添付して送信すると、画面に「AI が返信中です」と表示され、テキストとファイルは入力ボックスに残ります。返信の終了後にあらためて送信してください。<mark style="color:blue;">停止</mark>を押した場合は、中断された返信の後処理が終わるまで少し（最大で約 10 秒）お待ちください。
* **スマートフォンとタブレット**：入力ボックスの Enter キーは改行になり、返信中は右側に<mark style="color:blue;">停止</mark>ボタンしかないため、先に停止するか返信の終了を待ってから、次のメッセージを送信する必要があります。
  {% endhint %}

## <mark style="color:blue;">四、多様な Q\&A コンテンツ</mark> <a href="#multimodal-qa" id="multimodal-qa"></a>

### 1. 多言語対応 <a href="#multi-language" id="multi-language"></a>

ユーザーが使用する言語で返信し、コミュニケーションの壁をなくします。

* **自動検出**：ユーザーが入力した言語に応じて、Agent の返信言語を選択します

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-6ddc78047a3aef2815f71e26c3d498588224141c%2Fimage%20(127).png?alt=media" alt=""><figcaption></figcaption></figure>

**手動での切り替え**：

1. Web Chat のインターフェースで使用言語を選択します。詳しくは [多言語対応：Web Chat のチャット設定](/maiagent-user-guide/ja/build/agent/multi-language-support.md#web-chat-language-settings)をご覧ください。
2. Web Chat の初期化スクリプト（JavaScript）で Agent の返信言語を指定します。詳しくは [技術者向けマニュアル—Web Chat の埋め込みと SDK（`locale` の設定）](https://docs.maiagent.ai/tech/serve/web-chat-sdk#config-basic)をご覧ください。

{% hint style="info" %}
対応言語の一覧は、[多言語対応：対応言語一覧](/maiagent-user-guide/ja/build/agent/multi-language-support.md#supported-language-list)をご覧ください。
{% endhint %}

### 音声入力と音声再生 <a href="#voice-input-and-playback" id="voice-input-and-playback"></a>

Agent で音声サービスを有効にすると、Web Chat の訪問者側に次の 3 つが追加されます。

| 場所                                                | 機能                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 入力ボックス左側の<mark style="color:blue;">マイク</mark>アイコン | **音声入力**：クリックすると話し始め、画面に「聞き取り中」と表示されます。話し終えると、認識結果が自動的に 1 件のメッセージとして送信されます                                                                                                                                                                                                                                 |
| 設定メニューの<mark style="color:blue;">音声</mark>        | 音声認識の言語とプロバイダーを選択します：<mark style="color:blue;">Microsoft Azure</mark>（中国語（標準語）、簡体字中国語、英語、日本語、韓国語、タイ語、ベトナム語、インドネシア語、マレー語、フィリピン語、ミャンマー語、クメール語、ラオス語、シンガポール英語）、<mark style="color:blue;">Bronci</mark>（台湾語）、<mark style="color:blue;">内蔵</mark>（中国語（標準語）、英語。ブラウザー自体の音声認識を使用）。訪問者が話す言語と認識言語が一致していないと、正確に認識されません |
| 設定メニューの<mark style="color:blue;">音声再生</mark>      | オンにすると、Agent の返信が自動的に音声で読み上げられます。オフにするとテキストのみが表示されます。デフォルトはオンです                                                                                                                                                                                                                                            |

設定メニューは、PC 版ではタイトルバーの設定バー、スマートフォン版では右上の<mark style="color:blue;">⋮</mark>です。

{% hint style="info" %}
ここでの音声入力は、「ひとこと話す、テキストに認識する、送信する」という流れです。Agent で[音声アシスタント](/maiagent-user-guide/ja/build/agent/voice-agent.md)を有効にしている場合は、入力ボックスの横に<mark style="color:blue;">ヘッドセット</mark>アイコンも追加され、リアルタイムの音声通話を開始できます。詳しくは [音声アシスタント：ユーザー側での使い方](/maiagent-user-guide/ja/build/agent/voice-agent.md#how-users-talk)をご覧ください。
{% endhint %}

### 2. マルチモーダル Q\&A <a href="#multimodal" id="multimodal"></a>

テキストでの Q\&A に加えて、Agent はさまざまな種類のファイルのアップロードにも対応できます。

* スプレッドシート：.xls, .xlsx, .csv, .ods
* ワープロ文書：.doc, .docx, .odt, .pdf, .md, .txt
* プレゼンテーション：.ppt, .pptx, .odp
* Web ドキュメント：.html, .htm
* データ形式：.json, .jsonl
* 音声ファイル：.wav, .mp3, .m4a, .aac
* 動画ファイル：.mp4

{% hint style="info" %}
ユーザーによる添付ファイルのアップロードを許可せず、テキストのみで会話するように設定して、会話の安全性を確保することもできます。
{% endhint %}

#### 画像コンテンツの処理

**画像の認識と分析**

* **アップロード画像の分析**：ユーザーが商品画像をアップロードすると、AI が自動的に識別して関連情報を提供します
* **スクリーンショットの処理**：画面のスクリーンショットの分析に対応し、利用上の問題の解決をサポートします
* **画像の説明**：画像の内容の説明と関連する提案を自動生成します

**画像での返信機能**

* **商品画像の表示**：返信に商品の実物画像を含めます
* **操作ガイド画像**：手順ごとの操作スクリーンショットを提供します

例：

1. ユーザーが MaiAgent の Agent をどこで設定するかを尋ねると、Agent が設定画面を画像で返信します
2. ユーザーがスクリーンショットを送って、その経路が正しいかを Agent に確認すると、Agent が正しく解析して返信します

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-71263c2534efc1ba8bb19b493e761d88f0ef2c5f%2Fimage%20(122).png?alt=media" alt=""><figcaption><p>Agent が画像で返信</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-c71336dcd8110e7f04f15a551ff3d4b3fd2dbdb1%2Fimage%20(123).png?alt=media" alt=""><figcaption><p>Agent がユーザーのスクリーンショットの内容を解析</p></figcaption></figure></div>

#### ドキュメント処理機能

**対応するドキュメント形式**

* **PDF ドキュメント**：PDF の内容を自動的に解析し、関連する質問に回答します
* **Word ドキュメント**：.doc/.docx 形式のファイルを処理します
* **Excel スプレッドシート**：スプレッドシートのデータを分析し、インサイトを提供します
* **PowerPoint プレゼンテーション**：プレゼンテーションの内容を抽出し、質問に回答します

**ドキュメントとのインタラクション機能**

* **ドキュメント内容の検索**：アップロードされたドキュメントに基づいて、具体的な質問に回答します
* **データ分析**：表データを自動的に分析し、統計情報を表形式で提供します
* **ドキュメントの要約**：長いドキュメントの要点を要約します

***

例 1：Agent にデータの内容を表形式で示してもらい、参考資料のリンクも提示してもらう

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-b31d4a6935949e33bd1007689bb0fba9782f730f%2Fimage%20(132).png?alt=media" alt=""><figcaption><p>表形式で情報を整理</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f7cd38de66136fd5b12b73f4f143fff7ae00aa30%2Fimage%20(133).png?alt=media" alt=""><figcaption><p>外部リンクを提示</p></figcaption></figure></div>

例 2：Agent に売上の内容を分析してもらい、表形式で解説してもらう

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-150fb2de65a75b631b5dcb1721f03e2c73ae297d%2Fimage%20(131).png?alt=media" alt=""><figcaption></figcaption></figure>

例 3：docx ファイルを渡して、Agent に履歴書の書き方の問題点を分析してもらう

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-4354e35d4f0e524745e7859982782380ca89d980%2Fimage%20(134).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Agent は回答時に常に Markdown 形式を使用し、返信内容を整然と構成します。
{% endhint %}

**Agent が納品するファイル**：Agent が Code Interpreter でファイルを生成してユーザーに渡すとき、Web Chat は返信の中にファイルカード（ファイル名、種類、ダウンロードボタン）を表示し、カードをクリックするとそのままプレビューできます。Agent Teams でサブ Agent が生成したファイルも、同じ方法で表示されます。

## <mark style="color:blue;">五、履歴の記憶と会話の共有</mark> <a href="#memory-and-sharing" id="memory-and-sharing"></a>

### **1. 会話履歴の記憶** <a href="#chat-history" id="chat-history"></a>

継続的なサービス体験を提供するため、Web Chat はユーザーの会話履歴を自動的に記憶し、毎回の会話をそれまでの内容を踏まえて進められるようにします。

**記憶される内容の範囲**

* **会話内容**：テキスト、画像、ドキュメントなどを含む、質問と回答の完全な記録
* **サービスの状態**：未完了の問い合わせや、対応待ちの質問

「会話履歴を表示」を有効にすると（[インタラクション設定](/maiagent-user-guide/ja/build/conversation-settings/platform-settings/interaction-settings.md#conversation-display)を参照）、タイトルバーの左側に<mark style="color:blue;">時計</mark>アイコンが表示され、クリックすると会話履歴のサイドバーが開きます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-516cd7f27f014ac3d1ccd66d011d495c1db67266%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20171142.png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-e794f1deb35a654a2724917cd732fa298ed7ccb9%2Fimage%20(135).png?alt=media" alt=""><figcaption></figcaption></figure></div>

| 場所                                             | 機能                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| サイドバー上部の<mark style="color:blue;">会話を検索</mark> | 検索パネルを開き、キーワードを入力すると会話をリアルタイムで絞り込めます。パネル内から<mark style="color:blue;">新しい会話</mark>を直接クリックすることもできます                                                                                                                                                                                                                               |
| サイドバー上部の<mark style="color:blue;">新しい会話</mark> | まったく新しい会話を開始します                                                                                                                                                                                                                                                                                                                 |
| 会話リスト                                          | <mark style="color:blue;">今日</mark>／<mark style="color:blue;">昨日</mark>／<mark style="color:blue;">過去 7 日間</mark>／<mark style="color:blue;">過去 30 日間</mark>／<mark style="color:blue;">それ以前</mark>に自動でグループ分けされます。[会話の引き継ぎ](/maiagent-user-guide/ja/work/maigpt/chat/conversation-handoff.md)を使った会話には、「引き継ぎ先」または「元の会話からの続き」と表示されます |
| 各会話の<mark style="color:blue;">⋯</mark>         | <mark style="color:blue;">名前を変更</mark>（タイトルの変更）、<mark style="color:blue;">削除</mark>（確認後に削除され、元に戻せません）。プラットフォームで会話の共有が有効な場合は<mark style="color:blue;">共有</mark>もあります。下記の[会話の共有](#chat-sharing)をご覧ください                                                                                                                            |

会話履歴を有効にしていない場合、時計アイコンの位置には<mark style="color:blue;">新しい会話</mark>アイコンが表示され、訪問者は新しい会話を開始することしかできず、過去の記録は見られません。

会話の記憶機能は、次のような場面で活用できます。

* **継続的な相談**：ユーザーが「前回おすすめしてもらったテントの型番は何でしたか？」と尋ねると、AI がすぐに思い出して回答できます
* **進捗の追跡**：ユーザーが「前回の注文の問い合わせを続けたい」と言うと、AI が関連情報を自動的に呼び出します
* **パーソナライズされたサービス**：過去の会話に基づいて、より的確なおすすめや提案を提供します

{% hint style="info" %}
1 つの会話が長くなりすぎた場合は、「会話の引き継ぎ」を有効にすると、訪問者が Agent に引き継ぎ用の要約を作成してもらい、新しい会話で続きを話せます。Web Chat での有効化の方法と制限事項は、[会話の引き継ぎ：Web Chat で有効にする](/maiagent-user-guide/ja/work/maigpt/chat/conversation-handoff.md#enable-on-web-chat)をご覧ください。API で続きの会話を作成する方法は、技術マニュアルの[会話の引き継ぎと続きの会話 API](https://docs.maiagent.ai/tech/serve/conversation-handoff-continuation)をご覧ください。
{% endhint %}

### **2. 会話の共有** <a href="#chat-sharing" id="chat-sharing"></a>

Agent に相談した後で会話を友人や同僚と共有したいとき、あるいは社内チームが顧客の問題について共同で検討する必要があるときは、MaiAgent の会話共有リンクを生成できます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-5a43d6523e30f0539424a2d220e71f053420d7df%2Fimage%20(136).png?alt=media" alt=""><figcaption></figcaption></figure>

会話ウィンドウ右上の<mark style="color:blue;">共有</mark>をクリックし、「会話の公開リンクを共有」ウィンドウで<mark style="color:blue;">リンクをコピー</mark>を押すと、相手に送れます。会話履歴サイドバーの各会話の<mark style="color:blue;">⋯</mark> → <mark style="color:blue;">共有</mark>からも、同じ種類のリンクを取得できます。

**リンクを受け取った人に表示される内容**

* 読み取り専用の会話ページで、その会話のこれまでのすべてのメッセージ（テキスト、画像、添付ファイルを含む）が表示されます
* ログインなしで開けるため、見せてよい相手にだけ共有してください
* 閲覧のみで、このページから続けて入力することはできません。続けて質問したい場合は、元の Web Chat に戻って会話を開いてください

{% hint style="info" %}
共有リンクには会話記録そのものだけが表示され、要約の作成や関連リソースの整理は行われません。
{% endhint %}

会話記録の共有は、次のような場面で活用できます。

* **顧客への共有**：「このキャンプ用品のおすすめがとても良かったので、登山サークルに共有します」
* **社内での共同作業**：カスタマーサポート担当者が、複雑な問題を技術サポートチームに共有します
* **研修用途**：代表的な会話事例を、従業員研修の教材として共有します

### **3. 会話タイムアウトの管理** <a href="#chat-timeout" id="chat-timeout"></a>

会話の品質とシステムのパフォーマンスを確保するため、Web Chat にはインテリジェントな会話タイムアウト管理の仕組みがあります。

**インテリジェントなフィルタリング**

* **挨拶メッセージの自動フィルタリング**：システムがオープニングの挨拶を識別して除外し、会話タイムアウトの計算に含めません
* **メッセージ数の正しいリセット**：会話が再開されたときに、メッセージカウンターが正しくリセットされます
* **タイムアウト判定の最適化**：実質的な会話内容のみを対象にタイムアウトを計算し、より正確に会話を管理します

**会話の継続性の確保**

* 通常の会話の途中で、ユーザーが意図せずタイムアウトにならないようにします
* 長く考え込んだり中断したりした後でも、会話を続けられます
* システムが会話がまだ進行中かどうかをインテリジェントに判断します

**実際の動作**

1. **会話の開始**：ユーザーが挨拶（「こんにちは」など）を送信しても、システムはタイムアウトの計算に含めません
2. **会話への移行**：ユーザーが実質的な質問を始めると、タイムアウトのタイマーが起動します
3. **会話の中断**：ユーザーが一時的に離席しても、システムは会話の状態を保持します
4. **再開**：ユーザーが戻って会話を続けると、メッセージ数が正しく更新されます

この最適化により、会話体験がよりスムーズで自然になり、ユーザーは考える時間が長くなって会話が途切れる心配をする必要がありません。

### **4. メッセージ操作：編集、フィードバック、分岐** <a href="#message-actions" id="message-actions"></a>

メッセージにカーソルを合わせると操作アイコンが表示されます。操作方法は MaiGPT と同じで、詳しくは [MaiGPT：メッセージ操作](/maiagent-user-guide/ja/work/maigpt/chat.md#message-actions)をご覧ください。Web Chat での違いは、**どの訪問者に表示されるか**という点です。

| 操作                                                                                                                     | 利用できる人                                             | 説明                                                                                                                                                                                                                                                      |
| ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| AI の返信の <mark style="color:blue;">コピー</mark>、<mark style="color:blue;">高評価</mark>、<mark style="color:blue;">低評価</mark> | すべての訪問者                                            | 低評価を押すと「フィードバックを送信」ウィンドウが開き、理由を選択して、その他のフィードバックを補足して送信できます。フィードバックは管理画面の[会話ビューア](/maiagent-user-guide/ja/serve/daily-operations/reply/conversation-viewer.md)と、[利用分析](/maiagent-user-guide/ja/build/agent/usage.md#user-satisfaction-rate)の満足度統計に反映されます |
| 自分のメッセージの <mark style="color:blue;">メッセージを編集</mark> とバージョン切り替え <mark style="color:blue;">‹ N / M ›</mark>              | ログイン済みの訪問者（プラットフォームで[ログイン機能](#login-config)が有効な場合） | 編集すると以降の会話が削除され、Agent が改めて返信します。内容に変更がない場合は送信できません                                                                                                                                                                                                      |
| AI の返信の <mark style="color:blue;">会話を分岐</mark>                                                                         | ログイン済みの訪問者                                         | この返信までの内容で別の会話を開始します。元の会話には影響しません                                                                                                                                                                                                                       |

### **5. 接続済みサービス** <a href="#connected-services" id="connected-services"></a>

Agent が訪問者に代わって外部サービスにアクセスする必要がある場合（例：訪問者自身のアカウントでカレンダーを確認する場合）、会話内に認可カードが送信されます。訪問者が認可したサービスは、タイトルバーの <mark style="color:blue;">接続済みサービス</mark>（リンクアイコン）からまとめて確認、再認可、接続解除ができます。このボタンは、身元が識別された訪問者（Pre-chat フォームに入力済み、ログイン済み、またはウェブサイトが Source ID で身元を渡している訪問者）にのみ表示されます。詳しくは[接続済みサービス](/maiagent-user-guide/ja/build/choose-channel/web-chat/connected-services.md)をご覧ください。

## <mark style="color:blue;">六、使用ツール・引用ドキュメント一覧を表示するかどうかの選択</mark> <a href="#display-tools-and-citations" id="display-tools-and-citations"></a>

### **1. 使用ツール一覧の表示** <a href="#show-tools" id="show-tools"></a>

Agent が推論時に使用したツールの一覧をユーザーに表示するかどうかを選択できます。表示を許可すると、Agent が返信を生成する際に次のような画面が表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-397b3d1960642ae0a98c9097422f2fa66f89c543%2Fimage%20(140).png?alt=media" alt=""><figcaption></figcaption></figure>

この一覧から、Agent が使用したツールの内容が正しいかどうかを確認できます。

Agent が呼び出した MCP ツールにインタラクティブなインターフェースが付属している場合、返信の下に直接操作できるカードも表示されます。[MCP インタラクティブカード（MCP Apps）](/maiagent-user-guide/ja/build/tools/mcp-apps.md)をご覧ください。

### **2. 引用ドキュメント一覧の表示** <a href="#show-citations" id="show-citations"></a>

AI のすべての回答では、引用ドキュメント一覧が自動的に生成され、情報源が明確に示されるため、回答の信頼性とトレーサビリティが向上します。

**表示設定**

企業は、引用されたツールや参照ドキュメント名をユーザーに表示するかどうかを、必要に応じて設定できます。表示を有効にすると、Agent の返信の下部に次のような一覧が表示されます。「引用ノード」をクリックすると、参照されたドキュメントの該当部分を確認できます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-380a3f1aadb6212090fd6ed70f0c93d56a2224e9%2Fimage%20(139).png?alt=media" alt=""><figcaption></figcaption></figure>

利用シーンに応じて、引用情報を公開するかどうかを選択できます。

* **公開カスタマーサポート**：すべての引用情報を表示し、信頼感を高めます
* **社内サポート**：機密性の高いドキュメントを非表示にし、機密情報を保護します
* **教育機関**：学習リソースを表示し、学生が参照しやすくします

## 返信の横のパネル：キャンバスとブラウザ <a href="#side-panels" id="side-panels"></a>

Agent の返信はテキストだけとは限りません。ドキュメント、図表、ウェブページ、地図を生成すると、デスクトップ版では会話の右側にパネルが開き、モバイル版では会話画面全体が覆われます。パネルは閉じることができ、メッセージには生成物のカードが残るため、後でカードをクリックすれば再び開けます。このセクションでは、訪問者に表示される 3 種類のパネルについて説明します。

### キャンバス（Canvas） <a href="#web-chat-canvas" id="web-chat-canvas"></a>

Agent が Markdown ドキュメント、Mermaid 図、HTML、React のインタラクティブページをキャンバス形式で生成すると、キャンバスが自動的に開きます。パネル上部のツールバーは次のとおりです。

| ボタン                                                                                   | 動作                                                                                                                                                                   |
| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">コードに切り替え</mark>／<mark style="color:blue;">プレビューに切り替え</mark> | レンダリング後の表示と元の内容を切り替えます                                                                                                                                               |
| <mark style="color:blue;">コンソール</mark>、<mark style="color:blue;">コードをリセット</mark>      | React のインタラクティブページでのみ利用できます。実行メッセージの確認と、コードを Agent が最初に生成したバージョンに戻すことができます                                                                                           |
| <mark style="color:blue;">全画面表示</mark>／<mark style="color:blue;">全画面表示を終了</mark>      | キャンバスをウィンドウ全体に拡大します                                                                                                                                                  |
| <mark style="color:blue;">ダウンロード</mark>                                               | <mark style="color:blue;">元のファイルをダウンロード</mark>（種類に応じて .md、.mmd、.html、.jsx）または <mark style="color:blue;">PDF をダウンロード</mark>。コンテンツのコンパイル中は「コンパイル完了後にダウンロードできます」と表示されます |
| <mark style="color:blue;">閉じる</mark>                                                  | パネルを閉じます。メッセージ内のキャンバスカードからは再び開けます                                                                                                                                    |

デスクトップ版では、パネルの左端をドラッグして幅を調整できます。キャンバスの用途、適した指示、エクスポートの詳細は MaiGPT と同じです。[Canvas キャンバス](/maiagent-user-guide/ja/work/maigpt/canvas.md)をご覧ください。

### 地図キャンバス <a href="#map-canvas" id="map-canvas"></a>

Agent が場所や旅程に関する質問（例：レストランのおすすめ、2 泊 3 日の旅程）に回答する際は、地図キャンバスが使われることがあります。左側に Google マップと場所のマーカー、右側（モバイル版では下側）に場所カードの一覧が表示されます。

* **絞り込み**：<mark style="color:blue;">絞り込み</mark> ドロップダウンでは、<mark style="color:blue;">カテゴリ</mark>（レストラン、カフェ、宿泊、観光スポット、ショッピング、自然、交通、その他）、<mark style="color:blue;">条件</mark>（<mark style="color:blue;">営業中のみ表示</mark>、<mark style="color:blue;">4.5★ 以上</mark>）、<mark style="color:blue;">表示</mark>（評価バッジ、名前ラベル）で絞り込めます。条件に合う場所がない場合は「絞り込み条件に一致する場所がありません」と表示されます。
* **複数日の旅程**：旅程が日ごとに分かれている場合、地図の左上に <mark style="color:blue;">すべて</mark>／<mark style="color:blue;">N 日目</mark> の切り替えが表示され、一覧は午前、午後、夜、未定に分けてグループ化されます。
* **場所の詳細**：場所カードをクリックすると詳細が開き、<mark style="color:blue;">概要</mark>（場所の紹介、住所、URL、電話番号、営業時間、<mark style="color:blue;">営業中</mark>／<mark style="color:blue;">休憩中</mark>）と <mark style="color:blue;">レビュー</mark> の 2 つのタブに分かれています。下部には <mark style="color:blue;">ナビ</mark>、<mark style="color:blue;">電話をかける</mark>、<mark style="color:blue;">ウェブサイトを開く</mark>、<mark style="color:blue;">Google マップで開く</mark> があります。詳細情報は Google から取得されるため、読み込めない場合は「詳細情報を取得できません」と表示されます。

地図キャンバスの <mark style="color:blue;">コードに切り替え</mark> では場所データの元の内容が表示され、<mark style="color:blue;">元のファイルをダウンロード</mark> では .json として保存されます。

### ブラウザパネル <a href="#browser-panel" id="browser-panel"></a>

Agent で [Browser Tool](/maiagent-user-guide/ja/build/agent/browser-tool.md) が有効になっていて、ウェブページの操作を開始すると、右側に <mark style="color:blue;">ブラウザ</mark> パネルが表示され、Agent が見ているウェブページのスクリーンショットと現在の URL がリアルタイムで表示されます。Agent の操作中は <mark style="color:blue;">AI が操作中</mark> と表示され、まだ画面がない場合は「ブラウザ画面を待機中…」と表示されます。

訪問者は、Agent が停止したときに操作を引き継ぐことができます。たとえば、Agent の代わりに認証コードやアカウントとパスワードを入力したり、選択肢を選んだりできます。

* スクリーンショット上で直接クリック、ダブルクリック、右クリック、スクロールすると、その操作は Agent が操作しているウェブページに送信されます。
* パネル下部の入力ボックス <mark style="color:blue;">ここにテキストを入力し、Enter キーでブラウザに送信</mark>：テキストを入力して Enter キーを押すと送信されます。入力ボックスが空の状態で Enter、Esc、方向キーなどを押した場合も、キー操作が直接ウェブページに送信されます。Agent の操作中は入力ボックスが一時的に無効になります。
* 右上の <mark style="color:blue;">閉じる</mark> でパネルを閉じると、入力ボックスの上に <mark style="color:blue;">ブラウザ画面を再表示</mark> が表示されるので、クリックすると再び表示できます。

{% hint style="warning" %}
パネルに入力したアカウントとパスワードは、Agent が操作しているウェブページに送信されます。この Agent とその背後にある企業を信頼できる場合にのみ入力してください。
{% endhint %}

## <mark style="color:blue;">七、会話のアクセス権限 - 安全で管理しやすい会話環境</mark> <a href="#access-control" id="access-control"></a>

### 1. ログイン機能の設定 <a href="#login-config" id="login-config"></a>

**ログインの強制**

会話内容の安全性と管理しやすさを確保するため、企業はログイン機能を有効にし、ユーザーが先にログインしないと Agent サービスを利用できないようにできます。設定後、訪問者が Web Chat をクリックするとまずログインページが表示され、ログインに成功したユーザーだけが Agent との会話を開始できます。

**セキュリティ上の利点**

* **本人確認**：すべての会話ユーザーの身元を明確にします
* **権限管理**：ユーザーの身元に応じて対応するサービス内容を提供します
* **会話の追跡**：各ユーザーの会話履歴をすべて記録します
* **データ保護**：権限のないユーザーによる機密情報へのアクセスを防ぎます

### 2. 3 種類のログイン方法 <a href="#login-methods" id="login-methods"></a>

**AD (Active Directory) ログイン**

* **適用シーン**：社内の従業員が利用する場合で、既存の AD システムと連携します
* **特長**：シングルサインオン (SSO) に対応し、追加のアカウント管理が不要です
* **設定方法**：AD サーバーの接続情報と同期ルールを設定します
* **実際の活用**：従業員が会社のアカウントでそのままログインし、対応する権限を自動的に取得します

**Keycloak ログイン**

* **適用シーン**：複雑な ID 管理が必要で、複数の ID プロバイダーに対応する企業
* **特長**：OAuth2、SAML、OpenID Connect などの標準プロトコルに対応します
* **設定方法**：Keycloak サーバー、ユーザープール、ID プロバイダーを設定します
* **拡張**：Agent が MCP／API ツールを呼び出す際に、訪問者の Keycloak ログイン ID を引き続き使用できます。[Keycloak ログイン ID を使ってツールを呼び出す](#keycloak-token-passthrough)をご覧ください

**MaiAgent ログイン**

* **適用シーン**：シンプルなユーザー管理で十分で、素早く導入したい場合
* **特長**：ユーザー管理システムを内蔵しており、操作がシンプルで分かりやすい
* **設定方法**：MaiAgent プラットフォームでユーザーアカウントと権限を作成します
* **実際の活用**：特定のユーザーグループ専用のログインシステムを構築します
* **訪問者による自己登録**：ログインページには <mark style="color:blue;">今すぐ登録</mark> と <mark style="color:blue;">パスワードをお忘れですか？</mark> があります。登録フォームは MaiAgent 管理画面のアカウント申請と同じ（氏名、会社名、会社のメールアドレス、パスワード、招待コード）で、作成されるのは MaiAgent プラットフォームのアカウントです。そのままログインページに戻って Web Chat にログインできますが、このアカウントがご自身の組織のメンバーになることはなく、管理画面の権限も付与されません。ページはボット対策の認証で保護されています。下記の[訪問者に表示されるその他のメッセージ](#other-visitor-prompts)をご覧ください。

有効にすると、会話を開始する前に次の画面が表示され、ログインが求められます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-64de17901f8cb6979d092e523f309cbf98c493d2%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20174017.png?alt=media" alt=""><figcaption></figcaption></figure>

### 3. Keycloak ログイン ID を使ってツールを呼び出す <a href="#keycloak-token-passthrough" id="keycloak-token-passthrough"></a>

訪問者が Keycloak で Web Chat にログインしている場合、Agent がその訪問者に代わって [MCP ツール](/maiagent-user-guide/ja/build/tools/mcp-setup.md)や [API ツール](/maiagent-user-guide/ja/build/tools/setup_api_tool.md)を呼び出す際に、**訪問者本人の Keycloak ログイン認証情報**を自動的に付与できます。お客様のバックエンドシステムはリクエストを受け取ると、同じ Keycloak を使って「誰からのリクエストか」を検証し、その人が閲覧権限を持つデータだけを返せます。ツールごとに別のアカウントを設定したり、訪問者にもう一度ログインを求めたりする必要はありません。

この機能はデフォルトで無効です。無効の間は、すべてのツールの呼び出し方法はまったく変わりません。

#### 利用シーン <a href="#keycloak-token-passthrough-scenario" id="keycloak-token-passthrough-scenario"></a>

ある企業の社内サービスポータルでは、Keycloak で従業員アカウントを管理し、Web Chat を従業員専用の Agent として使っています。IT 管理者が会話プラットフォームでこの機能を有効にし、社内の休暇申請システムのホストを許可リストに追加しました。従業員が Web Chat にログインして「有給休暇はあと何日残っていますか？」と質問すると、Agent が休暇申請システムの API ツールを呼び出し、そのリクエストにはこの従業員自身のログイン認証情報が付与されます。休暇申請システムは認証情報から本人であることを識別し、その従業員の勤怠データだけを返します。別の従業員が質問した場合は、その従業員自身のデータが返されます。

#### 事前準備 <a href="#keycloak-token-passthrough-prerequisites" id="keycloak-token-passthrough-prerequisites"></a>

* 組織で [Keycloak 連携](/maiagent-user-guide/ja/org/sso/sso-keycloak.md)が完了していること。訪問者はこの組織のメンバーである必要があります。この組織に設定された Keycloak で初めてログインすると、システムが自動的にアカウントを作成して組織に追加します（[サードパーティログイン：初回ログイン](/maiagent-user-guide/ja/org/sso.md#first-login)をご覧ください）。
* 会話プラットフォームの「<mark style="color:blue;">ログイン設定</mark>」で「<mark style="color:blue;">ログイン機能を有効にする</mark>」が有効になっており、「<mark style="color:blue;">ログインソース</mark>」で Keycloak が選択されていること。
* 認証情報を受け取る MCP／API ツールが作成済みで、この会話プラットフォームで使用する Agent に割り当てられていること。また、相手側のシステムがお客様の Keycloak Realm が発行した認証情報を検証できること。

#### 設定手順 <a href="#keycloak-token-passthrough-steps" id="keycloak-token-passthrough-steps"></a>

設定場所：左側メニューの「<mark style="color:blue;">カスタマーサポート > 会話プラットフォーム</mark>」で、ウェブサイトタイプの会話プラットフォームを選択し、「<mark style="color:blue;">ログイン設定</mark>」タブを開きます。ログインソースで Keycloak を選択すると、下にこのセクションが表示されます。

1. 「<mark style="color:blue;">Keycloak ログイン ID を使ってツールを呼び出す</mark>」を有効にします。
2. スイッチの下に表示される赤い警告「<mark style="color:blue;">訪問者本人のログイン認証情報を次のホストに転送します</mark>」を読み、認証情報の送信先を理解していることを確認します。
3. 「<mark style="color:blue;">認証情報の受信を許可するツールのホスト</mark>」に、認証情報を受け取るツールのホストを 1 行に 1 つずつ入力します（カンマ区切りも使用できます）。
   * ホスト名のみを入力します。`https://`、ポート番号、パスは含めません。例：`mcp.example.com`
   * `*.example.com` は `example.com` 自体とそのすべてのサブドメインを表します。`*.` が付いていないホスト名は、完全に一致するホストのみが対象です。
   * ホスト名は、ツールの「MCP サーバー URL」または「API URL」と照合されます。
4. 設定を保存します。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-affd050ebc568fa2c5cad82c542d3f53cefe8493%2Fwebchat-keycloak-token-passthrough.png?alt=media" alt="Keycloak ログイン ID を使ってツールを呼び出す機能を有効にした後の警告と許可ホストの一覧"><figcaption><p>有効にすると認証情報の転送に関する警告が表示され、認証情報の受信を許可するツールのホストを入力する必要があります</p></figcaption></figure>

スイッチを有効にするときは、一覧に少なくとも 1 つのホストを入力する必要があります。一覧が空の場合や、無効なホスト名が含まれている場合は、画面に「<mark style="color:blue;">有効にするには、認証情報の受信を許可するツールのホストを少なくとも 1 つ入力してください</mark>」または「<mark style="color:blue;">以下は有効なホスト名ではありません</mark>」と表示され、設定は送信されません。

{% hint style="warning" %}
**有効にした後、訪問者は一度ログインし直す必要があります。** プラットフォームは、訪問者のログイン時にのみ Keycloak の認証情報を保存し、しかもいずれかの会話プラットフォームでこの機能が有効になっている場合に限られます。有効にする前からログインしていた訪問者は、いったんログアウトしてから再度ログインしてもらってください。以降のツール呼び出しから認証情報が付与されます。
{% endhint %}

#### 相手側のシステムが受け取る内容 <a href="#keycloak-token-passthrough-request" id="keycloak-token-passthrough-request"></a>

Agent が許可リスト内のホストの MCP／API ツールを呼び出すと、リクエストには次の HTTP ヘッダーが追加されます。

```
Authorization: Bearer <訪問者の Keycloak access token>
```

これは、お客様の Keycloak Realm がその訪問者に発行した標準の access token です。連携を担当するエンジニアは、Keycloak トークンの一般的な検証方法（署名の検証、有効期限と Realm の確認）でユーザーを識別できます。認証情報の有効期限が切れた場合は、プラットフォームがその訪問者のログイン状態を使って同じ Keycloak で更新してから送信するため、ツール側で更新を処理する必要はありません。

#### 認証情報が付与される場合と付与されない場合 <a href="#keycloak-token-passthrough-behavior" id="keycloak-token-passthrough-behavior"></a>

| 状況                                                                                                                                           | 結果                                                              |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| 訪問者が Keycloak でログイン済みでログイン状態が続いており、ツールのホストが許可リストにある                                                                                          | 訪問者本人の認証情報を付与する                                                 |
| ツールのホストが許可リストにない                                                                                                                             | 通常どおり呼び出し、認証情報は付与しない                                            |
| ツール自体に `Authorization` が設定されている（OAuth、API ツールのヘッダー、[連絡先 MCP の認証情報](/maiagent-user-guide/ja/build/tools/setup-contacts-mcp-credentials.md)など） | 上書きせず、ツール本来の認証方法を維持する                                           |
| 訪問者がログアウトしている、またはこの組織のメンバーではない                                                                                                               | 認証情報は付与しない                                                      |
| 訪問者が [Source ID によるログイン不要アクセス](/maiagent-user-guide/ja/build/choose-channel/web-chat/source-id-access.md)で会話に入った                             | 認証情報は付与しない。身元は会話作成時に紐付けられた組織メンバーに基づき、埋め込み側が渡した Source ID は採用しない |
| スイッチが無効                                                                                                                                      | この機能を有効にしていない場合と同じ                                              |

{% hint style="danger" %}
転送されるのは訪問者本人のログイン認証情報の全体であり、受け取ったシステムは訪問者の身元で、同じ Keycloak が保護する他のサービスにもアクセスできます。許可リストには、信頼できて、かつユーザーの識別が本当に必要なホストだけを入れ、範囲の広すぎるワイルドカードは避けてください。
{% endhint %}

{% hint style="info" %}
訪問者がログアウトすると、プラットフォームは保存済みの認証情報を失効させます。同じ Keycloak サイトで、この機能を有効にしている会話プラットフォームが 1 つもなくなった場合（スイッチを無効にした、別のログインソースに切り替えた、または会話プラットフォームを削除した場合）、プラットフォームは保存済みの訪問者の認証情報をすべて削除します。
{% endhint %}

## <mark style="color:blue;">八、データ収集（Pre-chat フォーム）</mark> <a href="#pre-chat-form" id="pre-chat-form"></a>

データ収集を有効にすると、訪問者は会話を開始する前にフォームが表示され、入力を完了しないと会話に進めません。入力内容はその訪問者の[連絡先](/maiagent-user-guide/ja/serve/daily-operations/contact.md)に書き込まれ、カスタマーサポートは会話ページで直接確認できます。「まず相手が誰かを知りたい」場面に適しています。たとえば、販売代理店向けのサポートで会社名と法人番号を収集する場合や、イベントの問い合わせで氏名とメールアドレスを収集する場合などです。

### 1. データ収集フォームの設定 <a href="#pre-chat-config" id="pre-chat-config"></a>

パス：<mark style="color:blue;">カスタマーサポート</mark> → <mark style="color:blue;">会話プラットフォーム</mark> → Web Chat の会話プラットフォームをクリック → <mark style="color:blue;">データ収集</mark> タブ。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-fa62f86ab7ff682fcd9c0907a8a126acf6672991%2Fweb-chat-prechat-settings.png?alt=media" alt="データ収集タブ"><figcaption><p>「データ収集」タブ：左側にスイッチ、タイトル、フィールドの設定があり、右側の「ライブプレビュー」にフォームの見た目が同期して表示されます</p></figcaption></figure>

{% stepper %}
{% step %}

### フォームを有効にする <a href="#pre-chat-enable-form" id="pre-chat-enable-form"></a>

<mark style="color:blue;">Pre-chat フォームを有効にする</mark> をオンにします。有効にしていない場合、訪問者は従来どおり直接会話に進みます。
{% endstep %}

{% step %}

### タイトルとサブタイトルを設定する（任意） <a href="#pre-chat-form-title" id="pre-chat-form-title"></a>

* <mark style="color:blue;">フォームタイトル</mark>：フォームの上部に表示されます。未入力の場合は、システムのデフォルト文言「会話を始める前に、ひとつ質問です」が使用されます。
* <mark style="color:blue;">フォームサブタイトル</mark>：フォームの説明文です。`{name}` を使うと会話プラットフォーム名を差し込めます。未入力の場合は、デフォルト文言「{name} がよりパーソナライズされたサービスを提供できるよう、情報をご入力ください」が使用されます。

どちらも多言語に対応しており、言語タブを切り替えてそれぞれ入力できます。
{% endstep %}

{% step %}

### フィールドを追加する <a href="#pre-chat-add-fields" id="pre-chat-add-fields"></a>

<mark style="color:blue;">フィールドを追加</mark> をクリックします。各フィールドでは次の項目を設定できます。

| 設定項目                                                   | 説明                                                                                                                                                                                                                                                  |
| ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">フィールドタイプ</mark>              | テキスト、メールアドレス、電話番号、ドロップダウンの 4 種類                                                                                                                                                                                                                     |
| <mark style="color:blue;">フィールドラベル</mark>              | 訪問者に表示されるフィールド名。言語ごとに入力できます                                                                                                                                                                                                                         |
| <mark style="color:blue;">プレースホルダー（Placeholder）</mark> | フィールド内に表示されるグレーのヒント                                                                                                                                                                                                                                 |
| <mark style="color:blue;">必須</mark>                    | チェックすると、訪問者は未入力のままでは送信できません                                                                                                                                                                                                                         |
| <mark style="color:blue;">対応する Contact フィールド</mark>    | データを連絡先のどこに書き込むかを決めます：<mark style="color:blue;">氏名（Contact.name）</mark>、<mark style="color:blue;">メールアドレス（Contact.email）</mark>、<mark style="color:blue;">電話番号（Contact.phoneNumber）</mark>、または <mark style="color:blue;">カスタムフィールド（Metadata）</mark> |

ドロップダウンタイプには <mark style="color:blue;">選択肢</mark> のリストもあり、<mark style="color:blue;">「その他」の自由入力を許可する</mark> にチェックすると、訪問者が「その他」を選んで内容を自分で入力できます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-6003c1d8c3373fe2ad0ab3686474f5c2d61d442e%2Fweb-chat-prechat-field-editor.png?alt=media" alt="フィールド編集エリア"><figcaption><p>各フィールドで、フィールドタイプ、フィールドラベル（多言語）、プレースホルダー、対応する Contact フィールド、必須を設定できます</p></figcaption></figure>

フィールドはドラッグして順序を変更でき、1 つのフォームには最大 10 個のフィールドを設定できます。右側のプレビューエリアにはフォームの見た目がリアルタイムで表示され、<mark style="color:blue;">プレビュー言語</mark> を切り替えて各言語版を確認できます。
{% endstep %}

{% step %}

### 保存する <a href="#pre-chat-save-form" id="pre-chat-save-form"></a>

プレビューに問題がないことを確認して保存すると、Web Chat にすぐ反映されます。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**対応する Contact フィールドの制限**

* 氏名は「テキスト」タイプ、メールアドレスは「メールアドレス」タイプ、電話番号は「電話番号」タイプにのみ対応付けられます。タイプが一致しない場合は、選択できない旨が表示されます。
* 氏名、メールアドレス、電話番号は、それぞれ 1 つのフォームフィールドにしか対応付けられません。それ以外のフィールド（法人番号、会社名など）は「カスタムフィールド（Metadata）」を選択してください。
  {% endhint %}

### 2. 訪問者の入力フロー <a href="#pre-chat-visitor-flow" id="pre-chat-visitor-flow"></a>

訪問者が Web Chat を開くと、まずフォーム画面が表示されます。タイトル、サブタイトル、設定したフィールド、右上の言語切り替えが表示されます。入力後に <mark style="color:blue;">会話を開始</mark> を押すと会話に進みます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-72d96183b2932a7f3a53fa26e25b0c44693d9976%2Fweb-chat-prechat-form.png?alt=media" alt="訪問者に表示されるフォーム"><figcaption><p>訪問者が Web Chat を開くと最初にフォームが表示されます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-80e055ba2910bb69258325f5f6f23ee481ba7342%2Fweb-chat-prechat-form-filled.png?alt=media" alt="入力完了"><figcaption><p>入力が完了したら「会話を開始」を押します</p></figcaption></figure></div>

* 必須フィールドが未入力の場合や、メールアドレスまたは電話番号の形式が正しくない場合は、フィールドの下にエラーが表示され、送信できません。
* 同じブラウザで一度入力すると、以降に同じ Web Chat を開いても再度入力を求められることはありません。
* 訪問者が情報を修正したい場合は、Web Chat の右上にある <mark style="color:blue;">⋮</mark> メニューから <mark style="color:blue;">情報を再入力</mark> をクリックすると、フォームが再び表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-cc226e66c15e542470c95f0dd2b494f604ad81ec%2Fweb-chat-prechat-menu-refill.png?alt=media" alt="情報を再入力"><figcaption><p>右上の ⋮ メニューにある「情報を再入力」</p></figcaption></figure>

### 3. ログイン機能との併用：ログインアカウントに対応するデータ <a href="#pre-chat-with-login" id="pre-chat-with-login"></a>

同じ Web Chat で [ログイン機能](#login-config) とデータ収集の両方を有効にした場合の流れは、**ログイン → フォーム入力 → 会話開始** です。ユーザーが入力した情報は、ブラウザではなくログインアカウントに紐付けられます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-b190160bed2cd104cb0e87160c4a63c047689a70%2Fweb-chat-prechat-login-settings.png?alt=media" alt="ログイン設定タブ"><figcaption><p>「ログイン設定」タブ：「ログイン機能を有効にする」をオンにしてログインソースを選択します。「データ収集」タブとは独立しています</p></figcaption></figure>

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f9c71c232b1bbdd9ee1880cf922a6361d2420e5e%2Fweb-chat-prechat-login-page.png?alt=media" alt="ログイン画面"><figcaption><p>① Web Chat を開くと最初にログイン画面が表示されます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-020c77245a78280ffc81ed879bdb2a9613f3cdeb%2Fweb-chat-prechat-login-form.png?alt=media" alt="ログイン後のフォーム"><figcaption><p>② ログイン後にデータ収集フォームが表示されます</p></figcaption></figure></div>

| 状況                                                           | Web Chat の動作                                       |
| ------------------------------------------------------------ | -------------------------------------------------- |
| アカウントを初めて利用し、まだフォームに入力していない                                  | ログイン後にフォームが表示されます。送信すると、そのアカウントに対応する連絡先が 1 件作成されます |
| 同じアカウントで別のデバイスや別のブラウザからログインした                                | フォームは表示されず、アカウントに既にあるデータでそのまま会話を開始します              |
| このデバイスで以前ログインせずにフォームに入力しており、アカウント自体にはまだデータがない                | 「このデータはあなたのものですか？」という確認画面が表示されます（下記の説明をご覧ください）     |
| アカウントに既にデータがあり、このデバイスにもログインせずに入力したデータが別にある                   | アカウントのデータが優先されます。確認も統合も行いません                       |
| ログイン済みのユーザーが <mark style="color:blue;">情報を再入力</mark> をクリックした | アカウントに既にある連絡先が更新され、新しく増えることはありません                  |

**確認画面：このデータはあなたのものですか？**

このデバイスで以前ログインせずにフォームに入力した人がいて、現在ログインしているアカウントにまだデータがない場合、ログイン後すぐにフォームは表示されず、先に確認画面が表示されます。画面にはこのデバイスで以前入力された内容（一部は伏せ字）が表示され、2 つのボタンが用意されています。

* <mark style="color:blue;">はい、私のものです</mark>：そのデータを現在のアカウントに紐付けます。以降は、同じアカウントでどのデバイスからログインしても再入力は不要です。
* <mark style="color:blue;">いいえ</mark>：統合は行わず、元のデータはそのまま残ります。続けてフォームが表示されるので、ユーザー自身で一度入力してください。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f8d35bfa6b85a7ec60a08eb8e73cc09904338eb6%2Fweb-chat-prechat-claim.png?alt=media" alt="このデータはあなたのものですか？確認画面"><figcaption><p>確認画面では内容の一部が伏せ字になり、ユーザーが自分で入力したデータかどうかだけを判断できます</p></figcaption></figure>

{% hint style="info" %}

* ログイン機能をオンにしていない Web Chat は影響を受けず、これまでどおりブラウザーでフォームに入力済みかどうかを判断します。
* システムはアカウント情報からフォームの内容を自動入力しません。アカウントを初めて使うときは、管理画面にすでにそのユーザーのデータがあっても、一度入力をお願いします。
  {% endhint %}

会話を開始すると、Agent もカスタマーサポートの管理画面も、このアカウントに対応する連絡先を参照します。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f9a99f4c93d7d3395efb4d6f27175d2469857745%2Fweb-chat-prechat-login-chat.png?alt=media" alt="ログイン後の会話"><figcaption><p>Agent はフォームに入力された氏名でユーザーに呼びかけます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-3236973f772f1fb9b44df23cb6812d8c0980bac6%2Fweb-chat-prechat-conversation-login.png?alt=media" alt="管理画面の会話ページ"><figcaption><p>管理画面の会話ページには、その連絡先とフォームで受け取った法人番号が表示されます</p></figcaption></figure></div>

### 4. 管理画面で受け取ったデータを確認する <a href="#pre-chat-view-data" id="pre-chat-view-data"></a>

**会話で確認する**：<mark style="color:blue;">カスタマー対話</mark> → <mark style="color:blue;">すべての対話</mark> → 会話を開くと、右側の <mark style="color:blue;">連絡先データ</mark> ブロックにフォームで受け取った内容が項目ごとに表示されます。Email や電話に対応付けたフィールドは「メールアドレス」「電話番号」と表示され、カスタムフィールドは設定したフィールドラベルで表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-efe6eb93e6c245a6c4dd2e98e793cc07bd69668f%2Fweb-chat-prechat-conversation-contact.png?alt=media" alt="会話ページ右側の連絡先データブロック"><figcaption><p>会話ページ右側の「連絡先データ」に、フォームで受け取った内容が項目ごとに表示されます</p></figcaption></figure>

{% hint style="info" %}
連絡先一覧の「連絡先」列には Contact の氏名が表示されます。フォームの氏名フィールドが「氏名（Contact.name）」ではなく「カスタムフィールド（Metadata）」に対応付けられている場合、未ログインの訪問者の連絡先は「匿名」と表示され、氏名はカスタム属性にのみ表示されます。一覧で訪問者の氏名を直接確認したい場合は、氏名フィールドを「氏名（Contact.name）」に対応付けてください。
{% endhint %}

**連絡先ページで確認する**：<mark style="color:blue;">カスタマー対話</mark> → <mark style="color:blue;">連絡先</mark> → 連絡先を開くと、<mark style="color:blue;">基本情報</mark> タブに氏名と電話番号が、<mark style="color:blue;">カスタム属性</mark> タブにその他のフォームフィールドが表示されます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-45f6d1ebb32ce47284176306f8353e503c88539c%2Fweb-chat-prechat-contacts-list.png?alt=media" alt="連絡先一覧"><figcaption><p>連絡先一覧は氏名、Email、電話番号で検索できます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-9bc3a0bf13c97c7eed1f5223b76a9bca113962f5%2Fweb-chat-prechat-contact-attributes.png?alt=media" alt="カスタム属性タブ"><figcaption><p>「カスタム属性」タブにフォームの各フィールドの値が表示されます</p></figcaption></figure></div>

ログイン済みのユーザーが入力したデータはそのユーザーのアカウントに対応付けられ、持ち主のいない匿名の連絡先にはなりません。連絡先名はフォームの設定によって決まります。氏名フィールドが「氏名（Contact.name）」に対応付けられている場合はフォームに入力された氏名が表示され、氏名フィールドがない場合はログインアカウントの名前が表示されます。

## 訪問者に表示されるその他のメッセージ <a href="#other-visitor-prompts" id="other-visitor-prompts"></a>

以下は、会話中にときどき表示されるものの、管理者による設定が不要なメッセージです。訪問者からの質問に答えやすいよう、ここにまとめています。

| 画面                                                                         | 表示されるタイミング                                                                                                                                                                                                      | 対処方法                                                                                                                                   |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| ログイン、新規登録、パスワード再設定ページの人間確認ボックス、「操作が頻繁すぎます。しばらくしてからもう一度お試しください。」            | ログイン機能をオンにした Web Chat では、この 3 つのページに Cloudflare Turnstile による確認が追加されます。短時間に多くのリクエスト（たとえば新しい会話を続けて開く、メッセージを続けて送るなど）を送信すると、頻度制限がかかります                                                                             | 確認ボックスにチェックが入ってから送信してください。制限された場合は、少し待ってからもう一度お試しください                                                                                  |
| 下部パネル「{App 名} App をインストール」                                                 | スマートフォンのブラウザーで単独の全画面ページを開くと、Web Chat をホーム画面に追加してアプリとして使えます。Android では <mark style="color:blue;">今すぐインストール</mark> が表示されます。iPhone の Safari では「ホーム画面に追加」の手順が表示され、iPhone のその他のブラウザーでは Safari の利用をおすすめするメッセージが表示されます | インストールしない場合は <mark style="color:blue;">次回通知</mark> を押すと、1 日以内は再表示されません。すでにアプリとしてインストールして開いている場合は表示されません                                |
| 「内容が長すぎます（全 N 文字）。プレーンテキストで表示しています」＋<mark style="color:blue;">全文を表示</mark> | 1 件の返信が 50,000 文字を超える場合（または 1 行が 2,000 文字を超える場合）、Markdown の書式は適用されず、先頭の 2,000 文字が表示されます                                                                                                                         | <mark style="color:blue;">全文を表示</mark> を押すと展開され、<mark style="color:blue;">折りたたむ</mark> を押すと元に戻ります                                      |
| 「内容が大きすぎます（全 N 文字）。先頭部分のみ表示しています」                                          | ツールが返した JSON データが大きすぎる場合                                                                                                                                                                                        | 画面上で切り詰められているだけで、Agent は完全なデータを受け取っています                                                                                                |
| 「以前の長いメッセージは一部省略されました（約 N 文字）。アシスタントは内容全体を確認できていない可能性があります」                | 会話が非常に長い場合、システムがコンテキストの長さを抑えるために、以前の長いメッセージを省略します                                                                                                                                                               | Agent にその内容を参照してほしい場合は、該当箇所をもう一度貼り付けてください。[引き継ぎ要約](/maiagent-user-guide/ja/work/maigpt/chat/conversation-handoff.md)で新しい会話を開始することもできます |
| 返信の横の小さなラベル「この返信はチームメンバー「{名前}」が作成しました」                                     | Agent が [Agent チーム](/maiagent-user-guide/ja/build/teams.md)に属しており、この返信がチーム内のメンバー Agent によって回答された場合                                                                                                              | 対処は不要です                                                                                                                                |
| 「{Agent} に委任しています／引き継いでいます／切り替えています」、サブエージェントのタスクカード                       | マルチ Agent 連携で、メイン Agent がタスクをサブエージェントに引き渡して実行させている場合                                                                                                                                                            | カードには返信中／完了が表示されます。完了するまでお待ちください                                                                                                       |
| 「位置情報を取得しています...」「位置情報を取得できません。設定で位置情報の権限をオンにしてください」「位置情報を取得しました」          | 管理者が[位置情報](/maiagent-user-guide/ja/build/conversation-settings/platform-settings/function-settings.md#gps-location)をオンにしており、ブラウザーが位置情報の許可を求めている場合                                                               | 位置情報を許可してから送信してください。拒否した場合も Agent は回答しますが、位置情報は使われません                                                                                  |
| 「{サービス} に接続」認可カード                                                          | Agent が訪問者自身のアカウントで外部サービスにアクセスする必要がある場合                                                                                                                                                                         | [連携済みのサービス](/maiagent-user-guide/ja/build/choose-channel/web-chat/connected-services.md)をご覧ください                                        |
| 動画生成カード（待機中／生成中／所要時間の目安 60～90 秒）                                           | Agent が動画生成ツールを使用している場合                                                                                                                                                                                         | 完了するまでお待ちください。詳細は [AI 動画生成](/maiagent-user-guide/ja/work/maigpt/video.md)をご覧ください                                                       |

## 接続に失敗した場合は？ <a href="#connection-failure" id="connection-failure"></a>

たとえば、サイト管理者が訪問者から「Web Chat を開くと接続できないと表示される」という報告を受けたとします。訪問者はまずシステムによる自動再試行を待ち、それでもエラー画面が表示される場合は、失敗した段階、エラーの分類、発生時刻が含まれる画面全体のスクリーンショットを管理者に渡してください。管理者がより早く原因を判断できます。

Web Chat が Agent の設定を読み込む際にネットワークが切断された場合は、まず自動的に再試行し、その間は読み込み中の画面が維持されます。再試行しても接続できない場合は、エラー画面に次の内容が表示されます。

* 失敗した読み込みの段階
* エラーの分類（HTTP ステータスコードがある場合はあわせて表示）
* エラーが発生した現地時刻

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-e24edbd1a83fd7f69430443a8a74158aeb6a117b%2Fweb-chat-connection-failure-network.png?alt=media" alt="Agent 設定の読み込み段階でネットワーク接続の失敗を示す Web Chat の診断画面"><figcaption><p>自動再試行でも失敗した場合、画面に失敗した段階、エラーの分類、発生時刻が表示されます</p></figcaption></figure>

システムが HTTP エラーステータスコードを受け取っている場合は、サーバーが応答したことを意味します。この場合は自動再試行を行わず、診断用のエラー画面がそのまま表示されます。

{% hint style="info" %}
まずデバイスが正常にインターネットに接続できることを確認してから、エラー画面の<mark style="color:blue;">再試行</mark>を押してください。問題が続く場合は、スクリーンショットを撮る際に診断情報をすべて残し、会話の内容や個人情報が画面に写らないようにしてください。
{% endhint %}

## 返信の生成中に前の内容を見返す <a href="#review-during-generation" id="review-during-generation"></a>

Agent が返信を生成している間も、訪問者は上にスクロールして前のメッセージを見返せます。返信は下で引き続き生成されますが、画面は訪問者がスクロールした位置に留まり、新しく表示される文字に引っ張られることはありません。最新の位置から離れると、入力ボックスの上に<mark style="color:blue;">最新に戻る</mark>が表示されます。

### 利用シーン <a href="#generation-scroll-scenario" id="generation-scroll-scenario"></a>

訪問者が Agent に複数のプランを一度に比較するよう依頼しました。回答がまだ書き終わらないうちに、最初のプランの価格を確認したくなり、上にスクロールします。画面はその場に留まり、後ろの文字が出続けても動きません。確認し終えたら<mark style="color:blue;">最新に戻る</mark>を押すと、画面は最後の質問の位置に戻り、残りの比較内容を続けて読めます。

### 操作方法 <a href="#generation-scroll-steps" id="generation-scroll-steps"></a>

{% stepper %}
{% step %}

### 1. 上にスクロールする <a href="#scroll-up-during-generation" id="scroll-up-during-generation"></a>

Agent が返信を生成している間に、マウスホイール、タッチ操作、またはスクロールバーのドラッグで上にスクロールします。
{% endstep %}

{% step %}

### 2. その場で読む <a href="#read-in-place" id="read-in-place"></a>

画面はスクロールした位置に留まり、生成中の新しい内容によって現在の位置が変わることはありません。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-537d8652530560963f91fe83d44727c547068051%2Fwebchat-back-to-latest.png?alt=media" alt="返信の生成中に上へスクロールした Web Chat。入力ボックスの上に「最新に戻る」が表示されている"><figcaption><p>返信はまだ生成中です（入力ボックスの右側は四角い停止ボタン）。上にスクロールすると、入力ボックスの上に「最新に戻る」が表示されます</p></figcaption></figure>
{% endstep %}

{% step %}

### 3. 最新に戻る <a href="#press-back-to-latest" id="press-back-to-latest"></a>

<mark style="color:blue;">最新に戻る</mark>を押すと、画面は最後の質問の位置に戻り、最新の内容への自動追従が再開されます。
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/maiagent-user-guide/ja/build/choose-channel/web-chat.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.