UI Skills WebMCP工具详解：浏览器navigator.modelContext如何让Agent直达站点
【免费下载链接】ui-skills Skills for Design Engineers 
项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills
🧩 UI Skills 是一个面向设计工程师的 UI 技能库，最近它用浏览器新能力 WebMCP（入口正是 navigator.modelContext API）做了一件很酷的事：让 AI Agent 直接在浏览器里调用站点工具——搜索技能目录、打开技能页面、读取站点概览，全程无需你手动点页面。本文将用通俗的方式拆解这 3 个内置工具如何注册与运行，以及它和传统 MCP 服务器的区别。
什么是 WebMCP：浏览器与 AI Agent 之间的"工具插座"
💡 先理解一个类比：
- MCP（Model Context Protocol）：给 Agent 提供工具的协议，通常跑在服务器端；
- WebMCP：把同样的思路搬进浏览器——网页自己向 Agent 声明"我能提供这些工具"；
- navigator.modelContext：浏览器暴露的标准入口，网页通过它调用 registerTool() 注册工具，Agent 随即可发现并调用。
换句话说，只要浏览器支持 navigator.modelContext，UI Skills 的任意页面打开瞬间，Agent 就多了一组"原生工具"，不用爬页面、不用猜链接。
3 个内置 WebMCP 工具：Agent 的"手和脚" 🦾
工具注册逻辑集中在 src/lib/webmcp-tools.ts，共提供 3 个工具：
list_ui_skills：一句话搜索技能目录
Agent 想知道"有哪些关于动效的技能"时，调用它即可。支持可选的 query 参数，会不区分大小写地过滤技能名称和描述，最多返回 50 条（附带 count 总数），并标记 readOnlyHint（只读、无副作用）。
open_ui_skill：一键直达技能页面
传入 slug（如 baseline-ui）或 pathSlug（如 ibelick/baseline-ui），工具会在目录中匹配后直接驱动浏览器跳转到对应技能页。Agent 不再需要"拼 URL + 点链接"，一步直达 🚀。
get_ui_skills_overview：读取站点概览
返回站点的 llms.txt 文本（由 src/pages/llms.txt.ts 生成），包含站点导航和全部技能目录摘要——这是 Agent 快速"看懂整个站点"的说明书，同样标记为只读。
运行机制：注册、执行、卸载三步走 ⚙️
组件还通过 AbortController 在页面卸载时调用 unregisterTool() 清理工具，避免"工具残留"污染下一次会话。
WebMCP vs 普通 MCP 服务器：互补而非替代 🔄
| 运行位置 | 打开页面的浏览器里 | 站点 /mcp 端点（JSON-RPC） |
| 典型工具 | list_ui_skills / open_ui_skill / 概览 | list_skills / get_skill |
| 擅长场景 | 驱动当前页面：导航、交互、上下文感知 | 拉取完整内容：技能 Markdown 全文 |
| 前置条件 | 浏览器支持 navigator.modelContext | 任意 MCP 客户端 |
实现分别在 src/lib/webmcp-tools.ts 和 src/lib/mcp-server.ts。一句话总结：要"内容"走 MCP 服务器，要"操作当前页面"用 WebMCP。
如何快速体验：最快上手方式 🚀
✨ 小结：navigator.modelContext 让网页从"被动展示"升级为"主动提供能力"。UI Skills 的实现只用了三个小而清晰的工具，就为 Agent 打通了从"发现技能"到"直达页面"的完整链路，是 WebMCP 落地场景中一个简洁、优雅、值得参考的范例。
【免费下载链接】ui-skills Skills for Design Engineers 项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
