21st.dev 魔法 AI 代理

Magic Component Platform (MCP) 是一个强大的 AI 驱动工具，帮助开发者通过自然语言描述即时创建美观的现代 UI 组件。它无缝集成到流行的 IDE 中，并提供了一个简洁的 UI 开发工作流程。

🌟 功能

• AI 驱动的 UI 生成：通过自然语言描述创建 UI 组件
• 多 IDE 支持：
  • Cursor IDE 集成
  • Windsurf 支持
  • VSCode 支持
  • VSCode + Cline 集成（测试版）
• 现代组件库：访问由 21st.dev 启发的大量预构建可定制组件
• 实时预览：即时查看正在创建的组件
• TypeScript 支持：完整的 TypeScript 支持以实现类型安全开发
• SVGL 集成：访问大量的专业品牌资产和徽标
• 组件增强：通过高级特性和动画改进现有组件（即将推出）

🎯 工作原理

1. 告诉代理你需要什么

   • 在你的 AI 代理聊天中，只需键入 /ui 并描述所需的组件
   • 示例：/ui 创建一个具有响应式设计的现代导航栏

2. 让魔法创造它

   • 你的 IDE 提示你使用魔法
   • 魔法立即构建出一个精美的 UI 组件
   • 组件灵感来自 21st.dev 的库

3. 无缝集成

   • 组件自动添加到你的项目中
   • 立即开始使用新的 UI 组件
   • 所有组件都是完全可定制的

🚀 快速入门

先决条件

• Node.js（推荐最新 LTS 版本）
• 支持的 IDE 之一：
  • Cursor
  • Windsurf
  • VSCode（带有 Cline 扩展）

安装

1. 生成 API 密钥

   • 访问 21st.dev 魔法控制台
   • 生成一个新的 API 密钥

2. 选择安装方法

方法 1：CLI 安装（推荐）

一条命令即可安装并配置 MCP 用于你的 IDE：

npx @21st-dev/cli@latest install <client> --api-key <key>

支持的客户端：cursor, windsurf, cline, claude

方法 2：手动配置

如果你更喜欢手动设置，请在 IDE 的 MCP 配置文件中添加以下内容：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

配置文件位置：

• Cursor: ~/.cursor/mcp.json
• Windsurf: ~/.codeium/windsurf/mcp_config.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

方法 3：VS Code 安装

对于一键安装，请点击下面的安装按钮之一：

手动 VS Code 设置

首先，检查上面的一键安装按钮。对于手动设置：

在 VS Code 的用户设置（JSON）文件中添加以下 JSON 块。你可以通过按 Ctrl + Shift + P 并键入 Preferences: Open User Settings (JSON) 来完成此操作：

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev 魔法 API 密钥",
        "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 魔法 API 密钥",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ 常见问题

魔法 AI 代理如何处理我的代码库？

魔法 AI 代理仅编写或修改与其生成的组件相关的文件。它遵循你的项目的代码风格和结构，并与现有的代码库无缝集成，不会影响应用程序的其他部分。

我可以自定义生成的组件吗？

可以！所有生成的组件都是完全可编辑的，并且具有良好的结构化代码。你可以像修改代码库中的任何其他 React 组件一样修改样式、功能和行为。

如果我用完了生成次数怎么办？

如果你超过了每月的生成限制，系统会提示你升级计划。你可以在任何时候升级以继续生成组件。已有的组件将继续正常运行。

新组件多久会被添加到 21st.dev 的库中？

作者可以在任何时候将组件发布到 21st.dev，而魔法代理将立即获得访问权限。这意味着你将始终能够访问社区提供的最新组件和设计模式。

组件复杂度有限制吗？

魔法 AI 代理可以处理各种复杂度的组件，从简单的按钮到复杂的交互表单。然而，为了获得最佳效果，我们建议将非常复杂的 UI 分解成较小的、易于管理的组件。

🛠️ 开发

项目结构

mcp/
├── app/
│   └── components/     # 核心 UI 组件
├── types/             # TypeScript 类型定义
├── lib/              # 实用函数
└── public/           # 静态资源

关键组件

• IdeInstructions：不同 IDE 的设置说明
• ApiKeySection：API 密钥管理界面
• WelcomeOnboarding：新用户的引导流程

🤝 贡献

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

👥 社区和支持

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

⚠️ 测试版通知

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

📝 许可证

MIT 许可证

🙏 致谢

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

---

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