21st.dev Magic AI Agent

基本能力

产品定位

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扩展）

安装教程

1. 生成API密钥
2. 访问21st.dev Magic Console

3. 生成新的API密钥

4. 选择安装方法

方法1：CLI安装（推荐）

npx @21st-dev/cli@latest install <client> --api-key <key>

支持的客户端：cursor, windsurf, cline, claude

方法2：手动配置

在IDE的MCP配置文件中添加：

{
  "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

然后按照提示操作，查看生成的组件。

许可证

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