21st.dev Magic AI Agent

Magic Component Platform (MCP) 是一个强大的 AI 驱动工具，可帮助开发者通过自然语言描述立即创建美观、现代的 UI 组件。它与流行的 IDE 无缝集成，并为 UI 开发提供简化的工作流程。

🌟 特性

• AI 驱动的 UI 生成: 通过用自然语言描述来创建 UI 组件
• 多 IDE 支持:
  • Cursor IDE 集成
  • Windsurf 支持
  • VSCode + Cline 集成 (Beta)
• 现代组件库: 访问由 21st.dev 启发的、大量预构建的可定制组件集合
• 实时预览: 在创建组件时立即查看它们
• TypeScript 支持: 完整的 TypeScript 支持，实现类型安全开发
• SVGL 集成: 访问大量专业的品牌资产和徽标
• 组件增强: 使用高级特性和动画改进现有组件 (即将推出)

🎯 工作原理

1. 告诉 Agent 你需要什么

   • 在你的 AI Agent 聊天中，只需输入 /ui 并描述你正在寻找的组件
   • 示例: /ui 创建一个具有响应式设计的现代导航栏

2. 让 Magic 创建它

   • 你的 IDE 提示你使用 Magic
   • Magic 立即构建一个精美的 UI 组件
   • 组件的灵感来自 21st.dev 的库

3. 无缝集成

   • 组件自动添加到你的项目中
   • 立即开始使用你的新 UI 组件
   • 所有组件都是完全可定制的

🚀 快速开始

前提条件

• Node.js (推荐最新的 LTS 版本)
• 支持的 IDE 之一:
  • Cursor
  • Windsurf
  • VSCode (带有 Cline 扩展)

安装

1. 生成 API 密钥

   • 访问 21st.dev Magic Console
   • 生成一个新的 API 密钥

2. 选择安装方法

方法 1: CLI 安装 (推荐)

一个命令即可为你的 IDE 安装和配置 MCP:

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

❓ 常见问题解答

Magic AI Agent 如何处理我的代码库？

Magic AI Agent 仅写入或修改与其生成的组件相关的文件。它遵循你项目的代码风格和结构，并与你现有的代码库无缝集成，而不会影响应用程序的其他部分。

我可以自定义生成的组件吗？

是的！所有生成的组件都是完全可编辑的，并带有结构良好的代码。你可以像修改代码库中的任何其他 React 组件一样修改样式、功能和行为。

如果我的生成次数用完了怎么办？

如果你超过了每月生成限制，系统会提示你升级你的计划。你可以随时升级以继续生成组件。你现有的组件将保持完全可用。

新组件多久添加到 21st.dev 的库中？

作者可以随时将组件发布到 21st.dev，Magic Agent 将立即访问它们。这意味着你将始终可以访问来自社区的最新组件和设计模式。

组件的复杂性有限制吗？

Magic AI Agent 可以处理各种复杂性的组件，从简单的按钮到复杂的交互式表单。但是，为了获得最佳效果，我们建议将非常复杂的 UI 分解为更小、更易于管理的组件。

🛠️ 开发

项目结构

mcp/
├── app/
│   └── components/     # 核心 UI 组件
├── types/             # TypeScript 类型定义
├── lib/              # 实用函数
└── public/           # 静态资源

关键组件

• IdeInstructions: 不同 IDE 的设置说明
• ApiKeySection: API 密钥管理界面
• WelcomeOnboarding: 新用户的引导流程

🤝 贡献

我们欢迎贡献！请加入我们的 Discord 社区 并提供反馈，以帮助改进 Magic Agent。源代码可在 GitHub 上找到。

👥 社区 & 支持

• Discord 社区 - 加入我们活跃的社区
• Twitter - 关注我们以获取更新

⚠️ Beta 注意事项

Magic Agent 目前处于 beta 阶段。在此期间，所有功能都是免费的。在我们不断改进平台的过程中，感谢你的反馈和耐心。

📝 许可证

MIT 许可证

🙏 致谢

• 感谢我们的 beta 测试人员和社区成员
• 特别感谢 Cursor、Windsurf 和 Cline 团队的合作
• 与 21st.dev 集成以获取组件灵感
• SVGL 用于徽标和品牌资产集成

---

有关更多信息，请加入我们的 Discord 社区 或访问 21st.dev/magic。