@magicuidesign/mcp

Official ModelContextProtocol (MCP) server for Magic UI.

Install MCP configuration

npx @magicuidesign/cli@latest install <client>

Supported Clients

• [x] cursor
• [x] windsurf
• [x] claude
• [x] cline
• [x] roo-cline

Manual Installation

Add to your IDE's MCP config:

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

Example Usage

Once configured, you can questions like:

"Make a marquee of logos"

"Add a blur fade text animation"

"Add a grid background"

Available Tools

The server provides the following tools callable via MCP:

• getUIComponents: Provides a comprehensive list of all Magic UI components.
• getComponents: Provides implementation details for core components (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: Provides implementation details for device mock components (safari, iphone-15-pro, android).
• getSpecialEffects: Provides implementation details for special effect components (animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal).
• getAnimations: Provides implementation details for animation components (blur-fade).
• getTextAnimations: Provides implementation details for text animation components (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: Provides implementation details for button components (rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button).
• getBackgrounds: Provides implementation details for background components (warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple, dot-pattern, grid-pattern, interactive-grid-pattern).

MCP Limitations

Some clients have a limit on the number of tools they can call. This is why we opted to group the tools into categories.

Credits

Big thanks to @beaubhp for creating the MCP server 🙏

License

Licensed under the MIT license.