Webデザイン＆開発 AI統合・活用支援 SEO＆アクセス解析 アプリ開発 ブランディング View All → 🔍 AI互換性を一括診断
Works
Philosophy Company Team
Blog Recruit Contact 無料でAI診断する
NLWeb 2026.03.20 [NLWeb：Webサイトと会話する時代 Vol.3]

NLWeb：Webサイトと会話する時代 第3回：NLWeb実装ガイド — 自社サイトを会話型エンドポイントにする

NLWebリポジトリのクローンからSchema.orgデータの取り込み、ベクトルDB構築、サーバー起動、Claude DesktopからのMCP接続まで。自社サイトを「AIが問い合わせるサイト」に変えるハンズオンガイド。

NLWeb：Webサイトと会話する時代 第3回：NLWeb実装ガイド — 自社サイトを会話型エンドポイントにする

はじめに

第1回で「なぜ」を、第2回で「どう動くか」を解説してきました。データインジェスションパイプライン、クエリパイプラインの8ステップ、4つのモジュール構成。NLWebのアーキテクチャは理解できたはずです。

第3回の今回は、いよいよ「どうやるか」です。

NLWebリポジトリのクローンから、Schema.orgデータの取り込み、ベクトルDBの構築、NLWebサーバーの起動、Web UIでのテスト、そしてClaude DesktopからMCPサーバーとして接続するところまで、一気通貫で進めます。

なお、NLWebはMicrosoftのオープンプロジェクトとして活発に開発が続いています。本記事の手順は2026年3月時点のリファレンス実装に基づいています。NLWebは現在nlweb-ai/NLWebとmicrosoft/NLWebの両方のGitHubリポジトリで並行して開発が継続されており、セットアップの詳細が変更される可能性があるため、実装時にはリポジトリの最新ドキュメントも併せて確認してください。

前提条件

NLWebの実行に必要な環境は以下のとおりです。

  • Python 3.11.x（リファレンス実装の推奨バージョン）
  • Git（リポジトリのクローン用）
  • OpenAI APIキー（エンベディングとLLM推論に使用。他のLLMプロバイダーも選択可能だが、初回セットアップにはOpenAIが最もスムーズ）
  • ベクトルDB（本記事ではQdrantのローカルモードを使用。追加インストール不要）

LLMの利用にはAPIキーが必要であり、クエリごとにAPI呼び出しが発生するため、少額のAPI利用料が発生します。OpenAIの場合、テスト段階では数ドル程度です。

Step 1：NLWebリポジトリのクローンとセットアップ

まず、NLWebのリファレンス実装をクローンし、Python環境をセットアップします。

Bash 
git clone https://github.com/nlweb-ai/NLWeb.git
cd NLWeb
python -m venv .venv
source .venv/bin/activate  # Windowsの場合: .venv\Scripts\activate
cd code
pip install -r requirements.txt

Step 2：APIキーとベクトルDBの設定

NLWebの設定は、codeディレクトリ内の設定ファイルで行います。

LLMの設定

OpenAIをLLMとして使用する場合、環境変数にAPIキーを設定します。

Python 
export OPENAI_API_KEY="sk-your-api-key-here"

NLWebはOpenAI以外にもAnthropic（Claude）、Google（Gemini）、DeepSeekなど複数のLLMに対応しています。使用するLLMプロバイダーの選択は設定ファイルで変更可能です。初回セットアップの手軽さを考慮し、本記事ではOpenAIを使用します。

ベクトルDBの設定（Qdrantローカルモード）

本記事では、追加のインフラ構築が不要なQdrantローカルモードを使用します。このモードでは、ベクトルデータがファイルシステム上のローカルディレクトリに格納され、NLWebプロセスと同じプロセス内で動作します。DockerやクラウドサービスのセットアップなしにNLWebを体験できます。

NLWebの設定ファイルで、retrieval engineをQdrantローカルに設定します。Qdrantの公式ドキュメントに基づく設定例は以下のとおりです。

Python 
retrieval_engine: qdrant_local
endpoints:
  qdrant_local:
    database_path: "../data/"
    index_name: nlweb_collection
    db_type: qdrant

本番環境に向けて： ローカルモードはテストと実験に適していますが、本番環境ではQdrant Cloud、Docker経由のQdrantサーバー、またはPostgreSQL + pgvectorの利用を検討してください。第2回で解説したとおり、既存のPostgreSQLインフラがある場合はpgvectorが追加インフラ不要で有力な選択肢です。

Step 3：Schema.orgデータの取り込み（データインジェスション）

