21世纪魔法人工智能代理

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

🚀 入门指南

erequisites

• 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"
  }
}

🤝 贡献

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

👥 社区与支持

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

⚠️ Beta公告

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

📝 许可证

MIT许可证

🙏 致谢

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

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