每天了解几个MCP SERVER：21st.dev Magic-171主机测评

每天了解几个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. 一键安装

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

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

3. 手动配置

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

{
"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 只会修改与生成组件相关的文件，不会影响项目其他部分

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