Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

NLWeb

最終更新 Markdown で表示Agent セットアップ

NLWeb と Cloudflare AI Search で、Web サイトに会話型検索を追加します。このテンプレートはサイトをクロールしてコンテンツをインデックスし、人と AI エージェントの両方に応答する NLWeb 標準のエンドポイントをデプロイします。

NLWeb とは

NLWeb ↗ は Microsoft が開発したオープンプロジェクトで、Web サイト上の自然言語クエリ向けの標準プロトコルを定義します。目的は、すべての Web サイトを会話型 AI アプリと同じようにアクセスしやすく、操作しやすくすることです。人と AI エージェントの両方が、サイトコンテンツを安定してクエリできるようにします。次の 2 つの主要なエンドポイントを公開します。

  • /ask: ユーザークエリ向けの会話エンドポイント
  • /mcp: AI エージェント向けの構造化 Model Context Protocol（MCP）エンドポイント

使い方

NLWeb は、AI Search ダッシュボードから Web サイトへ直接デプロイできます。

  1. Cloudflare ダッシュボード ↗ にログインします。

  2. AI > AI Search を開きます。

    AI Search を開く ↗

  3. Create AI Search を選択します。

  4. データソースとして Website を選択します。

  5. 手順に従い、AI Search インスタンスを作成します。

  6. インスタンスの Settings を開きます。

  7. NLWeb Worker を探し、Enable AI Search for your website を選択します。

完了すると、AI Search が NLWeb Worker をデプロイし、NLWeb API エンドポイントを使えるようになります。

このテンプレートに含まれるもの

NLWeb Website オプションを選ぶと、通常の AI Search をコンテンツ量の多い Web サイト向けに拡張し、会話型検索の標準として NLWeb を採用するために必要なものをすべて用意します。具体的には次を提供します。

  • データソースとしての Web サイト: Website をデータソースにし、Rendered Sites オプションでページをクロールして取り込みます。
  • コンテンツ量の多いサイト向けのデフォルト: 公開サイトやコンテンツの多い Web サイト向けに調整した埋め込みと取得の設定を適用します。
  • NLWeb Worker のデプロイ: NLWeb Worker テンプレート ↗ から Cloudflare Worker を自動で起動します。

Worker に含まれるもの

デプロイした Worker は、次の 2 つのエンドポイントを提供します。

  • /ask: NLWeb の標準会話エンドポイント
    • ルート（/）の会話 UI を動かします
    • 埋め込み可能なプレビューウィジェット（/snippet.html）を動かします
  • /mcp: 信頼できる AI エージェント向けの NLWeb MCP サーバーエンドポイント

これらのエンドポイントにより、人とエージェントの両方が、構造化された形でコンテンツにアクセスできます。

Web サイトでの使い方

埋め込み可能なスニペットで、検索 UI を Web サイトへ直接追加できます。例:

<!-- Add css on head -->
<link rel="stylesheet" href="https://ask.example.com/nlweb-dropdown-chat.css" />
<link rel="stylesheet" href="https://ask.example.com/common-chat-styles.css" />

<!-- Add container on body -->
<div id="docs-search-container"></div>

<!-- Include JavaScript -->
<script type="module">
	import { NLWebDropdownChat } from "https://ask.example.com/nlweb-dropdown-chat.js";

	const chat = new NLWebDropdownChat({
		containerId: "docs-search-container",
		site: "https://ask.example.com",
		placeholder: "Search for docs...",
		endpoint: "https://ask.example.com",
	});
</script>

これで、自ドメインから会話型の AI 検索を提供でき、人とエージェントがコンテンツへアクセスする方法を制御できます。

Worker の変更または更新

埋め込みスニペットの UI を調整するなど、Worker をカスタマイズしたくなることがあります。その場合は、クエリには /ask エンドポイントを呼び、その上に独自の UI を作ることを推奨します。埋め込み UI 用の Worker コードを直接変更することもできます。

NLWeb の標準が更新された場合は、Worker を更新して互換性を保ち、最新の変更を受け取れます。

変更や更新を適用するいちばん簡単な方法は、Worker テンプレートを再デプロイすることです。

Deploy to Cloudflare

  1. 上の Deploy to Cloudflare ボタンで、Worker テンプレートを Cloudflare アカウントへデプロイします。
  2. RAG_ID 環境変数欄に、AI Search の名前を入力します。
  3. Deploy を選択します。
  4. Workers ダッシュボードで GitHub/GitLab アイコンを選択します。
  5. Worker 用に作成されたリポジトリをクローンします。
  6. 変更を加え、コミットしてプッシュし、Worker を更新します。

この Worker を、Web サイトの新しい NLWeb エンドポイントとして使えます。

役に立ちましたか？