c2n Web Components

Name: c2n Web Components
Author: code2nguyen

本地服务

code2nguyen.github.io开发工具5今天更新

代码仓库访问官网

关于 c2n Web Components

c2n Web Components 的 MCP 服务为 AI Agent 提供 c2-* Lit 组件的结构化 API、示例、主题令牌和验证工具，面向使用这些组件的项目。注册表随包提供，安装后可离线查询；它提供信息与检查，不会自行安装组件或修改应用。

主要功能

01检索组件及其属性、插槽和事件
02查看示例、画廊和主题令牌
03生成组件变体代码
04验证标记、CSS 与组件 API
05提供工作流及主题指南
06离线使用本地组件注册表

适用场景

01在编码时查找组件 API 与用法
02基于预设或画廊示例生成变体
03检查模板中的未知属性或 CSS 变量
04在 CI 或编辑器钩子中验证标记

MCP 相关

通过 stdio 向 MCP 客户端暴露组件 API、示例、主题、工作流指南及验证工具，并提供 c2n:// 资源。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "code2nguyen-c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ],
      "env": {
        "C2N_PROJECT_ROOT": "<C2N_PROJECT_ROOT>"
      }
    }
  }
}

启动命令npx -y @c2n/mcp

需要配置的环境变量

C2N_PROJECT_ROOTProject whose installed @c2n/* packages the server reports. Defaults to the working directory.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@c2n/mcp1.0.18stdio

工具

收录的工具列表 · 更新于今天

参数	类型	必填	说明
format	enum	否	输出格式markdown \| json
keyword	string	否	按标签、标题或描述进行子字符串筛选
category	enum	否	仅此类别Inputs \| Buttons \| Navigation \| Layout \| Data display \| Editors & viewers \| Chart \| Planning \| Feedback \| Chat \| Icons
installedOnly	boolean	否	仅包含当前项目中已安装的软件包

详细介绍

@c2n/mcp

Model Context Protocol 服务，可向 AI Agent 提供 c2n Web 组件：组件 API（属性、插槽、事件、原生 CSS 部件、含主题令牌的 CSS 变量）、用法和图库示例、精选预设、@c2n/theme 令牌、变体代码生成以及应用工作流指南。所有内容都打包在 data/registry.json 中，因此可在任何项目中离线使用。

使用

该服务使用 stdio，可由任何 MCP 宿主启动：

npx -y @c2n/mcp

Claude Code 项目的 .mcp.json：

{ "mcpServers": { "c2n": { "type": "stdio", "command": "npx", "args": ["-y", "@c2n/mcp"] } } }

Codex 项目的 .codex/config.toml：

[mcp_servers.c2n]
command = "npx"
args = ["-y", "@c2n/mcp"]

Google Antigravity 项目的 .agents/mcp_config.json 使用与 Claude 示例相同的 mcpServers 命令／参数结构。@c2n/skill 包可以安装技能并自动合并这些配置。

从项目目录运行该服务：它会报告已安装的 @c2n/* 包，并在已安装版本不同时提供打包的 API。注册表会打包在本地，因此安装后调用工具无需网络连接。

使用 c2n-mcp --version 查看已安装的服务版本，使用 c2n-mcp --help 查看 CLI 用法。

MCP 服务提供结构化的组件信息；它不会安装组件包，也不会自行编辑应用。如果还希望 Agent 遵循 c2n 的应用、主题和变体规范，请将其与 @c2n/skill 配合使用。完整设置说明和提示词示例请参阅 AI 工具指南。

验证连接

添加 MCP 配置后，重启 Agent，然后要求它使用 c2n MCP 服务列出组件或检查 c2-button。已连接的客户端应显示下方的工具，并报告当前项目中已安装的 @c2n/* 包。如果服务无法启动，请在该项目中运行 npx -y @c2n/mcp --version，以判断问题出在 npm／运行时还是 MCP 客户端配置。

工具

工具	用途
`list_components`	列出每个组件的标签、包、类别、描述和已安装版本
`search_components`	在名称、描述、属性、插槽、事件、示例和图标中进行全文搜索
`get_component`	获取单个组件的完整 API，以及按部件／状态分组并附带主题令牌的 CSS 变量
`get_examples`	获取用法条目和图库卡片；`view: "index"` 会列出所有样式（摘要、截图）
`search_examples`	在所有组件的图库中查找样式（“glass”、“pill”、“underline”）
`get_presets`	获取以 CSS 变量值形式呈现的精选预设
`get_theme`	获取 `--c2-theme--*` 令牌、安装／映射代码片段；按组件提供带有 `tag` 的映射
`generate_variant`	根据覆盖项、预设或图库卡片生成 CSS 类／HTML + 样式／Lit 子类／JSON
`validate_markup`	检查你编写的标记／CSS：需要替换的原生控件、未知标签／属性／插槽／事件／变量
`get_workflow_guide`	`workflow`、`theming`、`variant-components`、`frameworks`

图库卡片附有自动生成的摘要，说明卡片会修改哪些内容；如果某个颜色字面值与令牌的值相同（var(--c2-theme--color-outline, #d4d4d8)），卡片中的 CSS 颜色就会使用 --c2-theme--* 令牌，因此复制的卡片会跟随应用的主题和深色模式。每张卡片还会链接到文档站点托管的浅色和深色 PNG 截图（gallery-shots/<component>/<slug>.<theme>.png，由 Pages 部署中的 apps/ui/scripts/gallery-shots.mjs 生成）。

从命令行进行验证

validate_markup 也可作为 CLI 使用，适用于 CI 和编辑器钩子。它会读取 HTML、JSX/TSX、Vue、Svelte、Astro、Angular 和 Lit 模板及 CSS，并根据项目已安装的 @c2n/* 包的 API 进行检查：

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

它会报告可由 c2-* 元素替代的原生 <button>/<input>/<select>/<textarea>/<dialog>/<details>/<progress> 元素、未知的 c2-* 标签、属性、插槽和 --c2-* 变量（并提供“你是否想找”建议）、c2-* 元素不会触发的事件（并列出该元素的事件列表）、元素会忽略的静态 camelCase 属性（row-key 应写作 rowKey），以及 c2-* 宿主元素上的盒模型样式（border、padding、background、box-shadow、outline；仅设置圆角则没问题）。包含 c2n-ignore 的行，或包含该标记的注释之后一行，会被跳过。在钩子模式下，检查结果会写入 stderr，退出代码为 2；Claude Code 会将其返回给 Agent；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（仓库根目录）会根据组件清单、文档内容、预设和主题重新生成它，然后编译 dist/ 并刷新已提交的技能备用版本。
dev、inspect、smoke 和 npm pack 会在需要时自动构建注册表。
npm run smoke -w packages/tools/mcp 会通过标准输入／输出启动服务并检查每个工具。
npm run inspect -w packages/tools/mcp 会针对源入口（node src/cli.ts，Node 24 类型剥离）打开 MCP Inspector。