内容
<p align="center">
<img src="public/og.png" alt="mcpcn banner" />
</p>
<h1 align="center">mcpcn</h1>
<p align="center">
免费、开源、即用、可定制的 React 组件，适用于 MCP 应用。<br/>
零配置。一键设置。基于 <a href="https://base-ui.com/">Base UI</a> 构建，与 <a href="https://ui.shadcn.com/">shadcn/ui</a> 无缝协作。
</p>
<p align="center">
<a href="https://github.com/shadcn-labs/mcpcn"><img src="https://www.shieldcn.dev/github/stars/shadcn-labs/mcpcn.svg?variant=secondary&size=xs&theme=zinc" alt="GitHub Stars" /></a>
<a href="https://github.com/shadcn-labs/mcpcn/actions"><img src="https://www.shieldcn.dev/github/ci/shadcn-labs/mcpcn.svg?variant=secondary&size=xs&theme=zinc" alt="CI" /></a>
<a href="https://discord.gg/N6G36KhYK4"><img src="https://www.shieldcn.dev/discord/online-members/N6G36KhYK4.svg?variant=secondary&size=xs&theme=zinc" alt="Discord Members" /></a>
<a href="https://x.com/shadcnlabs"><img src="https://www.shieldcn.dev/x/follow/shadcnlabs.svg?variant=branded&size=xs&theme=zinc" alt="X Follow" /></a>
</p>
<p align="center">
<a href="https://mcpcn.dev/docs">开始使用</a> ·
<a href="https://mcpcn.dev/docs/installation">安装</a> ·
<a href="https://mcpcn.dev/docs/blocks">组件</a>
</p>
## 功能特点
- 🎨 **主题感知** — 适应现有的浅色和深色主题，具备语义化颜色标记
- 🎯 **零配置** — 开箱即用，具备合理的默认设置
- 📦 **兼容 shadcn/ui** — 使用相同的注册表格式和 CLI
- ♿ **Base UI 驱动** — 无需 Radix UI 的可访问性基元
- 🧩 **可组合** — 直接导入子组件，并使用普通的 JSX 进行排列
- 🤖 **为 MCP 应用而构建** — 表单、支付、消息、社交内容、地图、事件等
- 🔌 **OpenUI 就绪** — 组件文档包含 OpenUI 集成指南
## 贡献指南
欢迎贡献！请随时提交拉取请求。
1. 分叉仓库
2. 创建功能分支 (`git checkout -b feature/amazing-feature`)
3. 安装依赖 (`pnpm install`)
4. 运行检查 (`pnpm fix && pnpm typecheck`)
5. 提交更改 (`git commit -m 'Add some amazing feature'`)
6. 推送到分支 (`git push origin feature/amazing-feature`)
7. 打开拉取请求
## License
[MIT](LICENSE)
## Star 历史
<a href="https://www.star-history.com/?repos=shadcn-labs%2Fmcpcn&type=date&legend=top-left">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&theme=dark&legend=top-left" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left" />
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=shadcn-labs/mcpcn&type=date&legend=top-left" />
</picture>
</a>
MCP 市场