21st.dev Magic AI Agent

基本能力

产品定位

Magic Component Platform (MCP) 是一个AI驱动的UI组件生成平台，旨在通过自然语言描述快速创建和定制现代UI组件，提升开发效率。

核心功能

• AI驱动的UI生成：通过自然语言描述创建UI组件
• 多IDE支持：集成Cursor、Windsurf和VSCode（带Cline扩展）
• 现代组件库：访问大量预构建、可定制的组件
• 实时预览：即时查看创建的组件
• TypeScript支持：全面支持TypeScript，确保类型安全开发
• SVGL集成：访问专业品牌资产和徽标
• 组件增强：为现有组件添加高级功能和动画（即将推出）

适用场景

• 快速生成UI组件
• 提升前端开发效率
• 集成到现有项目中，无需从头开始编写UI代码

工具列表

• Cursor IDE集成：通过命令行工具快速安装和配置
• Windsurf支持：通过配置文件集成
• VSCode + Cline扩展：Beta版支持，通过配置文件集成

常见问题解答

• Magic AI Agent如何处理代码库？：仅生成或修改与组件相关的文件，不影响其他部分
• 能否自定义生成的组件？：可以，所有组件均可完全编辑
• 生成次数用完怎么办？：可升级计划以继续生成
• 新组件何时添加到库中？：作者可随时发布，Magic Agent立即访问
• 组件复杂度限制？：建议将复杂UI分解为小组件

使用教程

使用依赖

• Node.js（推荐最新LTS版本）
• 支持的IDE之一：Cursor、Windsurf或VSCode（带Cline扩展）

安装教程

1. 生成API密钥
2. 访问Magic仪表板
3. 导航至API部分

4. 生成新API密钥

5. IDE设置

6. Cursor IDE bash npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"
7. Windsurf 编辑~/.codeium/windsurf/mcp_config.json文件
8. VSCode + Cline (Beta) 编辑Cline的MCP配置文件

调试方式

安装完成后，可在IDE中直接使用/ui命令描述所需组件，Magic将即时生成并集成到项目中。

许可证

该项目遵循 MIT 开源许可条款。