把 MCP 搬进浏览器：用 WebMCP 让大模型直接调用你的网页功能

核心洞察

这篇文章最有意思的点是：它把 MCPModel Context Protocol - a protocol that enables AI models to access external tools, data sources, and services to enhance their capabilities and context awareness. 协议从后端搬到了浏览器里。以前你得跑一个 Node 服务才能给 LLM 提供工具，现在一个 script 标签加几行注册代码就搞定了。不过要注意，文中反复强调“最好在页面加载后立刻注册所有工具”，这暗示了客户端那边对工具列表的缓存机制可能比较粗糙，动态注册的体验未必顺畅。

核心结论

1. WebMCPWeb Model Context Protocol（Web模型上下文协议），由谷歌和微软工程师联合开发、通过W3C Web机器学习社区组孵化的网页标准提案，允许网站通过浏览器API向AI代理暴露结构化、可调用的工具。 将 MCP 协议从后端移至浏览器端，无需运行 Node 服务，仅需一个 script 标签加几行注册代码即可为 LLM 提供工具。

2. 通过 registerTool 方法可注册自定义工具，支持自定义参数定义与回调函数，使 LLM 能在网页上执行具体操作（如示例中的天气查询）。

3. 建议在加载 webmcp.js 后立刻注册所有工具，因为 MCP 客户端可能需要重启才能获取到可用的工具列表，动态注册体验可能不顺畅。

4. registerPrompt 支持注册带动态参数的预定义提示词模板，用于标准化常见查询（如生成 Git 提交信息）。

5. registerResource 支持以 URI 标识注册文本或二进制资源，既可为固定资源（如当前页面内容），也可通过 uriTemplate 注册动态资源模板（如按 ID 获取 DOM 元素内容）。

注册工具

工具让 LLM 能在你的网站上执行操作。调用 registerTool 就能注册。

// 用自定义参数初始化
const mcp = new WebMCP({
    color: '#4CAF50',
    position: 'top-right',
    size: '40px',
    padding: '15px'
});

// 注册自定义工具
mcp.registerTool(
    'weather',
    '获取天气信息',
    {
        location: { type: "string" }
    },
    function(args) {
        return {
            content: [{
                type: "text",
                text: `${args.location}的天气：晴，22°C`
            }]
        };
    }
);

为了让用户获得最佳体验，建议在加载 <script src="webmcp.js"></script> 之后立刻注册所有工具。MCP 客户端可能需要重启才能获取到可用的工具列表。

下面这个按钮可以点击，用来动态注册一个新工具做演示：

注册提示词

提示词是预定义的模板，客户端可以用它来和 LLM 交互。它能把常见查询标准化，还支持动态参数。

// 注册一个生成 Git 提交信息的提示词
mcp.registerPrompt(
    'git-commit',
    '生成 Git 提交信息',
    [
        {
            name: 'changes',
            description: 'Git diff 或变更描述',
            required: true
        }
    ],
    function(args) {
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `为以下变更生成一条简洁但描述清晰的提交信息：\n\n${args.changes}`
                    }
                }
            ]
        };
    }
);

点击下面的按钮可以注册示例提示词：

注册资源

资源把数据和内容暴露出来，客户端可以读取它们，作为 LLM 交互的上下文。资源用 URI 标识，内容可以是文本或二进制数据。

// 为特定文件注册资源
mcp.registerResource(
    'page-content',
    '当前页面内容',
    {
        uri: 'page://current',
        mimeType: 'text/html'
    },
    function(uri) {
        return {
            contents: [
                {
                    uri: uri,
                    mimeType: 'text/html',
                    text: document.body.innerHTML
                }
            ]
        };
    }
);

// 为动态数据注册资源模板
mcp.registerResource(
    'element-content',
    '按 ID 获取特定 DOM 元素的内容',
    {
        uriTemplate: 'element://{elementId}',
        mimeType: 'text/html'
    },
    function(uri) {
        // 从 URI 中解析元素 ID
        const elementId = uri.replace('element://', '');
        const element = document.getElementById(elementId);

        if (!element) {
            throw new Error(`未找到 ID 为 "${elementId}" 的元素`);
        }

        return {
            contents: [
                {
                    uri: uri,
                    mimeType: 'text/html',
                    text: element.innerHTML
                }
            ]
        };
    }
);

点击下面的按钮可以注册示例资源：

常见问题（FAQ）

WebMCP 是什么？它和传统 MCP 有什么区别？

WebMCP 是把 MCP 协议从后端搬到浏览器的技术，让大模型能直接调用网页功能。传统 MCP 需要跑 Node 服务，而 WebMCP 只需一个 script 标签加几行注册代码，通过 registerToolWebMCP 提供的方法，用于注册一个可供 LLM 调用的工具，包含名称、描述、参数结构和执行函数。、registerPromptWebMCP 提供的方法，用于注册预定义的提示模板，支持动态参数，方便客户端标准化 LLM 交互。 和 registerResourceWebMCP 提供的方法，用于注册可通过 URI 读取的资源，资源内容可以是文本或二进制数据，供 LLM 作为上下文使用。 三个 API 实现工具、提示和资源的注册。

WebMCP 的 registerTool、registerPrompt 和 registerResource 分别有什么用？

registerTool 让 LLM 在网站上执行操作，如获取天气；registerPrompt 注册预定义提示模板，支持动态参数，标准化常见查询；registerResource 暴露页面数据供客户端读取，作为 LLM 交互的上下文，内容可以是文本或二进制。

使用 WebMCP 时有哪些注意事项？

建议在加载 webmcp.js 后立刻注册所有工具，因为 MCP 客户端可能缓存工具列表，动态注册体验未必顺畅，且客户端可能需要重启才能获取新工具列表。资源用 URI 标识，注册资源模板可动态获取 DOM 元素内容。