NLWebの「燃料」となるSchema.orgデータを取り込みます。NLWebのデータインジェストはtools.db_loadモジュールで行います。

RSSフィード・JSON-LD・URLからの取り込み

NLWebのdb_loadツールは、RSSフィードURL、JSON-LDを含むWebページURL、またはJSONLファイルパスを受け取り、Schema.orgタイプに変換してベクトルDBに格納します。

Bash 
# RSSフィードから取り込む
python -m tools.db_load https://example.com/feed.xml example

# JSONLファイルから取り込む
python -m tools.db_load data/example.jsonl example

第1引数がデータソース（URLまたはファイルパス）、第2引数がサイト名（データのフィルタリングに使用）です。

RSSフィードは最も手軽な入力方法です。ブログ、ニュースサイト、ポッドキャストなど、RSSを公開しているサイトであればすぐに試せます。

取り込みの確認

取り込みが成功すると、Qdrantローカルモードの場合はdata/ディレクトリにベクトルデータが格納されます。cloud-station.ioのセットアップガイドが指摘するとおり、NLWebのインジェスションプロセスは成功時にほとんど出力を行いません。「出力がない＝正常に動作している」という設計であるため、エラーメッセージが出なければ成功と判断してください。

サイト名パラメータについて： 第2引数のサイト名は、複数のデータソースをNLWebに取り込む際のフィルタリングに使用されます。たとえば、自社サイトとブログを別々のサイト名で取り込めば、クエリ時にどちらのデータを検索対象にするかを制御できます。

Step 4：NLWebサーバーの起動とWeb UIでのテスト

データの取り込みが完了したら、NLWebサーバーを起動します。

Bash 
python app-file.py

サーバーが起動すると、以下のエンドポイントが利用可能になります。

Web UI（http://localhost:8000/） — ブラウザでアクセスできる会話型インターフェースです。テキストボックスに自然言語で質問を入力し、NLWebの動作を確認できます。

REST API（http://localhost:8000/ask） — プログラムからHTTP POSTでクエリを送信し、Schema.org JSON形式のレスポンスを受け取るAPIエンドポイントです。

MCPエンドポイント（http://localhost:8000/mcp） — AIエージェント向けのMCPサーバーエンドポイントです（次のStepで使用します）。

テストクエリの実行

Web UIを開き、取り込んだデータに関連する質問を入力してみましょう。たとえば、レシピサイトのデータを取り込んだ場合：

  • 「簡単に作れるパスタのレシピは？」
  • 「30分以内でできる夕食のメニューは？」
  • 「その中でベジタリアン向けのものは？」（マルチターンの文脈保持テスト）

レスポンスがSchema.org形式のJSONで返ってくること、マルチターン会話で前の質問の文脈が保持されることを確認してください。

トラブルシューティング

サーバーが起動しない場合。Python 3.11.xが使用されているか確認してください。また、requirements.txtのインストールが完了しているか、APIキーが正しく設定されているかを確認します。

クエリに対して空のレスポンスが返る場合。データインジェスションが正しく完了しているか確認してください。サイト名パラメータがクエリの対象サイトと一致しているかも確認ポイントです。

レスポンスが遅い場合。初回のクエリはエンベディングモデルの読み込みに時間がかかることがあります。2回目以降は、第2回で紹介したiuneraの分析によれば並列処理により0.5〜0.7秒程度まで短縮される場合がありますが、実際のレスポンスタイムはLLM APIのレイテンシやネットワーク環境に大きく依存します。

Step 5：Claude DesktopからMCPサーバーとして接続

ここがNLWebの最も強力な機能です。起動中のNLWebサーバーにClaude DesktopからMCPで接続し、Claude経由で自社サイトのコンテンツに自然言語で問い合わせられるようにします。

Claude Desktopの設定

Claude Desktopの設定ファイル（claude_desktop_config.json）に、NLWebサーバーをMCPサーバーとして登録します。

macOSの場合：~/Library/Application Support/Claude/claude_desktop_config.json
Windowsの場合：%APPDATA%\Claude\claude_desktop_config.json

NLWebをローカルで起動している場合、公式セットアップガイドに基づく設定は以下のようになります。

JSON 
{
  "mcpServers": {
    "ask_nlw": {
      "command": "/path/to/NLWeb/.venv/bin/python",
      "args": [
        "/path/to/NLWeb/code/chatbot_interface.py",
        "--server", "http://localhost:8000",
        "--endpoint", "/mcp"
      ],
      "cwd": "/path/to/NLWeb/code"
    }
  }
}

