智能组件生成器

21st.dev 魔法 AI 代理

MCP Banner

魔法组件平台 (MCP) 是一款强大的 AI 驱动工具，可帮助开发者通过自然语言描述立即创建精美、现代化的 UI 组件。它与流行的 IDE 无缝集成，并为 UI 开发提供简化的工作流程。

🌟 功能特性

AI 驱动的 UI 生成: 通过自然语言描述创建 UI 组件
多 IDE 支持:
- Cursor IDE 集成
- Windsurf 支持
- VSCode 支持
- VSCode + Cline 集成 (测试版)
现代组件库: 访问大量来自 21st.dev 的预构建、可定制组件
实时预览: 创建组件时立即查看
TypeScript 支持: 完全支持 TypeScript，确保类型安全开发
SVGL 集成: 访问大量专业的品牌资产和 logo
组件增强: 使用高级功能和动画改进现有组件 (即将推出)

🎯 使用方法

告诉代理你需要什么
- 在你的 AI 代理聊天中，只需输入 /ui 并描述你正在寻找的组件
- 例如：/ui create a modern navigation bar with responsive design
让魔法创造它
- 你的 IDE 会提示你使用 Magic
- Magic 会立即构建一个精致的 UI 组件
- 组件的设计灵感来自 21st.dev 的组件库
无缝集成
- 组件会自动添加到您的项目中
- 立即开始使用您的新 UI 组件
- 所有组件都可完全自定义

🚀 快速上手

前提条件

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

安装

生成 API 密钥
- 访问 21st.dev Magic 控制台
- 生成一个新的 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

首先，查看上面的“一键安装”按钮。如需手动配置：

在 VS Code 的用户设置 (JSON) 文件中添加以下 JSON 代码块。您可以按 Ctrl + Shift + P 并输入 Preferences: Open User Settings (JSON) 来实现：

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic 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 Magic API 密钥",
      "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/     # 核心 UI 组件
├── types/             # TypeScript 类型定义
├── lib/              # 工具函数
└── public/           # 静态资源

关键组件

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

🤝 贡献

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

👥 社区与支持

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

⚠️ Beta 版公告

Magic Agent 目前处于 Beta 测试阶段。在此期间，所有功能均免费使用。感谢您的反馈和耐心等待，我们将持续改进平台。

📝 许可证

MIT 许可证

🙏 感谢

感谢所有 Beta 测试人员和社区成员
特别感谢 Cursor、Windsurf 和 Cline 团队的合作
感谢 21st.dev 提供组件设计灵感
感谢 SVGL 提供 Logo 和品牌资产整合

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