@forgespace/ui-mcp
AI-driven UI and backend code generation via Model Context Protocol. 22 tools, 5 frameworks, brand-aware, npm-published, and MCP Registry-ready.
](https://www.npmjs.com/package/@forgespace/ui-mcp)      ](https://nodejs.org/)
部分 锻造空间 生态系统。
建筑
@forgespace/ui-mcp 是一个薄型协议适配器。所有AI/生成逻辑都存在 在 @forgespace/siza-gen:
@forgespace/ui-mcp (~355 KB) @forgespace/siza-gen (~1.8 MB)
├── src/index.ts (MCP server) ├── ml/ (embeddings, quality, training)
├── tools/ (22 tool defs) ├── generators/ (react, vue, angular, svelte, html)
├── services/ (figma, analysis) ├── registry/ (502 snippets, compositions, packs)
├── resources/ (MCP resources) ├── feedback/ (self-learning, pattern promotion)
└── lib/ (browser, image) └── quality/ (anti-generic rules, diversity)快速开始
# NPX (instant)
npx -y @forgespace/ui-mcp@latest
# Global install
npm install -g @forgespace/ui-mcp && forgespace-ui-mcp
# Docker
docker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcpIDE集成
添加到您的MCP配置(克劳德代码、风帆、光标、VS代码):
{
"mcpServers": {
"forgespace-ui-mcp": {
"command": "npx",
"args": ["-y", "@forgespace/ui-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}工具
| 工具 | 类别 | 描述 |
|---|---|---|
scaffold_full_application | 代码 | 完整的项目样板(React/Next.js/Vue/Angular/HTML+Tailwind) |
generate_ui_component | 代码 | 带有样式审核的UI组件,支持shadcn/UI、Radix、无头UI、Material、PrimeVue |
generate_form | 代码 | 带有Zod/Yup验证、多步骤流程、可访问标记的生产表单 |
generate_page_template | 代码 | 预构建页面(登录、仪表板、身份验证、定价、CRUD) |
generate_prototype | 设计 | 带导航的交互式HTML原型 |
generate_design_image | 设计 | 用户界面屏幕的SVG/PNG模型 |
image_to_component | 代码 | 框架特定组件的截图/线框 |
refine_component | 代码 | 通过自然语言反馈改进组件 |
generate_api_route | 后端 | API路由,包括验证、身份验证和错误处理 |
generate_backend_module | 后端 | 具有路由、服务、中间件的全功能模块 |
scaffold_backend | 后端 | 使用身份验证、数据库和监控完成后端项目 |
generate_from_template_pack | 代码 | 精选包中的多页应用程序(SaaS、Landing、AI Chat) |
figma_context_parser | 上下文 | 读取Figma文件,提取令牌,映射到Tailwind |
figma_push_variables | 设计 | 将设计令牌写回Figma |
fetch_design_inspiration | 上下文 | 从URL中提取视觉元数据 |
analyze_design_references | 上下文 | 分析设计参考,检测模式 |
analyze_design_image | ML | 分析训练数据的设计图像 |
analyze_component_library | 上下文 | 分析组件库模式 |
audit_accessibility | 质量 | WCAG 2.1审核及修复建议 |
submit_feedback | 质量 | 提交反馈以提高未来的产出 |
payments_refund | 后端 | 使用Zod验证的参数(payment_id、金额、原因、货币)请求付款退款 |
manage_training | ML | 训练数据摄取和微调 |
框架和库支持
| 库 | React | Vue | Angular | Svelte | HTML |
|---|---|---|---|---|---|
| shadcn/ui | shadcn/ui | shadcn-vue | 顺风 | 比特ui | 顺风 |
| 根 | @ui/react | @ui/vue | 顺风 | @ui/svelte | 顺风 |
| 无头UI | @headlessui/react | @Headless UI/vue | 顺风 | @headlesui/svelte | 顺风 |
| 材质 | @mui/Material | Vuetify | @角度/材质 | @smui/材质 | 顺风 |
| PrimeVue | 无头UI | PrimeVue | 启动 | 顺风 | 顺风 |
| 无 | 顺风CSS | 顺风CSS |
品牌标识整合
所有生成工具都接受可选 brand_identity 参数--JSON 字符串从 品牌mcps generate_brand_identity 工具。如果提供,品牌颜色、排版和 间距被注入到设计环境中。
环境变量
| 变量 | 必填 | 描述 |
|---|---|---|
FIGMA_ACCESS_TOKEN | 仅适用于Figma工具 | 令牌来自 Figma设置 |
SENTRY_DSN | 可选 | 用于错误报告的哨兵DSN(未捕获的异常和未处理的拒绝) |
分布
- npm --发表于
- MCP注册表元数据 --存储库包括
server.json
和 mcpName 注册表提交元数据
- 标签发布自动化 --推动
v*运行带有出处的npm publish,
然后通过GitHub OIDC将相同版本发布到MCP注册表
- 每周注册表操作 —
.github/workflows/mcp-registry-status.yml
刷新了npm和MCP注册表漂移、可见性和下一个问题 行动
- GitHub --来源、问题、发布和讨论在
发展
npm install && npm run build
npm test # 437 tests, 35 suites
npm run validate # lint + format + typecheck + test社区
GitHub工作流
此存储库遵循共享的Forge Space GitHub工作管理基线:
- 讨论想法、RFC、问答和公告
- 可操作交付工作的问题
- 路线图可见性和跨回购报告项目
看
对于整个组织范围的合同。
执行CodeQL的计划监视运行需要作业范围 security-events: write SARIF上传权限。
预定的 Security Monitoring 工作流故意跳过Codecov上传 并依靠本地覆盖摘要生成来减少来自 第三方动作下载不稳定。
许可证
麻省理工学院
