/ 目录 / 演练场 / Magic UI MCP
● 官方 magicuidesign ⚡ 即开即用

Magic UI MCP

作者 magicuidesign · magicuidesign/mcp

Magic UI的动画组件(模糊淡入淡出、选取框、极光、闪耀)可从聊天中发现,只需一个请求即可安装到您的React/Next应用程序中。

magic-ui-mcp是Magic UI的官方MCP , Magic UI是现代登录页面上使用的动画组件库。三个工具— listRegistryItems、searchRegistryItems、getRegistryItem -让代理浏览实时Magic UI注册表,通过自然语言匹配组件,并检索安装命令+使用示例。“添加模糊淡入淡出文本动画”变为:找到组件,显示代码段,并将其复制到应用程序中。 适用于Cursor、Claude Desktop、Windsurf、Cline和Roo-Cline。

为什么要用

核心特性

实时演示

实际使用效果

magic-ui-mcp.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Magic UI MCP

将动画英雄部分添加到Next.js登录页面

👤 前端开发人员和设计师构建营销页面 ⏱ ~15 min beginner

何时使用: 您需要精美的英雄动画,不想自己浏览文档。

前置条件
  • Next.js或React项目 — npx create-next-app @ latest
  • 顺风+ shadcn/ui — Magic UI建立在这些之上;如果缺少则安装
步骤
  1. 自然而然地要求它
    在我的英雄部分为H1和CTA添加模糊淡入动画。✓ 已复制
    → Agent调用searchRegistryItems以获取“blur fade”并返回组件
  2. 安装+电线在
    安装组件并将其粘贴到app/page.tsx中,替换当前的hero。✓ 已复制
    → 安装命令运行;导入已添加;英雄已更新
  3. 调整时间
    入口较慢— H1和CTA之间延迟600毫秒。✓ 已复制
    → 道具已内联更新

结果: 无需离开编辑器,即可获得适合船舶的英雄动画。

注意事项
  • 将Magic UI与非Tailwind设置混合 — 大多数组件都采用Tailwind类;仅当您准备好进行该工作时,才移植到CSS模块
搭配使用: mcp-echarts

按类别浏览所有Magic UI组件

👤 探索图书馆的设计师 ⏱ ~10 min beginner

何时使用: 您刚刚开始设计,并希望扫描可用的内容。

步骤
  1. 按种类列出
    列出“动画”类型的所有魔术UI组件—限制30。✓ 已复制
    → listRegistryItems返回名称+标题
  2. 扩展有趣的内容
    向我展示选框、极光文本、闪亮边框的详细信息。✓ 已复制
    → 完整详细信息,包括安装+每个组件的使用情况

结果: 值得在下一页尝试的组件简短列表。

用徽标的选取框替换静态徽标行

👤 营销/登陆页面所有者 ⏱ ~10 min beginner

何时使用: 您的“信任者”行看起来过时了—滚动选取框增加了运动。

步骤
  1. 查找选取框
    使“信任者”行成为徽标的选取框。✓ 已复制
    → 客服代表挑选选框组件并进行调整
  2. 悬停暂停
    悬停时暂停选取框以实现辅助功能。✓ 已复制
    → prop/class调整;保留运动减少的用户

结果: 看起来现代并尊重运动偏好的选框行。

注意事项
  • 忽略prefers-reduced-motion — Magic UI组件通常会尊重它;除非您认识用户,否则不要覆盖

组合

与其他 MCP 搭配,撬动十倍杠杆

用于预构建组件的Magic UI ,用于自定义动画的motion.dev

对英雄使用Magic UI的模糊淡入淡出,然后对下面的自定义滚动链接视差使用motion.dev。✓ 已复制
magic-ui-mcp + figma

采用Figma设计,找到最近的Magic UI组件

这个Figma卡片部分看起来像Magic UI的便当网格。安装并填写文本。✓ 已复制

Figma到代码流+ Magic UI增强功能

将Figma转换为React ;在合理的地方,使用Magic UI组件而不是scratch组件。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
listRegistryItems kind?, query?, limit?, offset? 浏览或分页可用的组件 1 registry fetch
searchRegistryItems query + pagination 自然语言组件查找 1 registry fetch
getRegistryItem id/name 在安装之前,请查看您将获得的确切内容 1 registry fetch

成本与限制

运行它的成本

API 配额
注册表是公开获取—正常使用时没有费率问题
每次调用 Token 数
每次通话的小元数据
费用
免费
提示
将listRegistryItems与kind筛选器一起使用;不要仅仅为了浏览而获取每个项目。

安全

权限、密钥、影响范围

凭据存储: 证书
数据出站: 只读获取Magic UI注册表。在任何地方都不能写信。

故障排查

常见错误与修复

工具返回空数组

注册表可能在您的网络中被阻塞;请重试,并确认DNS到magicui.design解析。

验证: curl -I https://magicui.design/r/index.json
组件已安装,但看起来没有样式

缺少顺风配置或CSS变量—遵循Magic UI的一次性设置( globals.css + tailwind.config.ts )。

验证: Check tailwind.config.ts for magicui plugin
动画口吃

可能是重新渲染级联。记忆父组件;确认没有布局划线。

验证: Chrome DevTools Performance → Frames

替代方案

Magic UI MCP 对比其他方案

替代方案何时用它替代权衡
motion-dev-animations-skill您想要自定义运动逻辑,而不是组件库更多工作;更多控制
figma您在Figma中有要移植的现有设计不同的方向:设计→代码,而不是库优先
claude-code-design-skills您正在执行Figma到代码,而不是库采用覆盖管道的不同部分

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills