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 密钥

   • 访问你的 Magic 仪表板
   • 导航到 API 部分
   • 生成一个新的 API 密钥

2. IDE 设置

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline (Beta)

添加到 Cline 的 MCP 配置：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

❓ 常见问题解答

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。