Magic MCP

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

Magic Component Platform (MCP) 是一款强大的AI驱动工具，能助力开发者借助自然语言描述，快速打造出现代化且美观的UI组件。它可与流行的IDE无缝集成，为UI开发提供流畅的工作流程。

🚀 快速开始

Magic Component Platform (MCP) 借助先进的AI技术，让开发者只需用自然语言描述需求，就能快速创建UI组件。它与多种流行IDE集成，提供丰富的组件库和实时预览功能，极大地提升了UI开发的效率和质量。

✨ 主要特性

• AI驱动的UI生成：通过自然语言描述即可创建UI组件。
• 多IDE支持：
  • 集成 Cursor IDE。
  • 支持 Windsurf。
  • 集成 VSCode + Cline（Beta版本）。
• 现代组件库：可访问源自21st.dev的庞大预建可自定义组件库。
• 实时预览：能即时查看所创建的组件。
• TypeScript支持：全面支持TypeScript，实现类型安全开发。
• SVGL集成：可获取庞大专业的品牌资产和Logo库。
• 组件增强：即将推出为现有组件添加高级功能和动画的功能。

🎯 工作流程

1. 告诉代理你的需求
   • 在AI代理的聊天中，输入/ui并描述所需组件。
   • 示例：输入“创建一个带有搜索栏和结果列表的网页”以生成相应代码。
2. 获取实时反馈：可在IDE中直接收到关于代码结构和最佳实践的建议。
3. 简化开发流程：通过AI自动生成重复性代码，如表单验证、事件处理和状态管理。

📦 安装指南

先决条件

• Node.js（版本12及以上）
• npm或yarn
• 安装支持的IDE（如VSCode, IntelliJ IDEA）

安装方法

方法一：使用CLI工具

1. 通过npm安装Magic CLI：

npm install -g magic-cli

2. 在项目目录中初始化Magic项目：

magic init

3. 按照提示完成配置，选择所需的IDE和插件。

方法二：手动配置

1. 下载并解压压缩包。
2. 配置环境变量（可选）。
3. 手动安装所需依赖库。

🤑 常见问题解答

• Q：Magic Agent如何处理我的代码？ A：它通过分析项目结构和代码上下文，在IDE中提供实时反馈和建议，而不会直接修改你的文件。
• Q：我可以自定义生成的组件吗？ A：当然可以！生成的组件使用标准HTML、CSS和JavaScript，你可以根据需要进行任何修改。
• Q：是否有使用限制？ A：目前处于Beta阶段，所有功能都是免费使用的。我们将持续改进平台。

🛠️ 开发信息

项目结构

src/
├── components/    # 存放自定义组件
│   └── Button.vue
├── pages/        # 存放页面组件
│   └── Home.vue
└── App.vue       # 主应用文件

关键组件

• WelcomeOnboarding：新用户引导流程。
• MagicExtension：核心功能扩展模块。
• ComponentGenerator：生成组件的主逻辑。

🤝 贡献指南

我们欢迎任何贡献！请加入我们的Discord社区，提供反馈并帮助改进Magic Agent。源代码托管在GitHub。

⚡ 社区与支持

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

⚠️ 重要提示

⚠️ 重要提示

Magic Agent目前处于Beta阶段。在此期间所有功能免费使用。感谢你的反馈和理解，我们将持续优化平台。

📄 许可证

本项目采用MIT许可证。

🙏 致谢

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

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