Magic (21st.dev UI Generator)

🚀 21世纪魔法人工智能代理

Magic Component Platform（MCP）是一款强大的AI驱动工具，可助力开发者通过自然语言描述，快速生成美观的现代UI组件。它能与流行的IDE无缝集成，为开发者提供流畅的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的源代码管理中：

{
  "apiKeys": {
    "21st.dev": "your-api-key"
  }
}

✨ 主要特性

• 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组件。
   • 所有组件均可完全自定义。

⚠️ 重要提示

⚠️ 重要提示

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

🤝 贡献

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

👥 社区与支持

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

📄 许可证

本项目采用MIT许可证。

🙏 致谢

• 感谢我们的Beta测试人员和社区成员。
• 特别感谢Cursor、Windsurf和Cline团队的合作。
• 感谢与21st.dev的集成，为我们提供组件灵感。
• 感谢SVGL的品牌资产整合。

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