21st.dev 魔法 AI 代理

魔法组件平台（MCP）是一个强大的由 AI 驱动的工具，它通过自然语言描述帮助开发者即时创建美观、现代的 UI 组件。它可以无缝集成到流行的 IDE 中，并为 UI 开发提供了一个简化的流程。

🌟 特性

• AI 支持的 UI 生成：通过自然语言描述来创建 UI 组件
• 多 IDE 支持：
  • Cursor IDE 集成
  • Windsurf 支持
  • VSCode + Cline 集成（Beta）
• 现代组件库：访问由 21st.dev 启发的大规模预制且可定制组件集合
• 实时预览：在创建过程中即时查看您的组件
• TypeScript 支持：完整的 TypeScript 支持以确保类型安全开发
• SVGL 集成：访问大量的专业品牌资产和标志
• 组件增强：使用高级特性和动画改进现有组件（即将推出）

🎯 工作原理

1. 告诉代理你需要什么

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

2. 让魔法帮你创造

   • 你的 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 代理如何处理我的代码库？

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

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

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

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

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

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

作者可以随时将组件发布到21st.dev上，Magic Agent将立即能够访问这些组件。这意味着你总是能够获得来自社区的最新组件和设计模式。

组件复杂度有限制吗？

Magic AI Agent 能够处理从简单的按钮到复杂的交互表单等不同复杂程度的组件。然而，为了达到最佳效果，我们建议将非常复杂的用户界面分解为更小、更易管理的组件。

🛠️ 开发

项目结构

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

关键组件

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

🤝 贡献

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

👥 社区与支持

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

⚠️ 测试版通知

Magic Agent 目前处于测试阶段。在此期间所有功能都是免费的。感谢您的反馈和支持，我们将持续改进平台。

📝 许可证

MIT许可证

🙏 致谢

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

---

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