/path/to/NLWeb/ の部分は、実際にNLWebをクローンしたディレクトリの絶対パスに置き換えてください。Windowsの場合は.venv/bin/pythonを.venv/Scripts/python.exeに変更します。

設定を保存後、Claude Desktopを再起動します。

接続の確認

Claude Desktopを開き、チャットウィンドウで自社サイトに関する質問をしてみましょう。たとえば：

「このサイトで一番人気のレシピは何？」

ClaudeがNLWebのMCPサーバーに問い合わせ、Schema.org形式のレスポンスに基づいた回答を返すことを確認できます。

これにより、自社サイトのコンテンツが、Claude Desktop経由でAIアシスタントから直接問い合わせ可能な状態になりました。第1回で解説した「パンフレット（llms.txt）からコンシェルジュ（NLWeb）へ」の転換が、まさにここで実現しています。

「小規模コーポレートサイトでもここまでできる」— 現実的なスコープ設定

ここまでの手順で、NLWebの基本的な実装は完了です。しかし、「うちのサイトは数十ページのコーポレートサイトだけど、NLWebを入れる意味があるのか？」という疑問もあるでしょう。

答えは「ある」です。ただし、スコープを現実的に設定することが重要です。

小規模サイトで効果が出るケース

FAQ・サービス紹介ページの問い合わせ対応。 「御社のサービスで〇〇に対応しているものは？」「料金プランの違いを教えて」といった質問に、NLWebが構造化データに基づいて回答できます。

採用情報の検索。 「リモートワーク可能な技術職の募集はありますか？」といった質問への自然言語応答が可能になります。

ブログ・ナレッジベースの活用。 過去の記事やドキュメントをNLWebに取り込めば、蓄積されたコンテンツが「対話型の知識ベース」に変わります。

効果を最大化するための前提

Schema.orgデータの品質。 NLWebの性能はSchema.orgデータの品質に直結します。次回の第4回で、Schema.org最適化の具体的な手法を解説します。

適切なサイトタイプの選定。 NLWebは構造化リスト（商品、レシピ、イベント、レビューなど）を持つサイトで最も効果を発揮します。サービス紹介のみの小規模サイトの場合は、まずSchema.orgの充実から着手してください。

Cloudflare AutoRAGという選択肢

「自前でPython環境を構築するのはハードルが高い」という場合、CloudflareのAutoRAGが現実的な代替手段です。

第2回で紹介したとおり、CloudflareのAutoRAGはドメインを指定するだけでサイトをクロール・インデックスし、NLWebプロトコルの/askと/mcpエンドポイントを自動で提供します。継続的な再クロール・再インデックスにも対応しており、コンテンツの鮮度が自動で保たれます。

自前構築（本記事の手順）とマネージドサービス（Cloudflare AutoRAG）の選択は、チームの技術力、カスタマイズ要件、運用負荷の許容度に応じて判断してください。

まとめ — 「会話型サイト」は今日から始められる

NLWebの実装は、基本的な構成であればPython環境とAPIキーがあれば今日から始められます。

  1. リポジトリをクローンし、Python環境をセットアップする
  2. APIキーとベクトルDB（Qdrantローカル）を設定する
  3. tools.db_loadでRSSフィードやJSON-LDからデータを取り込む
  4. python app-file.pyでNLWebサーバーを起動し、Web UIでテストする
  5. Claude DesktopからMCPサーバーとして接続する

この5ステップで、自社サイトは「人間が読むサイト」から「AIが問い合わせるサイト」に変わります。

次回の第4回では、NLWebの性能を左右するSchema.orgの最適化に踏み込みます。エンティティの相互接続、sameAsリンクの活用、プロパティの充実度を、ビフォー/アフターのJSON-LDコード例で具体的に示します。

参考情報

この記事は「NLWeb：Webサイトと会話する時代」シリーズの第3回です。

AI技術のビジネス活用やWebサイトのAIエージェント対応について、具体的なご相談はunTypeまでお気軽にお問い合わせください。

この記事をシェアする

X (Twitter) LinkedIn Facebook Bluesky Threads
山下 太郎

山下 太郎

代表取締役 / CEO

2000年、Webデザイナーとしてこの世界に飛び込み、フリーランスを経て2007年に株式会社アンタイプを創業。AI時代の到来とともに、効率だけを追うAI活用に違和感を覚えながら、それでも最前線でツールを使い続ける。企業のWebとコミュニケーションを設計する仕事を通じて、「人間らしさとは何か」を問い直す視点を発信し続けている。

View Profile arrow_outward

Categories

NLWeb MCP AI

Related

あわせて読みたい

すべての記事を見る arrow_forward