AI导哈

AI UI组件生成工具

Magic Component Platform (MCP) 是一个AI驱动的工具，帮助开发者通过自然语言描述快速创建现代化UI组件，支持多种IDE集成和实时预览。

  • by oyasimi1209
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 oyasimi1209/magic-mcp

使用说明

21st.dev魔法AI代理

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

🌟 特性

  • AI驱动的UI生成：通过用自然语言描述UI组件来创建UI组件
  • 多IDE支持:
  • 现代组件库：访问大量预构建、可定制的组件，灵感来自 5月21日
  • 实时预览：在创建组件时立即看到它们
  • TypeScript支持：完全支持TypeScript进行类型安全开发
  • SVGL集成：获取大量专业品牌资产和徽标
  • 组件增强：使用高级功能和动画改进现有组件（即将推出）

🎯 运作原理

  1. 告诉代理人你需要什么

    • 在AI Agent的聊天中，只需键入 /ui 并描述您要查找的组件
    • 例子： /ui create a modern navigation bar with responsive design

  2. 让魔法创造它

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

  3. 无缝集成

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

🚀 入门指南

先决条件

  • Node.js（推荐最新LTS版本）
  • 支持的IDE之一：
    • 光标
    • 帆板运动
    • VSCode（带Cline扩展）

安装

  1. 生成API密钥

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

  2. IDE设置

光标IDE

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

帆板运动

增添 ~/.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"
      }
    }
  }
}

❓ 常见问题解答

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

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

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

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

如果我的世代用完了怎么办？

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

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

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

组件复杂性有限制吗？

Magic AI Agent可以处理不同复杂度的组件，从简单的按钮到复杂的交互形式。然而，为了获得最佳效果，我们建议将非常复杂的UI分解为更小、可管理的组件。

🛠️ 发展

项目结构

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

关键组件

  • IdeInstructions：不同IDE的设置说明
  • ApiKeySection：API密钥管理接口
  • WelcomeOnboarding：新用户的入职流程

🤝 贡献

我们欢迎捐款！请加入我们 不和谐社区 并提供反馈以帮助改进Magic Agent。源代码可在 GitHub.

👥 社区与支持

⚠️ Beta通知

Magic Agent目前处于测试阶段。在此期间，所有功能均免费。我们感谢您的反馈和耐心，因为我们将继续改进平台。

📝 许可证

MIT许可证

🙏 致谢

  • 感谢我们的beta测试人员和社区成员
  • 特别感谢Cursor、Windsurf和Cline团队的合作
  • 与集成 5月21日 获取组件灵感
  • 硅谷集团光刻系统公司 用于徽标和品牌资产整合

如需更多信息，请加入我们的 不和谐社区 或访问 21日/月.

相关 MCP