21st.dev 魔法AI代理

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

🌟 功能

• AI驱动的UI生成：通过自然语言描述创建UI组件
• 多IDE支持：
  • Cursor IDE集成
  • Windsurf 支持
  • VSCode + Cline 集成（测试版）
• 现代组件库：访问由21st.dev启发的大量预构建可定制组件
• 实时预览：即时查看正在创建的组件
• TypeScript支持：全面的TypeScript支持以实现类型安全开发
• SVGL集成：访问大量的专业品牌资产和徽标
• 组件增强：通过高级特性和动画改进现有组件（即将推出）

🎯 工作原理

1. 告诉代理你需要什么

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

2. 让魔法创造它

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

3. 无缝集成

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

🚀 快速入门

先决条件

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

安装

1. 生成API密钥

   • 访问你的魔法仪表盘
   • 导航到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（测试版）

添加到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"
      }
    }
  }
}

❓ 常见问题

魔法AI代理如何处理我的代码库？

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

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

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

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

如果你超过了每月的生成限制，系统会提示你升级计划。你可以随时升级以继续生成组件。已有的组件将继续正常工作。

新组件多久能加入21st.dev的库？

作者可以在任何时候将组件发布到21st.dev，魔法代理将立即获得访问权限。这意味着你将始终能够访问社区提供的最新组件和设计模式。

组件复杂性有限制吗？

魔法AI代理可以处理各种复杂度的组件，从简单的按钮到复杂的交互表单。然而，为了获得最佳效果，我们建议将非常复杂的UI分解成更小、更易于管理的组件。

🛠️ 开发

项目结构

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

关键组件

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

🤝 贡献

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

👥 社区和支持

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

⚠️ 测试版通知

魔法代理目前处于测试阶段。在此期间，所有功能都是免费的。我们感谢您的反馈和耐心，因为我们继续改进平台。

📝 许可证

MIT许可证

🙏 致谢

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

---

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