magic-mcp | 通往MCP之路

21st.dev Magic AI Agent

Magic Component Platform (MCP) 是一款强大的 AI 驱动工具，帮助开发者通过自然语言描述快速创建美观、现代的 UI 组件。它能够无缝集成到流行的 IDE 中，并为 UI 开发提供高效的工作流。

🌟 功能特性

AI 驱动的 UI 生成：通过自然语言描述创建 UI 组件

多 IDE 支持：

Cursor IDE 集成
Windsurf 支持
VSCode 支持
VSCode + Cline 集成（Beta 版）

现代组件库：访问大量预构建、可自定义的组件，灵感源自 21st.dev

实时预览：在创建组件时即时查看效果

TypeScript 支持：全面支持 TypeScript，确保类型安全开发

SVGL 集成：访问大量专业的品牌资产和 Logo

组件增强：通过高级功能和动画改进现有组件（即将推出）

🎯 工作原理

告诉 Agent 你的需求

在 AI Agent 的聊天框中输入 /ui 并描述你需要的组件

示例：/ui create a modern navigation bar with responsive design

让 Magic 创建组件

你的 IDE 会提示你使用 Magic

Magic 会立即生成一个精美的 UI 组件

组件灵感源自 21st.dev 的组件库

无缝集成

组件会自动添加到你的项目中

立即开始使用你的新 UI 组件

所有组件均可完全自定义

🚀 快速开始

环境要求

Node.js（推荐使用最新的 LTS 版本）

支持的 IDE 之一：

Cursor
Windsurf
VSCode（需安装 Cline 扩展）

安装步骤

生成 API Key

访问 21st.dev Magic Console

生成一个新的 API Key

选择安装方式

方法 1：CLI 安装（推荐）

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

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

方法 2：手动配置

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

配置文件位置：

Cursor: ~/.cursor/mcp.json

Windsurf: ~/.codeium/windsurf/mcp_config.json

Cline: ~/.cline/mcp_config.json

Claude: ~/.claude/mcp_config.json

方法 3：VS Code 安装

点击以下按钮一键安装：

View on Smithery View on Smithery

手动 VS Code 配置

首先，点击上方的一键安装按钮。如需手动设置：

将以下 JSON 块添加到 VS Code 的用户设置（JSON）文件中。你可以通过按下 Ctrl + Shift + P 并输入 Preferences: Open User Settings (JSON) 来打开该文件：

你也可以选择将其添加到工作区的 .vscode/mcp.json 文件中：

❓ 常见问题

Magic AI Agent 如何处理我的代码库？

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

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

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

如果我用完生成次数会怎样？

如果你超出每月的生成限制，系统会提示你升级计划。你可以随时升级以继续生成组件。现有的组件仍将完全正常运行。

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

作者可以随时将组件发布到 21st.dev，Magic Agent 将立即访问这些组件。这意味着你将始终能够访问社区提供的最新组件和设计模式。

组件的复杂度有限制吗？

Magic AI Agent 可以处理不同复杂度的组件，从简单的按钮到复杂的交互式表单。然而，为了获得最佳效果，我们建议将非常复杂的 UI 拆分为更小、更易管理的组件。

🛠️ 开发

项目结构

关键组件

IdeInstructions：不同 IDE 的设置说明

ApiKeySection：API Key 管理界面

WelcomeOnboarding：新用户的引导流程

🤝 贡献

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

👥 社区与支持

Discord 社区 - 加入我们的活跃社区

Twitter - 关注我们以获取最新动态

⚠️ Beta 版通知

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

📝 许可证

MIT 许可证

🙏 致谢

感谢我们的 Beta 测试者和社区成员

特别感谢 Cursor、Windsurf 和 Cline 团队的合作

与 21st.dev 的集成，提供组件灵感

SVGL 的 Logo 和品牌资产集成

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