基本能力
产品定位
Magic Component Platform (MCP) 是一个AI驱动的UI组件生成平台，旨在通过自然语言描述快速创建和集成现代UI组件到开发者的项目中。
核心功能
- AI驱动的UI生成：通过自然语言描述创建UI组件
- 多IDE支持：支持Cursor、Windsurf、VSCode（带Cline扩展）等IDE
- 现代组件库：访问大量预构建、可定制的组件，灵感来自21st.dev
- 实时预览：在创建组件时即时查看效果
- TypeScript支持：全面支持TypeScript，确保类型安全开发
- SVGL集成：访问大量专业品牌资产和标志
- 组件增强：为现有组件添加高级功能和动画（即将推出）
适用场景
- 快速原型设计
- UI组件开发
- 前端开发效率提升
- 团队协作开发
工具列表
- @21st-dev/cli：命令行工具，用于安装和配置MCP
- Magic Console：用于生成API密钥的管理控制台
常见问题解答
- Magic AI Agent如何处理我的代码库？
仅写入或修改与生成的组件相关的文件，遵循项目的代码风格和结构。 - 可以自定义生成的组件吗？
是的，所有生成的组件都是完全可编辑的。 - 如果超出生成限制会怎样？
会提示升级计划，现有组件仍完全可用。 - 新组件多久添加到21st.dev的库中？
作者可以随时发布，Magic Agent会立即访问。 - 组件复杂度有限制吗？
可以处理各种复杂度的组件，但建议将复杂UI分解为小组件。
使用教程
使用依赖
- Node.js（推荐最新LTS版本）
- 支持的IDE之一：Cursor、Windsurf、VSCode（带Cline扩展）
安装教程
- 生成API密钥
- 访问21st.dev Magic Console
-
生成新的API密钥
-
选择安装方法
方法1：CLI安装（推荐）
bash
npx @21st-dev/cli@latest install <client> --api-key <key>
支持的客户端：cursor, windsurf, cline, claude
方法2：手动配置
在IDE的MCP配置文件中添加：
json
{
"mcpServers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
}
}
}
配置文件位置：
- Cursor: ~/.cursor/mcp.json
- Windsurf: ~/.codeium/windsurf/mcp_config.json
- Cline: ~/.cline/mcp_config.json
- Claude: ~/.claude/mcp_config.json
调试方式
安装完成后，可以在支持的IDE中使用/ui命令描述所需组件，如：
/ui create a modern navigation bar with responsive design
然后按照提示操作，查看生成的组件。
