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

🤝 贡献

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

👥 社区与支持

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

⚠️ 重要提示

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

📄 许可证

本项目采用MIT许可证。

🙏 致谢

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

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