21st.dev Magic MCP Server
UI 组件生成 MCP Server，AI 可以直接搜索和使用 21st.dev 组件库中的 React 组件。提供超过 2000 个精心设计的 UI 组件，让 AI 编程助手（Cursor/Claude Code）生成更美观的前端界面。
返回 MCP 专区
开发工具官方维护推荐
21st.dev Magic
4.7k starsUI 组件生成 MCP Server，AI 可以直接搜索和使用 21st.dev 组件库中的 React 组件。提供超过 2000 个精心设计的 UI 组件，让 AI 编程助手（Cursor/Claude Code）生成更美观的前端界面。
安装与配置
安装命令
npx @21st-dev/magic@latestCursor / Claude Desktop 配置（mcp.json）
{
"mcpServers": {
"21st.dev Magic": {
"command": "npx",
"args": [
"@21st-dev/magic@latest"
]
}
}
}典型使用场景
- AI 直接创建 PR、查看 Issues、提交代码
- 自动化 CI/CD 流程，监控构建状态
- 智能 Code Review，自动标注问题
查看源码 / 官方文档
访问 GitHub 仓库获取最新文档、配置说明和 issue 反馈。
在 GitHub 上查看相关 MCP Server
FigmaFigma 官方 MCP Server，让 AI 直接读取 Figma 设计文件的组件、样式、布局信息，并可生成对应的代码。设计师和开发者可用 AI 直接问「这个设计用什么颜色？」或「帮我把这个组件转成 React 代码」。VercelVercel 官方 MCP Server，支持查询部署状态、环境变量管理、项目配置、日志查看。开发者可在 Claude 中直接问「我最新的部署有什么错误？」并获得直接答案。DockerDocker 官方 MCP Server，支持列出和管理容器、镜像、网络和数据卷，以及执行容器内命令。让 AI 成为 DevOps 运维助手，可用自然语言管理 Docker 环境，支持 Compose 项目管理。KubernetesKubernetes MCP Server，支持查询 Pod/Service/Deployment 状态、查看日志、执行 kubectl 命令。让 AI 成为 K8s 运维助手，可直接在对话中诊断集群问题、查看资源使用情况。git本地 Git 仓库操作：commit、diff、log、branch 管理，无需离开 AI 界面OpenAI (官方工具集)OpenAI 官方 Agent SDK 内置工具集，包含 Web Search、Code Interpreter、File Search 三大工具。通过 Responses API 使用，是构建 OpenAI 生态 Agent 的原生工具方案，无需额外配置 MCP。