第一步：在网页注册工具（通用基础）
Step 1: Register Tools on Your Page (Foundation)
// Register your tool on the web page — shared foundation for all 3 channels
if ('modelContext' in navigator) {
navigator.modelContext.registerTool({
name: 'search_products',
// description is how AI decides WHEN to call you
// Formula: [what it does] + Use this when [trigger] + Returns [output]
description: `Search the product catalog.
Use this when the user wants to find products,
check availability, or compare items.
Returns product name, price, and stock status.`,
parameters: {
type: 'object',
properties: {
query: {
type: 'string',
description: 'Natural language search query',
examples: ['red shoes', 'wireless headphones under $100']
},
limit: { type: 'number', default: 10 }
},
required: ['query']
},
handler: async ({ query, limit = 10 }) => {
const data = await fetchProducts(query, limit);
return { products: data, total: data.length };
}
});
}
三种接入通道对比
Three Integration Channels Compared
通道Channel
接入方式How It Works
适用场景Best For
Claude Chrome Extension
浏览器扩展注入，捕获 registerTool 声明，暴露给浏览器内 AI agents
Browser extension injects, captures registerTool declarations, exposes to in-browser AI agents
用户安装扩展后即可使用，成熟可用
Works once user installs the extension, production-ready
Chrome Native
浏览器原生读取页面工具声明，无需扩展
Browser natively reads page tool declarations, no extension needed
实验阶段，最低摩擦接入路径
Experimental, lowest-friction integration path
Local Relay
本地中继服务，将网页工具桥接给 Claude Desktop / Cursor / VS Code
Local relay bridges web page tools to Claude Desktop / Cursor / VS Code
桌面 AI 用户，成熟可用
Desktop AI users, production-ready
description 写法：决定 AI 何时调用你
Writing description: Determines When AI Calls You
✖ 糟糕的 description
✖ Bad description
"A tool for searching products"
只说功能，没说何时用。
AI 不知道在什么意图下调用你，大概率不会触发。
Only describes function, not when to use it.
AI doesn't know which user intent triggers it, likely won't fire.
✔ 好的 description
✔ Good description
"...Use this when the user wants to find products or check availability. Returns name, price, stock."
说了触发条件 + 返回内容。
AI 精准知道何时调用你。
States trigger condition + return content.
AI precisely knows when to call you.
执行清单
Action Checklist