21st.dev魔法AI代理
Magic Component Platform（MCP）是一个强大的AI驱动工具，可帮助开发人员通过自然语言描述即时创建美观、现代的UI组件。它与流行的IDE无缝集成，并为UI开发提供了简化的工作流程。
🌟 特性
- AI驱动的UI生成：通过用自然语言描述UI组件来创建UI组件
- 多IDE支持:
- 光标 IDE集成 - 帆板运动 支持 - VSCode 支持 - VSCode+Cline 集成（测试版）
- 现代组件库：访问大量预构建、可定制的组件，灵感来自 5月21日
- 实时预览：在创建组件时立即看到它们
- TypeScript支持：完全支持TypeScript进行类型安全开发
- SVGL集成：获取大量专业品牌资产和徽标
- 组件增强：使用高级功能和动画改进现有组件（即将推出）
🎯 运作原理
- 告诉代理人你需要什么
- 在AI Agent的聊天中，只需键入 /ui 并描述您要查找的组件 - 例子： /ui create a modern navigation bar with responsive design
- 让魔法创造它
- IDE提示您使用Magic - Magic立即构建了一个精美的UI组件 - 组件的灵感来自21st.dev的库
- 无缝集成
- 组件会自动添加到项目中 - 立即开始使用新的UI组件 - 所有组件均可完全定制
🚀 入门指南
先决条件
- Node.js（推荐最新LTS版本）
- 支持的IDE之一：
- 光标 - 帆板运动 - VSCode（带Cline扩展）
安装
- 生成API密钥
- 访问 21st.dev魔术控制台 - 生成新的API密钥
- 选择安装方式
方法1:CLI安装（推荐）
为IDE安装和配置MCP的一个命令：
npx @21st-dev/cli@latest install --api-key 支持的客户端：游标、风帆、cline、claude
方法2：手动配置
如果您更喜欢手动设置，请将此添加到IDE的MCP配置文件中：
{
"mcpServers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
}
}
}配置文件位置：
- 光标：
~/.cursor/mcp.json - 风浪：
~/.codeium/windsurf/mcp_config.json - 克莱恩：
~/.cline/mcp_config.json - 克劳德：
~/.claude/mcp_config.json
方法3:VS代码安装
对于一键安装，请单击下面的安装按钮之一：
手动VS代码设置
首先，检查上面的安装按钮进行一键安装。对于手动设置：
将以下JSON块添加到VS Code中的用户设置（JSON）文件中。您可以按 Ctrl + Shift + P 和打字 Preferences: Open User Settings (JSON):
{
"mcp": {
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}
}您可以选择将其添加到名为的文件中 .vscode/mcp.json 在您的工作空间中：
{
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}❓ 常见问题解答
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。源代码可在 .
👥 社区与支持
⚠️ Beta通知
Magic Agent目前处于测试阶段。在此期间，所有功能均免费。我们感谢您的反馈和耐心，因为我们将继续改进平台。
📝 许可证
MIT许可证
🙏 致谢
- 感谢我们的beta测试人员和社区成员
- 特别感谢Cursor、Windsurf和Cline团队的合作
- 与集成 5月21日 获取组件灵感
- 硅谷集团光刻系统公司 用于徽标和品牌资产整合
______________________________________________________________________
