每天了解几个MCP SERVER：21st.dev Magic

IT 行者2026-03-12 15:45

每天了解几个MCP SERVER：21st.dev Magic

来源: https://github.com/21st-dev/magic-mcp

简介

21st.dev Magic 是一个 AI 驱动的 UI 组件生成工具，被称为"IDE 中的 v0"。它可以通过自然语言描述，帮助开发者快速创建漂亮的现代 UI 组件。

能做什么

AI 驱动的 UI 生成：用自然语言描述你想要的组件，AI 瞬间生成
多 IDE 支持：Cursor、Windsurf、VSCode + Cline、Claude Desktop
21st.dev 组件库：访问大量预构建的可定制组件
实时预览：创建组件时即时查看效果
TypeScript 支持：完整的类型安全开发支持
SVGL 集成：获取专业品牌资源和 Logo

怎么安装

1. 获取 API Key

访问 21st.dev Magic Console 生成 API Key

2. 一键安装

bash 复制代码

npx @21st-dev/cli@latest install cursor --api-key YOUR_API_KEY

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

3. 手动配置

在 IDE 的 MCP 配置文件中添加：

json 复制代码

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "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

适用场景

快速原型开发
需要现代化 UI 组件时
前端开发效率提升
不知道如何实现某个 UI 效果时

使用方法

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

复制代码

/ui create a modern navigation bar with responsive design

Magic 会立即生成一个精美的 UI 组件，并自动添加到你的项目中。

注意事项

需要 API Key（有免费额度）
生成的组件完全可编辑
目前处于 Beta 阶段，所有功能免费
Agent 只会修改与生成组件相关的文件，不会影响项目其他部分

相关链接：

GitHub：https://github.com/21st-dev/magic-mcp
官网：https://21st.dev/magic
Discord：https://discord.gg/Qx4rFunHfm