使用说明
nuxt-mcp-b
Nuxt模块 @mcp-b/global --the W3C Web模型上下文API polyfill允许Claude、ChatGPT、Gemini、Cursor和Copilot等AI代理在您的网站上发现和调用工具。
特性
- 自动初始化
@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 可在任何组件中组合。该工具在组件装载时注册，在卸载时自动注销：
<script setup lang="ts">
useMcpTool({
name: "get-page-title",
description: "Returns the current page title",
inputSchema: { type: "object", properties: {} },
execute: async () => ({
content: [{ type: "text", text: document.title }],
}),
});
</script>
使用输入参数注册工具
<script setup lang="ts">
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) }],
};
},
});
</script>
手动初始化和清理
这 useMcpB 可组合使您可以直接控制 @mcp-b/global 生命周期：
<script setup lang="ts">
const { initialize, cleanup } = useMcpB();
// Re-initialize with custom options
initialize({
transport: {
tabServer: { allowedOrigins: ["https://example.com"] },
},
});
// Clean up when done
onUnmounted(() => cleanup());
</script>
直接通过注册工具 navigator.modelContext
由于模块初始化 @mcp-b/global 自动地，您还可以直接使用标准Web模型上下文API：
<script setup lang="ts">
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());
});
</script>
配置
所有选项都是可选的。在下面配置它们 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",
},
});
选项参考
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
autoInitialize |
boolean |
true |
是否自动初始化 @mcp-b/global 在页面加载时。设置为 false 通过手动初始化 useMcpB().initialize(). |
transport |
TransportConfiguration |
undefined |
配置 tabServer 和 iframeServer 运输。每个人都接受 allowedOrigins 和 channelId，或 false 禁用。 |
nativeModelContextBehavior |
'preserve' | 'patch' |
'preserve' |
行为时 navigator.modelContext 已经原生存在。 'preserve' 在镜像核心操作的同时，使用BrowserMcpServer进行原生封装。 |
installTestingShim |
boolean | 'always' | 'if-missing' |
'if-missing' |
控制 modelContextTesting 垫片安装。 |
局限性
不支持声明性API
W3C Web模型上下文API定义了注册工具的两种方法：
- 强制性API （JavaScript）--
navigator.modelContext.registerTool()--完全由该模块支持 - 声明性API （HTML属性）--
<form toolname="..." tooldescription="...">— 不支持
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.
参数：
| 属性 | 类型 | 描述 |
|---|---|---|
name |
string |
唯一工具标识符 |
description |
string |
工具功能的人类可读描述 |
inputSchema |
{ type: 'object', properties: Record<string, unknown>, required?: string[] } |
工具输入参数的JSON模式 |
execute |
(args: Record<string, unknown>) => Promise<ToolResponse> |
异步处理程序，执行工具并返回响应 |
ToolResponse 格式：
{
content?: Array<{ type: string; text: string }>
isError?: boolean
}
useMcpB()
返回一个对象，其中包含两个用于手动生命周期控制的方法：
| 方法 | 说明 |
|---|---|
initialize(options?) |
初始化或重新初始化Web模型上下文。如果已初始化，则无操作。接受与相同的选项 @mcp-b/globals initializeWebModelContext(). |
cleanup() |
拆下适配器并恢复 navigator.modelContext 回到原来的状态。 |
贡献
看 贡献.md 用于开发设置和指南。
