> 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/maiagent-user-guide-ja/conversations/web-chat.md).

# Web Chat 紹介総覧

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

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

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

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

* 公式サイトのサービスに埋め込み、サイト標準搭載のインテリジェントアシスタントとして機能します
* ユーザーの通常のブラウジングを妨げず、必要なときにいつでも利用できます
* 一般的なカスタマーサポートや問い合わせ対応に適しています

### 2. フルスクリーン埋め込み <a href="#embed-fullscreen" id="embed-fullscreen"></a>

* 充実した対話体験を提供します
* 複雑な問い合わせやサービスフローに適しています
* 企業のニーズに合わせてカスタマイズデザインが可能です

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

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

## <mark style="color:blue;">二、企業スタイルに合った Web Chat サービスの構築</mark> <a href="#branding" id="branding"></a>

MaiAgent では、LOGO・アバター・問答のテーマカラーなどをカスタマイズできる機能を提供し、企業スタイルに合った Web Chat サービスの構築を支援します。

以下の機能を通じて、

1. アシスタントの表示名を選択する
2. 自社の企業 LOGO をアップロードする
3. AI アシスタントの表示アバターを選択する
4. Web Chat のテーマカラーを選択する
5. AI アシスタントが回答する際のメッセージ背景色を選択する

など、自社ならではの Web Chat の外観を構築できます。

このように、企業のカラーニーズに応じて、企業スタイルに合った Web Chat サービスを構築できます。

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

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

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

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

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

* メッセージの吹き出しの背景色を入念に設計し、視覚的な疲労を防ぎます
* リンクや重要な情報には高コントラストの色を使用し、明確に識別できるようにします
* 入力欄やボタンの枠線の色を最適化し、操作体験を向上させます

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

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

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

* 夜間の利用や低照度の環境
* 長時間の対話における目の疲労の軽減
* 企業ブランドに合ったダーク系のデザインスタイル

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

Web Chat サービスに初めてアクセスした際に、以下のようなシーンに応じて、自社ならではの AI アシスタントの挨拶メッセージを自由に設定できます。

### **1. 挨拶メッセージのカスタマイズ** <a href="#greeting" id="greeting"></a>

#### **ブランドに合わせた挨拶**

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

#### **誘導型の挨拶**

「製品情報の照会、利用上の問題への回答、注文処理のお手伝いができます」と設定することで、提供可能なサービス範囲をユーザーに明確に伝え、サービス能力への信頼感を築けます。

### 2. 誘導型の開始質問 <a href="#starter-questions" id="starter-questions"></a>

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

ユーザーは開始質問をクリックして対話を始められ、問答の進行をスピードアップできます。

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

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

ユーザーの使用言語に応じて回答し、コミュニケーションの障壁を取り除きます。

* **自動検出**：ユーザーが入力した言語に基づいて、アシスタントの回答言語を選択します

**手動切り替え**：

