mcp

magicuidesign/mcp

4.2

mcp is hosted online, so all tools can be tested directly either in theInspector tabor in theOnline Client.

If you are the rightful owner of mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

Official ModelContextProtocol (MCP) server for Magic UI.

Try mcp with chat:

Server config via mcphub

Tools
8
Resources
0
Prompts
0

@magicuidesign/mcp

npm version

Official ModelContextProtocol (MCP) server for Magic UI.

Install MCP configuration

npx @magicuidesign/cli@latest install <client>

Supported Clients

  • cursor
  • windsurf
  • claude
  • cline
  • 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:

Tool NameDescription
getUIComponentsProvides a comprehensive list of all Magic UI components.
getLayoutProvides implementation details for bento-grid, dock, file-tree, grid-pattern, interactive-grid-pattern, dot-pattern components.
getMediaProvides implementation details for hero-video-dialog, terminal, marquee, script-copy-btn, code-comparison components.
getMotionProvides implementation details for blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, animated-circular-progress-bar components.
getTextRevealProvides implementation details for text-animate, line-shadow-text, aurora-text, animated-shiny-text, animated-gradient-text, text-reveal, typing-animation, box-reveal, number-ticker components.
getTextEffectsProvides implementation details for word-rotate, flip-text, hyper-text, morphing-text, spinning-text, sparkles-text components.
getButtonsProvides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button components.
getEffectsProvides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal components.
getWidgetsProvides implementation details for animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, globe components.
getBackgroundsProvides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple components.
getDevicesProvides implementation details for safari, iphone-15-pro, android components.

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. Note: For more specific context on each component, run the MCP locally and modify the logic that groups the components.

Credits

Big thanks to @beaubhp for creating the MCP server 🙏

MIT