ユーザーとその AI エージェントにとって使いやすいウェブサイトやアプリケーションを構築します。
使ってみる オリジン トライアルに参加する

WebMCP の仕組み

3 つのステップで、エージェントが実行できることをサイトに正確に伝えることができます。
ステップ 1

サイトは、エージェントが実行できるアクションを WebMCP ツールとして宣言します。各ツールには、名前、説明、JSON スキーマがあります。

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
ステップ 2

ブラウザは、ページの URL、タイトル、オリジン権限スコープとともに、これらのツールをユーザーの WebMCP 対応エージェントに収集して提示します。

サイトがブラウザに伝え、ブラウザがエージェントに翻訳します。
ステップ 3

エージェントが契約を確認し、構造化された引数を指定すると、残りの処理はコードが行います。ユーザーは、権限と確認のループにとどまります。心配を解消。

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

エージェント向けのツールを構築する

WebMCP API とドキュメントの詳細を確認します。
使ってみる
WebMCP ツールを追加して、ユーザーとエージェントの効率を高める機会を見つけましょう。
ドキュメントを読む
標準の JavaScript を使用して WebMCP ツールを定義し、フォーム入力やサイト ナビゲーションなどのサイト固有の関数を実行します。
ドキュメントを読む
アノテーションを追加して、標準の HTML フォームを WebMCP ツールに変換します。
ドキュメントを読む
ツールをテストして、エージェントがツールを呼び出すタイミング、実行方法、許容される回答を理解していることを確認します。
ドキュメントを読む
WebMCP API の使用に関するベスト プラクティスについて学習します。
ドキュメントを読む
ウェブサイト用の安全なツールを構築する方法について説明します。
ドキュメントを読む
WebMCP と MCP を組み合わせることで、エージェントはユーザーに代わってパーソナライズされたタスクを実行できます。
ドキュメントを読む

AI エージェントで構築する

お気に入りの AI コーディング エージェントで Modern Web Guidance を使用して、お好みのワークフローでウェブのベスト プラクティスにアクセスできます。 
npx modern-web-guidance@latest install
ドキュメントを読む
Modern Web Guidance を使用して、コーディング エージェントの助けを借りて拡張機能を迅速に構築します。
ドキュメントを読む

エージェント デベロッパー向けの安全性に関する考慮事項

エージェント デベロッパーは、信頼できないコンテンツからの悪意のあるテキストに対する保護機能を設計する必要があります。WebMCP を使用するエージェントに関連するセキュリティ技術を特定します。
ガイダンスを読む

ブラウザに直接組み込まれた AI アシスタント開いているタブのコンテキストに基づいて、要点をまとめたり、複雑な概念を説明したり、疑問を解決したりしてくれます。

Gemini は複数の Google アプリと連携し、日々の作業を効率化してくれます。

Gemini in Chrome を使ってみる

AI エージェントの概要

web.dev
AI とも呼ばれるさまざまな新しいテクノロジーの基本と定義を理解します。
ドキュメントを読む
web.dev
ウェブの実務担当者として、新しいテクノロジーを慎重に、責任を持って構築することが重要です。
ドキュメントを読む
web.dev
AI に関する知識の基盤を構築して、ウェブサイトやウェブ アプリケーションに機能を追加します。
コースを受講する