Dify で Web サイトに AI チャットボットを設置：ナレッジベース・埋め込みコード・日常運用

Web サイトにサポート用チャットボットを設置すれば、プラン、料金、配送、支払い方法、設定手順など、チームが毎日答えている質問に、時間を問わず訪問者の言語で回答できます。Dify は、ビジュアルエディター、組み込みのナレッジベース、すぐに使える Web サイト埋め込み機能を備えた、AI アプリケーション構築用のオープンソースプラットフォームです。この記事では、セルフホストした Dify で自社ドキュメントを基に回答するチャットボットを構築し、チャットバブルとして Web サイトに埋め込みます。さらに、会話の確認、回答の改善、ナレッジの更新といった、品質を高めるための日常的な運用についても解説します。

ステップ1：Dify の公開アドレスを設定する

埋め込みコードとファイルのリンクには、Dify に設定されたアドレスが使われます。これらが IP アドレスや localhost のままだと、Web サイト上でチャットバブルが読み込まれません。HTTPS のドメインに設定して再起動してください。

# In dify/docker/.env, set your HTTPS domain:
CONSOLE_API_URL=https://dify.example.com
CONSOLE_WEB_URL=https://dify.example.com
SERVICE_API_URL=https://dify.example.com
APP_API_URL=https://dify.example.com
APP_WEB_URL=https://dify.example.com
FILES_URL=https://dify.example.com

# Then apply the change:
cd dify/docker && docker compose up -d

ステップ2：モデルを接続する

Settings > Model Provider（設定 > モデルプロバイダー）で、使用するプロバイダーをインストールします。ローカルモデルを使う場合は Ollama プロバイダーをインストールし、チャットモデルと埋め込みモデルの 2 つを追加します。

ollama pull qwen2.5:7b
ollama pull nomic-embed-text

# Dify runs in Docker, so Ollama must accept connections from containers
# (OLLAMA_HOST=0.0.0.0 plus the firewall rules from the Ollama guide). Check:
curl -s http://172.17.0.1:11434/api/tags | head -c 300; echo

# In Dify, add both models with the base URL:  http://172.17.0.1:11434
#   qwen2.5:7b        model type: LLM
#   nomic-embed-text  model type: Text Embedding

Ollama 側の設定は「Ollama でローカル LLM を運用する」で解説しています。続いて、システムモデル設定で両方をデフォルトに設定します。クラウドプロバイダーも追加して、アプリごとに使用するモデルを選ぶこともできます。

ステップ3：ナレッジベースを構築する

1. Knowledge（ナレッジ）を開いてナレッジベースを作成し、FAQ、商品ページ、料金、配送・支払いに関する情報、設定ガイドをアップロードします。
2. 通常のドキュメントはデフォルトの汎用チャンク分割のままにします。FAQ ファイルは 1 つの段落に質問と回答を 1 組ずつ記載し、各組が 1 つのチャンクになるようにします。
3. 埋め込みモデルを使う高品質インデックスと、ハイブリッド検索またはベクトル検索を選択して保存し、Dify にファイルを処理させます。
4. 検索テストで実際の顧客の質問を入力し、適切な箇所が返ってくるかを確認します。

どの設定よりも、整理された最新のドキュメントのほうが重要です。古い料金表は削除し、重要な回答は断片的な記述に頼らず、省略せずに書き出してください。大規模な導入でのアーキテクチャの選び方については「専用サーバーでプライベートな AI サポートナレッジベースを構築する」を参照してください。

ステップ4：チャットボットを作成する

Studio（スタジオ）で新しい Chatbot（チャットボット）アプリを作成します。エディターでナレッジベースをコンテキストとして追加し、temperature を低め（0.3 程度）にしてチャットモデルを選択し、指示文を記述します。

You are the online assistant of ACME Hosting.
Answer only with information from the context. If the context does not contain
the answer, say you are not sure and suggest contacting support at [email protected].
Keep answers under 120 words and reply in the visitor's language.
Never promise discounts, refunds or delivery times that are not in the context.
If the question is unrelated to our products and services, politely decline.

あわせて、3、4 個の質問候補を含む会話の開始メッセージを追加し、引用表示を有効にして、各回答がどのドキュメントを参照したかを確認できるようにします。公開前に、チケットやチャットから集めた実際の質問を少なくとも 20 件、プレビューパネルでテストしてください。

ステップ5：公開して Web サイトに埋め込む

アプリを公開し、サイトへの埋め込みオプションを選んでチャットバブルを選択します。Dify がアプリ専用のコードを生成します。コードは次のような形式です。

<script>
  window.difyChatbotConfig = {
    token: 'your-app-token',
    baseUrl: 'https://dify.example.com'
  }
</script>
<script src="https://dify.example.com/embed.min.js" id="your-app-token" defer></script>
<style>
  #dify-chatbot-bubble-button { background-color: #009aff !important; }
</style>

サイトのテンプレートの終了タグ </body> の直前に貼り付けます。WordPress では、ヘッダー・フッターにコードを挿入するプラグインを使えば、テーマを編集せずに設置できます。同じアプリには公開 Web ページと API もあるため、全画面のチャットや独自のフロントエンドにも利用できます。

ステップ6：日常的に運用する

• 週に一度会話を確認する：アプリのログで、答えられなかった質問や誤った回答を探し、ドキュメントを修正します。
• アノテーションを活用する：よくある質問には承認済みの回答を保存しておきます。アノテーション返信を有効にすると、類似の質問があるたびにボットがその回答を返します。
• モニタリングページを確認する：メッセージ数、アクティブユーザー数、トークン使用量をチェックします。有料モデルを接続している場合は特に重要です。
• ナレッジベースを更新する：料金、プラン、ポリシーが変わるたびに更新し、古いファイルは削除します。
• 有人対応の窓口を用意する：開始メッセージにサポートの連絡先を記載し、返金、苦情、アカウント変更はチームで対応します。
• 不正利用を抑える：公開チャットボットはスパムの標的になり得ます。異常なトラフィックが見られる場合は、Nginx または CDN で Dify の API パスに IP 単位のレート制限をかけてください。

よくある質問

Dify と AnythingLLM のどちらを選ぶべきですか？

Dify は AI アプリの公開向けに作られており、公開チャットバブル、API、ワークフロー、ログ、アノテーションを備えています。社内チーム向けのドキュメントアシスタントであれば、AnythingLLM のほうが手軽です。「AnythingLLM でプライベート RAG チャットボットを構築する」を参照してください。

Web サイトにチャットバブルが表示されない

ブラウザーの開発者コンソールを開いてください。最も多い原因は、ステップ1の URL がまだ IP アドレスや http:// のままになっていて、HTTPS サイト上でブラウザーがスクリプトをブロックしているケースです。また、セキュリティプラグインやコンテンツセキュリティポリシー（CSP）が別ドメインのスクリプトをブロックしている場合もあります。

同じボットで Telegram にも回答できますか？

はい。Dify アプリには、他のツールから呼び出せる API があります。または、n8n で Telegram ボットを直接構築することもできます。「n8n で AI カスタマーサポート用 Telegram ボットを構築する」を参照してください。

上記の手順で解決しない場合は、サポートチケットを送信して IMIDC の 24 時間 365 日対応テクニカルサポートへご連絡ください。サーバー IP、Dify のバージョンとドメイン、dify/docker フォルダーで実行した docker compose ps の出力、ブラウザーコンソールのエラーを添えていただくと、より迅速に調査できます。