# @c2n/mcp 中文文档

规范地址：https://npmcn.com/package/%40c2n/mcp/

版本：1\.0\.23
npm 元数据更新时间：2026-11-07T18:02:03.356Z
中文译文更新时间：2026-11-08T22:35:46.192Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40c2n/mcp
原文对照：https://npmcn.com/package/%40c2n/mcp/?lang=original
项目主页：https://github.com/code2nguyen/web-components#readme
源码仓库：https://github.com/code2nguyen/web-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.1 MB，30 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：2 个
- 首次发布：2026-09-15T13:20:39.425Z
- 最新版本发布：2026-11-07T18:02:03.194Z
- 近 30 天下载量：3168（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

MCP服务器将 c2n 网络组件(API,示例,预设,主题符号,变体生成)曝光给AI代理

## 安装

```sh
npm install @c2n/mcp
```

也可以使用：`pnpm add @c2n/mcp`、`yarn add @c2n/mcp`、`bun add @c2n/mcp`

## README

# 翻译:

[示范背景协议](https://modelcontextprotocol.io/) 服务器将 c2n 网络组件暴露给 AI 代理服务器: 组件 API(属性、插槽、事件、本地 CSS 部件、带有主题符号的 CSS 变量)、 使用和图片库实例、 编译预设 `@c2n/theme` 符号,可变代码生成和应用程序工作流程指南. 所有东西都装入里面 `data/registry.json`,所以它在任何项目下线.

[![c2n Web Components MCP server](https://mcprush.com/badge/c2n-web-components-mcp/card.svg)](https://mcprush.com/to/c2n-web-components-mcp?ref=badge)

## 使用

服务器使用stdio,可由任何MCP主机发射:

```bash
npx -y @c2n/mcp
```

Claude 代码项目 `.mcp.json`数字 :

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

代码项目 `.codex/config.toml`数字 :

```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 工具指南](https://code2nguyen.github.io/web-components/guides/ai-tools) 对于完整的设置和示例提示.

## 校验连接

在添加其 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/*` 工程安装的软件包 :

```bash
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 类型剥离).

## 常见问题

### @c2n/mcp 是什么？

MCP服务器将 c2n 网络组件\(API,示例,预设,主题符号,变体生成\)曝光给AI代理

### 如何安装 @c2n/mcp？

在项目目录运行 npm install @c2n/mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 c2n-mcp，可以用 npx c2n-mcp 直接运行。

### @c2n/mcp 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @c2n/mcp 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @c2n/mcp 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @c2n/mcp 可以商用吗？

@c2n/mcp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @c2n/mcp 的下载量有多少？

根据 npm 官方下载统计，@c2n/mcp 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,168 次，日均约 106 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @c2n/mcp 还在维护吗？

最新版本 1\.0\.23 发布于 2026/11/08（1 天前）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/09/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。