21st.dev 魔法 AI 代理

MCP Banner

魔法组件平台 (MCP) 是一款强大的 AI 驱动工具，通过自然语言描述帮助开发者即时创建美观、现代的 UI 组件。它可无缝集成到主流 IDE 中，并提供流畅的 UI 开发工作流。

🌟 功能

AI 驱动 UI 生成：通过自然语言描述创建 UI 组件
多 IDE 支持：
- Cursor IDE 集成
- Windsurf 支持
- VSCode 支持
- VSCode + Cline 集成（Beta 版）
现代组件库：访问 21st.dev 灵感的海量预制可定制组件
实时预览：创建组件时即时查看效果
TypeScript 支持：完整 TypeScript 支持实现类型安全开发
SVGL 集成：访问海量专业品牌资产和标志
组件增强：通过高级功能和动画优化现有组件（即将推出）

🎯 工作原理

告知代理您的需求
- 在 AI 代理聊天中，只需输入 /ui 并描述您想要的组件
- 示例：/ui 创建一个具有响应式设计的现代导航栏
让魔法为您创建
- 您的 IDE 会提示您使用 Magic
- Magic 即时构建精美的 UI 组件
- 组件灵感来自 21st.dev 的库
无缝集成
- 组件自动添加到您的项目中
- 立即开始使用新的 UI 组件
- 所有组件均可完全定制

🚀 快速入门

前置条件

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

安装

生成 API 密钥
- 访问 21st.dev 魔法控制台
- 生成新的 API 密钥
选择安装方式

方法 1：CLI 安装（推荐）

一条命令即可安装和配置 IDE 的 MCP：

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 手动设置

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

将以下 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 代理如何处理我的代码库？

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

我可以定制生成的组件吗？

当然！所有生成的组件均可完全编辑，并附带结构良好的代码。您可以像代码库中的其他 React 组件一样修改其样式、功能和行为。

如果我超出生成次数限制会怎样？

如果您超出月度生成限制，系统会提示您升级计划。您可以随时升级以继续生成组件。您现有的组件将保持完全功能。

新组件何时会添加到 21st.dev 的库中？

作者可以随时将组件发布到 21st.dev，Magic 代理将立即获得访问权限。这意味着您将始终能够访问来自社区的最新组件和设计模式。

组件复杂度是否有上限？

Magic AI 代理可以处理从简单按钮到复杂交互表单的组件，但为了最佳效果，我们建议将非常复杂的 UI 分解为更小的可管理组件。

🛠️ 开发

项目结构

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

关键组件

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

🤝 贡献

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

👥 社区与支持

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

⚠️ Beta 版通知

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

📝 许可证

MIT 许可证

🙏 致谢

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

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

21st-dev/magic-mcp

星标增长

证据时间轴