5 分钟上手试用 WebMCP

元三
291 阅读4分钟

什么是WebMCP

WebMCP 是一个web API的提议，它使 web 页面能够在其UI中提供特定于代理的路径。使用 WebMCP，代理-服务交互通过应用程序控制的UI进行，为应用程序、代理和用户提供可用的共享上下文。与后端集成相反，WebMCP 工具只有在代理加载页面并在客户端上执行时才可用。页面内容和驱动对代理（和用户）仍然可用，但代理也可以访问它可以用来更直接地实现其目标的工具。

explainer_webmcp.png

WebMCP vs MCP

  • MCP：服务端协议，你在自己服务器上部署工具
  • WebMCP：受 MCP 启发，但在浏览器端用客户端 JS 提供工具

WebMCP 的应用场景

电商购物、机票火车票订票等场景可以通过 AI 代理使用 JSON Schema 操作浏览器下单，可以代替人类进行操作。设想需要无障碍的场景，以前为了支持无障碍需要对结构与语义、键盘可访问性、ARIA 等很多地方进行改动，现在只需要开发支持 WebMCP 即可支持 AI 代理对浏览器进行无障碍操作。另外，WebMCP 的 AI 代理支持多轮对话以修正目标，通过对话逐次引导用户达成操作目标，在新用户引导这类需求上天然对用户非常友好。最后，在将来某一天，浏览器直接支持类似千问语音对话点一杯奶茶，这个也可以使用 WebMCP 实现了。

如何上手试用 WebMCP

1）使用 Google Chrome Canary 开启实验 Flag

目前该特性只在 Chrome 146 版本上支持，如果还未更新到 146，可以下载 Chrome 预览版在预览版上开启该特性。 在 Chrome 标签页中打开：chrome://flags 搜索：WebMCP for testing 启用 → 重启 Chrome

2）安装检查器扩展

安装 Model Context Tool Inspector 扩展，该扩展可以：

  • 查看已注册的工具
  • 手动执行工具
  • 结合 Gemini API 用代理测试

3）使用官方旅行预定 Demo 上手试用

官方提供了一个旅行预订 Demo：travel-demo.bandarra.me/可以手动搜索预定机票，或用自然语言让 AI 调用。

image.png

4）设置 Gemini API Key

68fe1585-a325-4365-b05a-b2e0d2a5b56b.png

5) 使用 AI 对话框输入订票需求

I need to find a round-trip flight from New York to Miami for two passengers, departing on March 15th and returning on March 22nd, with no stops.

a4e6f461-0ecd-4552-b751-b7f2413e46ac.png

如何开发支持机票查询 WebMCP

你可以注册任意 JS 函数作为工具，AI 直接调用这个函数（而非操作 DOM），适合复杂逻辑（比如机票查询、数据计算）。

完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebMCP 命令式 JS 示例</title>
</head>
<body>
    <h3>航班查询工具（AI 可调用）</h3>
    <div id="result"></div>

    <script>
        // 第一步：检查浏览器是否支持 WebMCP
        if (!navigator.modelContext) {
            alert('请在 Chrome 146 Canary 中开启 WebMCP flag 后运行');
        } else {
            // 第二步：定义工具的 Schema（AI 知道输入/输出格式）
            const searchFlightsTool = {
                name: "searchFlights", // 工具名（AI 调用的标识）
                description: "查询指定出发地、目的地、日期的航班信息，返回航班号和价格", // AI 理解用途
                // 输入 Schema（JSON Schema 格式，约束参数）
                inputSchema: {
                    type: "object",
                    properties: {
                        origin: { type: "string", description: "出发地机场代码，比如PEK（北京）、SHA（上海）" },
                        destination: { type: "string", description: "目的地机场代码" },
                        date: { type: "string", format: "date", description: "出行日期，格式YYYY-MM-DD" }
                    },
                    required: ["origin", "destination", "date"] // 必填参数
                },
                // 第三步：工具的核心执行逻辑（AI 调用时会执行这个函数）
                execute: async (params) => {
                    console.log('AI 调用了 searchFlights 工具，参数：', params);
                    
                    // 模拟航班查询（实际项目中替换为真实接口）
                    const mockFlights = [
                        { flightNo: "CA1234", price: 890, time: "08:00" },
                        { flightNo: "MU5678", price: 950, time: "14:30" }
                    ];

                    // 返回结构化结果（AI 可直接解析）
                    return {
                        success: true,
                        origin: params.origin,
                        destination: params.destination,
                        date: params.date,
                        flights: mockFlights
                    };
                }
            };

            // 第四步：注册工具到 WebMCP（暴露给 AI）
            async function registerTool() {
                try {
                    await navigator.modelContext.registerTool(searchFlightsTool);
                    console.log('✅ 航班查询工具已注册成功');
                    
                    // 可选：替换所有工具（如果需要批量更新）
                    // await navigator.modelContext.provideContext([searchFlightsTool]);
                } catch (err) {
                    console.error('❌ 工具注册失败：', err);
                }
            }

            // 初始化注册
            registerTool();

            // 可选：监听工具调用结果（用于页面展示）
            // 注：WebMCP 扩展可手动触发调用，这里模拟 AI 调用后的结果展示
            function showFlightResult(result) {
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h4>航班查询结果（${result.date}）</h4>
                    <p>出发地：${result.origin} → 目的地：${result.destination}</p>
                    <ul>
                        ${result.flights.map(flight => 
                            `<li>${flight.flightNo} | ${flight.time} | ¥${flight.price}</li>`
                        ).join('')}
                    </ul>
                `;
            }

            // 模拟 AI 调用（实际由浏览器内 AI 代理触发）
            // navigator.modelContext 会自动调用 execute 函数，这里仅演示结果展示
            searchFlightsTool.execute({
                origin: "PEK",
                destination: "SHA",
                date: "2026-02-15"
            }).then(showFlightResult);
        }
    </script>
</body>
</html>

注：该 Demo 由 AI 生成，如有运行错误请在真实支持 WebMCP 的浏览器下自行调试。

avatar
文章
阅读
粉丝