Magicuidesign

You can run the Magic UI MCP server to expose a set of component and layout tools via MCP, enabling you to query and compose Magic UI elements directly from your development environment. This server acts as a centralized gateway for interacting with Magic UI capabilities through standardized MCP calls.

How to use

To use the MCP server, configure your MCP client to connect to the server and then invoke the provided tools to explore components, layouts, media, motion effects, text effects, widgets, backgrounds, and devices. You can request lists of UI components, layouts, media elements, and other building blocks, then compose scenes or interfaces by combining these tools and their outputs. The integration supports practical tasks like generating marquees, applying blur and fade text animations, and designing grid backgrounds by calling the appropriate tool endpoints.

How to install

Prerequisites: ensure you have Node.js and npm installed on your development machine.

1. Install the MCP client helper for your chosen target client.

npx @magicuidesign/cli@latest install <client>

Where <client> is one of the supported clients, such as cursor, windsurf, claude, cline, or roo-cline. After running the install command, you will obtain an MCP-enabled setup for your specific client.

2. Add the MCP server configuration to your IDE or editor’s MCP configuration. You can use the example below to connect to the Magic UI MCP server.

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

Additional setup notes

Once the MCP server is configured, you can start asking questions and issuing commands through your MCP client, such as requesting a marquee of logos, applying a blur fade text animation, or generating a grid background.

Configuration example

The following is the manual installation snippet you can place in your IDE configuration to run the MCP server locally.

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

Available tools

getUIComponents

Returns a comprehensive list of all Magic UI components.

getLayout

Provides implementation details for bento-grid, dock, file-tree, grid-pattern, interactive-grid-pattern, dot-pattern.

getMedia

Provides implementation details for hero-video-dialog, terminal, marquee, script-copy-btn, code-comparison.

getMotion

Provides implementation details for blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, animated-circular-progress-bar.

getTextReveal

Provides implementation details for text-animate, line-shadow-text, aurora-text, animated-shiny-text, animated-gradient-text, text-reveal, typing-animation, box-reveal, number-ticker.

getTextEffects

Provides implementation details for word-rotate, flip-text, hyper-text, morphing-text, spinning-text, sparkles-text.

getButtons

Provides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button.

getEffects

Provides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal.

getWidgets

Provides implementation details for animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, globe.

getBackgrounds

Provides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple.

getDevices

Provides implementation details for safari, iphone-15-pro, android.