@magicuidesign/mcp

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

此服务器使 AI 助手（如 Cursor）能够访问有关 Magic UI 组件的信息，包括可用组件的列表及其实现细节。

特性

• 获取所有可用的 Magic UI 组件的列表。
• 检索各种类别（核心、特效、动画、文本、按钮、背景、设备模型）中特定组件的实现细节和代码示例。

使用 Cursor (或 Claude Desktop) 进行设置

1. 安装 Cursor: 确保您已安装 Cursor IDE。
2. 配置 Cursor 的 MCP: 您需要告诉 Cursor 如何运行您的 MCP 服务器。
   • 找到或创建 MCP 配置文件。 在 macOS/Linux 上，这通常位于 ~/.cursor/mcp.json。 在 Windows 上，它可能是 %USERPROFILE%\.cursor\mcp.json。
   • 编辑 mcp.json 文件。
     • 如果文件不存在或为空: 使用以下内容创建它：

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

     • 如果文件存在并且有其他服务器: 将 magicui-mcp 块添加到现有的 mcpServers 对象中：

       {
         "mcpServers": {
           // ... 这里可能存在其他服务器 ...
           "magicui-mcp": {
             "command": "npx",
             "args": [
               "-y",
               "@magicuidesign/mcp"
             ]
           }
         }
       }
       

3. 重启 Cursor: 关闭并重新打开 Cursor 以应用更改。
4. 验证: 查找 Magic UI 工具（如 getUIComponents、getComponents 等）是否在 Cursor 的 AI 聊天界面或 MCP 状态指示器中可用。

注意: 此设置依赖于 npx 成功从 npm 获取并运行 @magicuidesign/mcp 的最新发布版本*。 确保您已发布一个版本，该版本在主脚本 (dist/server.js) 中包含 #!/usr/bin/env node shebang，并且具有所有必要的依赖项。*

在 Cursor 中的使用示例

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

"使用 getUIComponents 工具列出所有 Magic UI 组件。"

"使用 getComponents 工具显示 Magic UI Marquee 组件的实现细节。"

"从 Magic UI 获取霓虹渐变卡片效果的代码。"

开发设置

使用 Inspector 运行

对于开发和调试，您可以使用 MCP Inspector 工具：

npx @modelcontextprotocol/inspector npx -y @magicuidesign/mcp

访问 Inspector 文档 了解更多详情。

本地开发

1. 克隆存储库:

   git clone magicuidesign/mcp
   cd mcp # 或您的项目目录名称
   

2. 安装依赖项:

   npm install
   

3. 构建项目: (将 TypeScript 编译为 dist/ 中的 JavaScript)

   npm run build
   

4. 对于具有自动重建功能的开发: (需要在 package.json 中设置 tsc-watch 或类似设置)

   npm run watch # 或: tsc -w
   

   (如果您的 package.json 中不存在 watch 脚本，您可能需要添加一个："watch": "tsc -w")

可用工具

服务器提供以下可通过 MCP 调用的工具：

• getUIComponents: 提供所有 Magic UI 组件的综合列表。
• getComponents: 提供核心组件的实现细节 (marquee, terminal, hero-video-dialog, bento-grid, animated-list, dock, globe, tweet-card, client-tweet-card, orbiting-circles, avatar-circles, icon-cloud, animated-circular-progress-bar, file-tree, code-comparison, script-copy-btn, scroll-progress, lens, pointer).
• getDeviceMocks: 提供设备模型组件的实现细节 (safari, iphone-15-pro, android).
• getSpecialEffects: 提供特效组件的实现细节 (animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal).
• getAnimations: 提供动画组件的实现细节 (blur-fade).
• getTextAnimations: 提供文本动画组件的实现细节 (text-animate, line-shadow-text, aurora-text, number-ticker, animated-shiny-text, animated-gradient-text, text-reveal, hyper-text, word-rotate, typing-animation, scroll-based-velocity, flip-text, box-reveal, sparkles-text, morphing-text, spinning-text).
• getButtons: 提供按钮组件的实现细节 (rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button).
• getBackgrounds: 提供背景组件的实现细节 (warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple, dot-pattern, grid-pattern, interactive-grid-pattern).

安装 (作为依赖项)

虽然主要用作通过 npx 运行的独立 MCP 服务器，但如果需要，您也可以将其安装为依赖项：

npm install @magicuidesign/mcp

ISC