翻译:
示范背景协议 服务器将 c2n 网络组件暴露给 AI 代理服务器: 组件 API(属性、插槽、事件、本地 CSS 部件、带有主题符号的 CSS 变量)、 使用和图片库实例、 编译预设 @c2n/theme 符号,可变代码生成和应用程序工作流程指南. 所有东西都装入里面 data/registry.json,所以它在任何项目下线.
使用
服务器使用stdio,可由任何MCP主机发射:
npx -y @c2n/mcp
Claude 代码项目 .mcp.json数字 :
{ "mcpServers": { "c2n": { "type": "stdio", "command": "npx", "args": ["-y", "@c2n/mcp"] } } }
代码项目 .codex/config.toml数字 :
[mcp_servers.c2n]
command = "npx"
args = ["-y", "@c2n/mcp"]
谷歌反重力项目 .agents/mcp_config.json 使用同样的 mcpServers 命令/参数结构作为克洛德的例子。 这个 @c2n/skill 软件包可以安装技能并自动合并这些配置.
从工程目录运行服务器: 它报告哪些 @c2n/* 当安装的版本不同时,包被安装并服务被捆绑的API. 登记册是在当地包装的,因此工具呼叫在安装后不需要网络访问.
使用 c2n-mcp --version 检查已安装的服务器版本 c2n-mcp --help 用于CLI.
MCP服务器提供结构化组件事实;它不自行安装组件包或编辑应用程序. 说对了 @c2n/skill 当您也希望代理人遵循 c2n 的应用,主题和变体常规时. 见 AI 工具指南 对于完整的设置和示例提示.
校验连接
在添加其 MCP 配置后重新启动代理, 然后要求它使用 c2n MCP 服务器列出组件或检查 c2-button。连接的客户端应披露下面的工具并报告 @c2n/* 在当前工程中安装的软件包。 如果服务器无法启动, 请运行 npx -y @c2n/mcp --version 用于区分 npm/runtime 问题和 MCP 客户端配置问题.
工具
| 工具 | 目的 |
|---|---|
list_components | 每个组件都有标签、软件包、类别、描述、已安装版本 |
search_components | 跨名称、描述、属性、槽、事件、实例、图标的文本搜索 |
get_component | 一个组件的完整 API, CSS 变量按部分/ 状态分组, 并带有主题符号 |
get_examples | 用行和画廊卡; view: "index" 列出每个视图(摘要、截图) |
search_examples | 查找每个组件的画廊("玻璃","溢出","下行")的外观 |
get_presets | 作为 CSS 变量值的已校验预设 |
get_theme | 这个 --c2-theme--* 符号、安装/映射片段;每个组件映射 tag |
generate_variant | CSS 类 / HTML + 样式 / Lit 子类 / JSON 来自超接, 预设或相册卡 |
validate_markup | 您所写的标记/ CSS 检查: 要替换的本地控件, 未知标记/ 属性/ slots/ events/ variables |
get_workflow_guide | workflow, (中文(简体) ), theming, (中文(简体) ), variant-components, (中文(简体) ), frameworks |
画廊卡片上附有其变化的生成摘要,CSS的颜色跟随 --c2-theme--* 字面上值等于符号值的符号(var(--c2-theme--color-outline, #d4d4d8)),因此复制的卡片遵循应用程序的主题和暗模式. 每张卡片还连接与Docs网站托管的PNG光和暗捕获(gallery-shots/<component>/<slug>.<theme>.png时 apps/ui/scripts/gallery-shots.mjs 页:1.
从命令行校验
validate_markup 也是CLI,用于CI和编辑钩. 它读取了HTML、JSX/TSX、Vue、Svelte、Astro、Angular和Lit模板以及CSS,并对照该软件的API进行核对 @c2n/* 工程安装的软件包 :
npx -y @c2n/mcp validate src # exit 1 on errors
npx -y @c2n/mcp validate src --strict # warnings fail too (native controls, box styling on a c2 host)
npx -y @c2n/mcp validate --hook # Claude Code PostToolUse hook: reads the payload on stdin
报告本地人 <button>编号 :<input>编号 :<select>编号 :<textarea>编号 :<dialog>编号 :<details>编号 :<progress> 要素a c2-* 元素替换,未知 c2-* 标记、属性、槽和 --c2-* 变量(带有“你的意思”),事件 a c2-* 元素不会起火( 及其事件列表) , 静态骆驼 大小写属性元素忽略( C)rowKey 页:1 row-key),并用盒装出一个 c2-* 东道主( e)border, (中文(简体) ), padding, (中文(简体) ), background, (中文(简体) ), box-shadow, (中文(简体) ), outline; 仅半径即可)。 线条控取 c2n-ignore,或按下注释后行被跳过。 在钩子模式下,发现会用出站码2进行测试 克洛德代码将它交给特工; npx -y @c2n/skill install 注册 钩入 .claude/settings.json。 。 。 .
资源: c2n://components, (中文(简体) ), c2n://components/{tag}, (中文(简体) ), c2n://theme, (中文(简体) ), c2n://guide/{topic}。 。 。 .
发展
data/registry.json是一个被忽略的建筑文物.npm run build:tools(repo root) 从组件表、 docs 内容、预设和主题中重新生成它,然后编译dist/使执着的人复活.dev, (中文(简体) ),inspect, (中文(简体) ),smoke财务报告和审定财务报表npm pack在需要时自动建立登记册.npm run smoke -w packages/tools/mcp使服务器在 stdio 上运行,检查每个工具.npm run inspect -w packages/tools/mcp打开 MCP 检查器对源条目(node src/cli.ts,节点 24 类型剥离).