@magicuidesign/mcp

Magic UI 的官方 ModelContextProtocol (MCP) 服务器。

<div align="center"> <img src="https://github.com/magicuidesign/mcp/blob/main/public/mcp.png" alt="MCP" /> </div>

安装 MCP 配置

npx @magicuidesign/cli@latest install <client>

支持的客户端

• cursor
• windsurf
• claude
• cline
• roo-cline

手动安装

添加到您的 IDE 的 MCP 配置中：

{
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

示例用法

配置完成后，您可以提出如下问题：

"制作一个标志滚动条"

"添加模糊淡出文本动画"

"添加网格背景"

可用工具

该服务器通过 MCP 提供以下工具：

工具名称	描述
getUIComponents	提供所有 Magic UI 组件的综合列表。
getLayout	提供 bento-grid，dock，file-tree，grid-pattern，interactive-grid-pattern，dot-pattern 组件的实现细节。
getMedia	提供 hero-video-dialog，terminal，marquee，script-copy-btn，code-comparison 组件的实现细节。
getMotion	提供 blur-fade，scroll-progress，scroll-based-velocity，orbiting-circles，animated-circular-progress-bar 组件的实现细节。
getTextReveal	提供 text-animate，line-shadow-text，aurora-text，animated-shiny-text，animated-gradient-text，text-reveal，typing-animation，box-reveal，number-ticker 组件的实现细节。
getTextEffects	提供 word-rotate，flip-text，hyper-text，morphing-text，spinning-text，sparkles-text 组件的实现细节。
getButtons	提供 rainbow-button，shimmer-button，shiny-button，interactive-hover-button，animated-subscribe-button，pulsating-button，ripple-button 组件的实现细节。
getEffects	提供 animated-beam，border-beam，shine-border，magic-card，meteors，neon-gradient-card，confetti，particles，cool-mode，scratch-to-reveal 组件的实现细节。
getWidgets	提供 animated-list，tweet-card，client-tweet-card，lens，pointer，avatar-circles，icon-cloud，globe 组件的实现细节。
getBackgrounds	提供 warp-background，flickering-grid，animated-grid-pattern，retro-grid，ripple 组件的实现细节。
getDevices	提供 safari，iphone-15-pro，android 组件的实现细节。

MCP 限制

某些客户端对可以调用的工具数量有限制。这就是为什么我们将工具分组到类别中的原因。注意：为了获得每个组件的具体上下文，请在本地运行 MCP 并修改分组组件的逻辑。

致谢

特别感谢 @beaubhp 创建了 MCP 服务器 🙏

MIT