1. Web Chat のインターフェースで使用言語を選択します。詳しくは[多言語対](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-ja/conversations/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[応](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-ja/conversations/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[：Web Chat チャット設定](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-ja/conversations/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)をご覧ください。
2. Web Chat の初期化スクリプト（javascript）で AI アシスタントの回答言語を指定します。詳しくは[技術者向けマニュアル—Web Chat 初期化](https://docs.maiagent.ai/tech/api-integration/web-chat-chu-shi-hua#e5-9b-9bweb-chat-e5-b5-8c-e5-85-a5-e8-88-87-e8-aa-9e-e8-a8-80-e8-a8-a-d-e5-ae-9a)をご覧ください。

{% hint style="info" %}
対応言語の一覧については、[多言語対](/maiagent-user-guide/maiagent-user-guide-ja/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[応](/maiagent-user-guide/maiagent-user-guide-ja/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[：対応言語の一覧](/maiagent-user-guide/maiagent-user-guide-ja/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)をご覧ください
{% endhint %}

### 2. マルチモーダル問答 <a href="#multimodal" id="multimodal"></a>

テキストでの問答に加えて、AI アシスタントはさまざまな種類のファイルのアップロードにも対応しています。

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

{% hint style="info" %}
ユーザーによる添付ファイルのアップロードを許可せず、テキストのみで対話させることで、対話のセキュリティを確保することもできます。
{% endhint %}

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

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

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

**画像での回答機能**

* **製品画像の表示**：回答に製品の実物画像を含めます
* **操作ガイド図**：ステップごとの操作スクリーンショットを提供します

例：

1. ユーザーが MaiAgent アシスタントの設定場所を尋ねると、アシスタントが設定画面を画像で回答します
2. ユーザーがスクリーンショットを送ってそのパスが正しいかをアシスタントに確認し、アシスタントが正しく解析して回答します

#### ファイル処理能力

**対応ファイル形式**

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

**ファイルインタラクション機能**

* **ファイル内容の照会**：アップロードされたファイルに基づいて特定の質問に回答します
* **データ分析**：表のデータを自動分析し、統計情報を表形式で提供します
* **ファイルの要約**：長いファイルの重要な内容の要約を生成します

***

例 1：AI アシスタントにデータ内容を表形式で提示し、参考資料のリンクを提供するよう依頼します

例 2：アシスタントに売上内容を分析し、表で解析するよう依頼します

例 3：docx ファイルを送信し、アシスタントに CV 作成上の問題の分析を依頼します

{% hint style="success" %}
AI アシスタントは回答時にすべて Markdown 形式で回答し、整然と回答内容を構成します。
{% endhint %}

## <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 はユーザーの対話履歴を自動的に記憶し、毎回の対話を以前の内容の上に積み重ねられるようにします。

**記憶する内容の範囲**

* **対話内容**：テキスト・画像・ファイルなどを含む完全な問答記録
* **サービス状態**：未完了の照会、未処理の問題

ユーザーは Web Chat の左側の対話リストで過去の対話記録を確認したり、新しい対話を開始したりできます。

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

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

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

AI アシスタントに相談した後、対話を友人や同僚に共有したい場合や、社内チームで協力して顧客の問題を検討する必要がある場合は、MaiAgent のサービスで対話共有リンクを生成できます。

**共有される内容**

* **完全な対話記録**：すべてのテキスト・画像・ファイルなどの内容を含みます
* **対話の要約**：対話の要点の要約を自動生成します
* **関連リソース**：対話中で言及された製品リンクやファイルなど

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

* **顧客への共有**：「このキャンプ用品のおすすめはとても良いので、登山サークルに共有しよう」
* **社内協力**：カスタマーサポート担当者が複雑な問題を技術サポートチームに共有する
* **トレーニング用途**：典型的な対話事例を従業員研修の教材として共有する

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

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

**インテリジェントなフィルタリングの仕組み**

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

**対話の継続性の保証**

* ユーザーが通常の対話の途中で意図せずタイムアウトしないようにします
* 長時間の検討や中断の後でも対話を続けられます
* システムが対話が進行中かどうかをインテリジェントに判断します

**実際の動作**

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

この最適化により、対話体験がより滑らかで自然になり、ユーザーは検討時間が長くなって対話が中断されることを心配する必要がなくなります。

## <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>

AI アシスタントが推論時に使用したツールの一覧をユーザーに表示するかどうかを選択できます。表示を許可した場合、AI アシスタントが回答を生成する際に以下の画面が表示されます。

この一覧を通じて、AI アシスタントが使用したツールの内容が正しいかどうかを追跡できます。

### **2. 引用ファイル一覧の表示** <a href="#show-citations" id="show-citations"></a>

各 AI の回答には引用ファイルの一覧が自動生成され、情報の出典を明確に示すことで、回答の信頼性とトレーサビリティを高めます。

**表示設定**

企業はニーズに応じて、引用したツール一覧や参考ファイル名の内容をユーザーに表示するかどうかを設定できます。表示を許可した場合、AI アシスタントの回答の下部に以下の一覧が表示されます。「引用ノード」をクリックすると、参考にしたファイルの断片を確認できます。

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

* **公開カスタマーサポート**：すべての引用情報を表示し、信頼感を築きます
* **社内サポート**：機密ファイルを非表示にし、機密情報を保護します
* **教育機関**：学習リソースを表示し、学生が参照しやすくします

## <mark style="color:blue;">七、対話権限の保護 - 安全で管理可能な対話環境</mark> <a href="#access-control" id="access-control"></a>

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

**強制ログインの仕組み**

対話内容のセキュリティと管理可能性を確保するため、企業はログイン機能を有効にし、ユーザーが AI アシスタントサービスを利用する前に必ずログインするよう求めることができます。設定が完了すると、訪問者が Web Chat をクリックした際にまずログインページが表示され、ログインに成功したユーザーのみが AI アシスタントとの対話を開始できます。

**セキュリティ上のメリット**

* **本人認証**：対話するすべてのユーザーが明確な身元を持つようにします
* **権限制御**：ユーザーの身元に応じて対応するサービス内容を提供します
* **対話の追跡**：各ユーザーの対話履歴を完全に記録します
* **データ保護**：未認可のユーザーによる機密情報へのアクセスを防ぎます

### 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 プロバイダーを構成します
* **実際の活用例**：複数システムのユーザー ID を統合し、権限を一元管理します

**MaiAgent ログイン**

* **適用シーン**：シンプルなユーザー管理のニーズ、迅速な導入
* **特徴**：ユーザー管理システムを標準搭載しており、操作がシンプルで直感的です
* **設定方法**：MaiAgent プラットフォーム上でユーザーアカウントと権限を作成します
* **実際の活用例**：特定のユーザー層向けに専用のログインシステムを構築します

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


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.