如何在 claude-code-templates 仪表盘上通过构建开关启用 WebMCP 只读目录工具【免费下载链接】claude-code-templatesCLI tool for configuring and monitoring Claude Code项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-templatesclaude-code-templates 的仪表盘dashboard/目录下的 Astro 站点内置了 WebMCP V1把组件目录以一组只读工具的形式暴露给支持 WebMCP 的浏览器 AI agent让它们可以直接查询目录、拿到安装命令而不必去解析页面 UI。这套工具默认不生效——dashboard/src/lib/webmcp.ts 中的入口initWebMCP()在构建时开关PUBLIC_WEBMCP_ENABLED不是字符串true时会直接返回。本文说明如何在生产配置、CI 构建和本地构建三个位置打开这个开关并在浏览器中确认 4 个只读工具已经注册。开关控制的内容PUBLIC_WEBMCP_ENABLED是构建期变量文档dashboard/docs/webmcp.md说明它采用的是和PUBLIC_ADS_ENABLED相同的模式判断逻辑只有一行webmcp.ts 第 20 行const WEBMCP_ENABLED import.meta.env.PUBLIC_WEBMCP_ENABLED true;也就是说只有字符串true会启用功能其余任何取值包括false都让initWebMCP()在触碰document.modelContext之前直接返回。启用后DashboardLayout.astro 中打包的script会调用initWebMCP()站点所有页面共用这个布局Astro 会去重脚本因此工具在每一页都可用。两个与“是否破坏页面”相关的行为来自文档和源码不支持 WebMCP 的浏览器不受影响initWebMCP()先做document.modelContext.registerTool的 feature-detect检测不到就直接退出。注册失败Permissions Policy 导致的NotAllowedError、重名导致的InvalidStateError会被吞掉不会中断页面。注册成功的工具共 4 个全部是只读readOnlyHint: true返回社区撰写的组件描述的工具还会带上untrustedContentHint: true提示 agent 把该文本当数据而不是指令工具名输入返回search-components{ query, type? }{ total, results[] }最多 20 条含名称、类型、分类、描述、页面 URL 和安装命令get-component-details{ name, type }单个组件的目录条目加installCommand与页面url未找到时返回{ error }get-install-command{ name, type }{ installCommand }即npx claude-code-templateslatest --type path形式的命令get-catalog-stats无{ counts, downloads, lastUpdated }来自counts.json与trending-data.json工具本身不新增后端和依赖数据全部来自仪表盘已经提供的同源静态 JSONsearch-index.json、components/{type}.json、counts.json、trending-data.json通过 src/lib/data.ts 中 UI 共用的fetchSearchIndex()、fetchComponentsByType()、getInstallCommand()读取共享 5 分钟内存缓存。在三个位置配置开关生产环境wrangler.toml 的[vars]dashboard/wrangler.toml 的[vars]段保存生产值PUBLIC_*必须写在这里而不是 secrets 中# WebMCP catalog tools (src/lib/webmcp.ts); set to false to disable: PUBLIC_WEBMCP_ENABLED true需要关闭时把该行改成false即可这是文档注释里给出的禁用方式。CI 构建Build 步骤的 env.github/workflows/deploy.yml 在Build步骤里把开关作为环境变量传入构建CI 使用 Node 22依赖安装在dashboard目录下- name: Build run: npm run build working-directory: dashboard env: PUBLIC_WEBMCP_ENABLED: true构建产物由后续的npx wrangler pages deploy dist部署到 Cloudflare Pages。本地构建本地构建与 CI 的 Build 步骤等价先在dashboard目录安装依赖再带上同一个环境变量执行npm run builddashboard/package.json 中build即astro buildcd dashboard npm install PUBLIC_WEBMCP_ENABLEDtrue npm run build不设置该变量时npm run build也能完成构建只是产物中 WebMCP 功能处于关闭状态initWebMCP()直接返回不会报错。验证工具是否注册文档的 Testing 部分给出两种验证方式。在支持 WebMCP 的浏览器中在启用了 WebMCP 的浏览器里文档列出的支持范围Chrome 149 / Edge 150 的 origin trial 版本或 ChatGPT Desktop、Brave Leo 这类已支持 agentgetTools()/executeTool()可以同源调用直接在 DevTools 中执行const tools await document.modelContext.getTools(); await document.modelContext.executeTool( tools.find(t t.name search-components), { query: react } );判断依据getTools()返回的列表中能找到search-components等 4 个工具名且executeTool能返回对应结果说明开关生效且注册成功。文档没有给出这次调用的固定示例输出结果内容以目录数据为准。在普通浏览器中打桩普通浏览器不支持document.modelContext可以先打桩 API 再重载页面来验证注册逻辑是否执行按文档说明以下代码粘贴进 DevTools 后刷新页面// paste in DevTools, then reload document.modelContext { registerTool: t (console.log(registered, t.name), Promise.resolve()) };开关启用时控制台会随每个工具注册打印registered及工具名开关未启用时initWebMCP()直接返回不会出现这些打印可借此区分两种构建产物。已知限制Chrome/Edge 的 origin trial 需要在对应试用计划中注册站点域名并添加meta http-equivorigin-trial标签文档把这一项列为 V1 之后的工作ChatGPT Desktop 和 Brave Leo 不需要。V1 不包含声明式form工具、exposedTo跨源 iframe 暴露、service-worker 工具也没有任何写操作/有后果的工具购物车、PR 流程等需要先做用户确认设计。工具返回的组件描述属于社区撰写内容agent 侧应按数据而非指令处理。需要继续深入时可以看 webmcp.md 中的架构与约定说明以及 webmcp.ts工具定义与注册、DashboardLayout.astro全站挂载点三个文件的实现细节。【免费下载链接】claude-code-templatesCLI tool for configuring and monitoring Claude Code项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-templates创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考