local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Integration with Discord for accessing logo assets through the logo_search tool.
Integration with GitHub for accessing logo assets through the logo_search tool.
Requires Node.js as a runtime environment for the Magic AI Agent, supporting the component generation process.

21st.dev 魔法 AI 代理

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

🌟 功能

人工智能驱动的 UI 生成：通过自然语言描述来创建 UI 组件
多 IDE 支持：
- Cursor IDE 集成
- 风帆冲浪支持
- VSCode支持
- VSCode + Cline集成（测试版）
现代组件库：访问受21st.dev启发的大量预构建、可定制组件
实时预览：创建组件时立即查看
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 Magic Console
- 生成新的 API 密钥
选择安装方法

方法一：CLI 安装（推荐）

一个命令即可为您的 IDE 安装和配置 MCP：

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

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

方法二：手动配置

如果您更喜欢手动设置，请将其添加到您的 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 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 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 ：新用户的入职流程

🤝 贡献

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

👥 社区与支持

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

⚠️ Beta 版公告

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

📝 许可证

MIT 许可证

🙏 致谢

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

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

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Tools

一种由人工智能驱动的工具，可根据自然语言描述生成现代 UI 组件，并与流行的 IDE 集成以简化 UI 开发工作流程。

Related Resources

Reddit Discussion about this server