Nuxt MCP B

nuxt-mcp-b

](https://www.npmjs.com/package/nuxt-mcp-b) 

特性

• 自动初始化 @mcp-b/global 在客户端-- navigator.modelContext 开箱即用
• useMcpTool 可组合用于注册具有自动Vue生命周期管理的工具
• useMcpB 可组合用于手动初始化和清理控制
• 完全支持TypeScript，具有自动导入的可组合项
• 通过以下方式配置传输、来源和本地行为 nuxt.config.ts

快速设置

1.安装模块

# npm
npm install nuxt-mcp-b

# yarn
yarn add nuxt-mcp-b

# pnpm
pnpm add nuxt-mcp-b

2.将其添加到您的 nuxt.config.ts

export default defineNuxtConfig({
    modules: ["nuxt-mcp-b"],
});

就是这样！ navigator.modelContext 现在每页都有。AI代理可以发现并调用您注册的任何工具。

用法

注册工具

使用自动导入 useMcpTool 可在任何组件中组合。该工具在组件装载时注册，在卸载时自动注销：

useMcpTool({
    name: "get-page-title",
    description: "Returns the current page title",
    inputSchema: { type: "object", properties: {} },
    execute: async () => ({
        content: [{ type: "text", text: document.title }],
    }),
});

使用输入参数注册工具

useMcpTool({
    name: "search-products",
    description: "Search the product catalog by query",
    inputSchema: {
        type: "object",
        properties: {
            query: { type: "string", description: "Search query" },
            limit: { type: "integer", description: "Max results to return" },
        },
        required: ["query"],
    },
    execute: async (args) => {
        const results = await searchProducts(args.query as string, (args.limit as number) ?? 10);
        return {
            content: [{ type: "text", text: JSON.stringify(results) }],
        };
    },
});

手动初始化和清理

这 useMcpB 可组合使您可以直接控制 @mcp-b/global 生命周期：

const { initialize, cleanup } = useMcpB();

// Re-initialize with custom options
initialize({
    transport: {
        tabServer: { allowedOrigins: ["https://example.com"] },
    },
});

// Clean up when done
onUnmounted(() => cleanup());

直接通过注册工具 navigator.modelContext

由于模块初始化 @mcp-b/global 自动地，您还可以直接使用标准Web模型上下文API：

onMounted(() => {
    const registration = navigator.modelContext.registerTool({
        name: "add-to-cart",
        description: "Add a product to the shopping cart",
        inputSchema: {
            type: "object",
            properties: {
                productId: { type: "string" },
                quantity: { type: "integer" },
            },
            required: ["productId"],
        },
        execute: async (args) => {
            const item = await addToCart(args.productId, args.quantity ?? 1);
            return {
                content: [{ type: "text", text: `Added ${item.name} to cart` }],
            };
        },
    });

    // Optional: unregister later
    onUnmounted(() => registration.unregister());
});

配置

所有选项都是可选的。在下面配置它们 mcpB 输入 nuxt.config.ts:

export default defineNuxtConfig({
    modules: ["nuxt-mcp-b"],

    mcpB: {
        // Auto-initialize @mcp-b/global on page load (default: true)
        autoInitialize: true,

        // Transport configuration
        transport: {
            // Tab server (same-window communication with browser extensions)
            tabServer: {
                allowedOrigins: ["*"], // default
                channelId: "custom-channel",
            },
            // Iframe server (auto-enabled when page is in an iframe)
            // Set to false to disable
            iframeServer: {
                allowedOrigins: ["https://parent-app.com"],
            },
        },

        // Behavior when navigator.modelContext already exists natively
        // 'preserve' (default) | 'patch'
        nativeModelContextBehavior: "preserve",

        // Whether to install the testing shim
        // true | 'if-missing' (default) | 'always' | false
        installTestingShim: "if-missing",
    },
});

选项参考

局限性

不支持声明性API

W3C Web模型上下文API定义了注册工具的两种方法：

• 强制性API （JavaScript）-- navigator.modelContext.registerTool() --完全由该模块支持
• 声明性API （HTML属性）-- `` — 不支持

Declarative API允许您使用以下属性将HTML表单转换为工具 toolname, tooldescription，以及 toolautosubmit，无需编写任何JavaScript。然而，形式到工具的翻译是 原生Chrome浏览器功能 --Chrome本身解析DOM，检测带注释的表单，并将其自动注册为幕后工具。

由于该模块依赖于 @mcp-b/global polyfill只实现了Imperative API，声明性表单工具在使用polyfill时不会被AI代理发现。一旦Chrome的原生WebMCP实现完全可用，它们就会工作（通过 chrome://flags “实验性Web平台功能”标志）。

有关更多详细信息，请参阅 MCP即将进入浏览器.

测试您的WebMCP工具

一旦你的网站通过这个模块注册了工具，你就需要一种AI代理发现和调用它们的方法。这里有两种方法效果很好。

方法1： @mcp-b/chrome-devtools-mcp （推荐）

@mcp-b/chrome-devtools-mcp 是一个MCP服务器，它将您的AI客户端（VS Code、Claude Desktop、Claude Code、Cursor）连接到实时Chrome浏览器。它提供了两个特定于WebMCP的工具： list_webmcp_tools 和 call_webmcp_tool，让您的AI代理发现并调用通过以下方式注册的任何工具 navigator.modelContext.

重要提示： 这与谷歌的官方说法不同 chrome-devtools-mcp谷歌的版本可以处理浏览器自动化（屏幕截图、导航、脚本评估），但 不 支持WebMCP工具发现。确保你使用 @mcp-b/chrome-devtools-mcp （MCP-B版本）用于WebMCP测试。

以下是如何为不同的客户设置它：

VS代码：

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","@mcp-b/chrome-devtools-mcp@latest"]}'

克劳德代码：

claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest

克劳德桌面版 （添加到 claude_desktop_config.json):

{
    "mcpServers": {
        "chrome-devtools": {
            "command": "npx",
            "args": ["-y", "@mcp-b/chrome-devtools-mcp@latest"]
        }
    }
}

光标： 请参阅 MCP-B文件 对于直接安装程序。

设置完成后，启动您的开发服务器(npm run dev)，在Chrome中打开您的网站，并要求您的AI代理与之交互。

方法2:MCP-B浏览器扩展

这 MCP-B扩展 是一个浏览器扩展，可以在任何页面上发现WebMCP工具。从扩展页面安装它，导航到您的网站，扩展将自动检测所有注册的工具，这对于无需人工智能客户端设置的快速手动测试非常有用。

可组合项

useMcpTool(options)

注册组件生命周期范围内的MCP工具。该工具已在上注册 onMounted 未注册 onUnmounted.

参数：

ToolResponse 格式：

{
  content?: Array
  isError?: boolean
}

useMcpB()

返回一个对象，其中包含两个用于手动生命周期控制的方法：

贡献

看 贡献.md 用于开发设置和指南。

许可证

麻省理工学院