Use This MCP server To

Automate UI design tasks via natural language commands Integrate Magic UI features into IDEs using MCP Add animations like blur fade text or marquee logos programmatically Configure grid backgrounds and other UI elements dynamically Enable multi-client support for Magic UI interactions Streamline UI prototyping with real-time MCP server responses

README

@magicuidesign/mcp

Official ModelContextProtocol (MCP) server for Magic UI.

Install MCP configuration

npx @magicuidesign/cli@latest install <client>

Supported Clients

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 Name	Description
`getUIComponents`	Provides 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 components.
`getMedia`	Provides implementation details for hero-video-dialog, terminal, marquee, script-copy-btn, code-comparison components.
`getMotion`	Provides implementation details for blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, animated-circular-progress-bar components.
`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 components.
`getTextEffects`	Provides implementation details for word-rotate, flip-text, hyper-text, morphing-text, spinning-text, sparkles-text components.
`getButtons`	Provides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button components.
`getEffects`	Provides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal components.
`getWidgets`	Provides implementation details for animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, globe components.
`getBackgrounds`	Provides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple components.
`getDevices`	Provides 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

mcp FAQ

How do I install the Magic UI MCP server?

Use 'npx @magicuidesign/cli@latest install <client>' or add it manually to your IDE's MCP config.

Which MCP clients are supported by this server?

It supports cursor, windsurf, claude, cline, and roo-cline clients.

Can I use this MCP server to add animations to UI elements?

Yes, you can add animations like marquee logos and blur fade text via natural language commands.

How do I configure the MCP server manually?

Add the server to your IDE's MCP config with the provided JSON snippet using 'npx' and the package name.

Is this MCP server compatible with multiple LLM providers?

Yes, it works with models from Open AI, Anthropic Claude, and Google Gemini through supported clients.

What kind of UI tasks can I automate with this MCP server?

Tasks include adding grid backgrounds, animations, and other Magic UI design elements programmatically.

Does the server provide callable tools?

Yes, it exposes various tools accessible via MCP for UI design automation.