从零搭建WebMCP本地Demo：Chrome配置+站点搜索，实现自然语言转关键词
本文介绍了WebMCP技术的本地实现方法，通过将自然语言转换为传统关键词搜索，实现语义化搜索功能。文章详细演示了如何搭建本地Web环境，包括创建index.html和app.js文件，注册问候工具getGreeting，并配置Chrome Canary浏览器支持WebMCP。重点讲解了WebMCP的三个核心特点：语义化（解决传统搜索不足）、结构化（数据改造）和可执行化（接口优化）。最后提供了验证D
今天来实战实现一个本地 Web 环境和支持 WebMCP 的浏览器配置+进阶版本站点搜索业务结合，实现将自然语言转换为传统关键词的搜索。
我对WebMCP的理解在不断探索的过程中，从模糊慢慢变清晰。
它实际上是兼容了原来的web用户，在这个基础上增加了对大语言模型(LLM) AI的支持。
我总结了3个“化”：
-
语义化
-
我说一个场景，我给小朋友买保险，年付费5000左右，持续投入大概20年，传统的搜索满足不了这个需求，需要使用WebMCP进行转译。进行一次翻译。编译成关键词搜索。
-
-
结构化
-
去年我们对网站进行了全方面的结构化改造。如果你有使用Google merchant center卖货，产品必须要加结构化数据。产品特征，像开源硬件行业，电压、电源、等。全部都要从文本内容转换为结构化数据，方便提供给AI。
-
-
可执行化（接口化）
-
数据都准备好了。怎么提供给AI呢，以前大语言模型通过截图和dom树来读取数据，容易超时，错误率也高，token消耗也大。但接口解决了这些问题。
-
前提条件：
-
下载 Google Chrome Canary
-
开启 Chrome 标志位
-
在Chrome 商店搜索并安装 "Model Context Tool Inspector"
最终的一个结果：
我们将分四步构建一个名为 “HelloMCP” 的 Demo：在这个 Demo 中，你会向浏览器注册一个“打招呼”的工具，并验证它是否成功暴露给 AI。
第一步：准备本地运行环境
由于安全性限制，WebMCP 必须在 http 或 https 协议下运行，不能直接双击打开 .html 文件。
-
创建一个文件夹：
webmcp-demo。 -
在文件夹内新建两个文件：
index.html和app.js。 -
启动本地服务器（任选其一）：
-
如果你有 Node.js：在终端运行
npx http-server。 -
如果你有 Python：运行
python -m http.server 8000。 -
如果你用 VS Code：点击右下角的 "Go Live"。
-
第二步：编写 WebMCP 逻辑
-
编写
index.html
这是你的基础页面，加载我们将要写的 WebMCP 脚本。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebMCP 本地测试 Demo</title>
</head>
<body>
<h1>WebMCP 开发者测试页面</h1>
<p>打开控制台 (F12) 查看 WebMCP 对象状态。</p>
<script src="app.js"></script>
</body>
</html>-
编写
app.js（核心逻辑）
这里我们注册一个简单的工具 getGreeting。
JavaScript
// app.js
// 1. 定义你的工具函数
const sayHello = ({ name }) => {
const message = `你好, ${name || '朋友'}！这是来自 WebMCP 的第一个本地反馈。`;
console.log("WebMCP 工具被调用:", message);
return {
reply: message,
timestamp: new Date().toISOString()
};
};
// 2. 将工具注册到浏览器上下文中
if (window.navigator.modelContext) {
window.navigator.modelContext.provideContext({
tools: [
{
name: "getGreeting",
description: "根据用户提供的姓名发送一条问候消息。",
inputSchema: {
type: "object",
properties: {
name: { type: "string", description: "用户的名字" }
},
required: ["name"]
},
execute: async (args) => {
return sayHello(args);
}
}
]
});
console.log("✅ WebMCP 工具 [getGreeting] 注册成功！");
} else {
console.error("❌ 当前浏览器不支持 WebMCP。请检查是否开启了实验性标志或安装了插件。");
}第三步：开启浏览器支持
目前大部分浏览器（即便在 2026 年）出于安全考虑，默认可能需要手动开启或通过插件观察。
请下载： Google Chrome Canary
-
开启 Chrome 标志位：
Google Chrome Canary开启 Chrome WebMCP for testing标志位 -
在地址栏输入
chrome://flags。 -
搜索 WebMCP for testing 并设置为 Enabled。
-
重启浏览器。
-
-
（推荐）安装调试工具：
-
去 Chrome 商店搜索并安装 "Model Context Tool Inspector"。这个扩展就像是 AI 的眼睛，能让你直接看到网页暴露了哪些工具。
-
第四步：验证你的 Demo
-
访问你的本地地址（如
http://localhost:8080）。 -
检查控制台：你应该能看到
✅ WebMCP 工具 [getGreeting] 注册成功！。 -
使用调试器模拟 AI 调用：
-
打开 Model Context Tool Inspector。
-
你应该能看到一个列表，里面有
getGreeting工具。 -
点击 Test，在参数输入：
{"name": "开发妈妈"}。 -
点击 Run。
-
-
看结果：如果控制台打印出了问候语，并且调试器收到了 JSON 回复，说明你的第一个 WebMCP Demo 彻底跑通了！
如果你对 WebMCP是什么，以及如何在网站中如何使用，可以看这篇文章。
关于作者
我是一名自我探索的技术型S/A/GEO，近9年外贸独立站开发&运维经验。
全平台账号小红书、bilibili 和csdn 同号，微信公众号:Adair 代呆呆,知乎：Adair。
欢迎有同样兴趣的朋友关注我。后续会陆续更新我的AEO探索之旅。
希望我的记录能够给你带来启发。欢迎大家多多和我留言交流~
欢迎 ❤️ 点赞 | 🔔 关注 | ⭐️ 收藏 | 💬 评论
你的每一个反馈，对我都很重要，是我持续输出的动力～
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
19
0- 0
已为社区贡献15条内容
所有评论(0)