使用说明

项目简介

Magic MCP (Magic Component Platform) 是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在通过自然语言描述快速生成美观的现代UI组件。它无缝集成到各种集成开发环境 (IDE) 中，为开发者提供高效的UI开发工作流程。作为一个MCP服务器，它主要提供UI组件生成和Logo搜索的功能，并通过标准的MCP协议与客户端（如IDE插件或AI Agent）进行通信。

主要功能点

AI驱动的UI组件生成: 通过自然语言描述创建UI组件，例如按钮、导航栏、表单等。
Logo搜索: 支持搜索并获取各种品牌和公司的Logo，并提供多种格式（JSX, TSX, SVG）方便在代码中使用。
多IDE集成: 支持 Cursor, Windsurf, VSCode (通过 Cline 插件) 等多种IDE，方便开发者在熟悉的环境中使用。
组件库: 内置灵感来源于 21st.dev 的组件库，提供丰富的预制组件。
实时预览: 在IDE中即时预览生成的UI组件效果。

安装步骤

安装 Node.js: 确保你的开发环境已安装 Node.js (推荐最新 LTS 版本)。
生成 API Key: 访问 Magic dashboard 并生成 API Key，用于服务器鉴权。
选择 IDE 并配置 MCP 服务器: 根据你使用的 IDE 选择相应的配置方式。以下以 Cursor IDE 为例，其他 IDE 的配置方式请参考仓库 README。

Cursor IDE 配置

打开 Cursor IDE，按照以下步骤配置 Magic MCP 服务器：

a. 复制启动命令: 复制以下命令，替换 'your-api-key' 为你刚刚生成的 API Key。

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

b. 配置 MCP 客户端: 在 Cursor IDE 的 MCP 客户端配置中，添加一个新的 MCP 服务器配置。

服务器名称 (serverName): 例如 'magic'
启动命令 (command): 'npx'
命令参数 (args): 请使用以下 JSON 格式 的参数，并替换 'your-api-key' 为你自己的 API Key。

[
  "-y",
  "@smithery/cli@latest",
  "run",
  "@21st-dev/magic-mcp",
  "--config",
  "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"
]

环境变量 (env): 如果 MCP 客户端支持环境变量配置，请确保 'TWENTY_FIRST_API_KEY' 环境变量被正确传递（通常在 'args' 中已经配置，此处可以忽略，除非客户端有单独的环境变量配置选项）。

注意: 其他 IDE (Windsurf, VSCode + Cline) 的配置方法请参考仓库 README.md 文件中的 "IDE Setup" 部分，根据相应的说明进行配置。核心是配置 MCP 客户端连接到 Magic MCP 服务器所需的启动命令和 API Key。

基本使用方法

成功配置 MCP 服务器后，你可以在支持 MCP 协议的客户端（例如配置好的 IDE 或 AI Agent）中使用以下功能：

UI 组件生成: 在 IDE 的 AI Agent 聊天窗口中，输入 '/ui' 命令，并描述你想要的UI组件。例如：
```
/ui create a modern navigation bar with responsive design
```
Magic MCP 服务器会根据你的描述生成相应的 UI 组件代码片段，并返回给客户端。客户端（例如 IDE 插件）会将代码集成到你的项目中。
Logo 搜索: 使用 '/logo' 命令搜索 Logo。例如：
```
/logo GitHub
```
或者
```
/logo discord slack typescript format:JSX
```
服务器会返回搜索到的 Logo (例如 GitHub 的 Logo) 的代码 (例如 JSX 格式)，你可以将其添加到你的项目中。可以通过 'format:' 参数指定需要的代码格式 (JSX, TSX, SVG)。

更多详细用法和高级功能，请参考 21st.dev/magic 或加入 Discord 社区获取帮助。

关键词