@magicuidesign/mcp

Name: magicuidesign/mcp: AI Agent Skill
Rating: 7.8 (1 reviews)
Author: magicuidesign

Official ModelContextProtocol (MCP) server for Magic UI.

MCP

Install MCP configuration

npx @magicuidesign/cli@latest install

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

Frequently Asked Questions

What is magicuidesign/mcp?

magicuidesign/mcp is a free, open-source AI agent skill. Official ModelContextProtocol (MCP) server for Magic UI. - [x] cursor - [x] windsurf - [x] claude - [x] cline - [x] roo-cline Add to your IDE's MCP config: Once configured, you can questions like: The server provides the following tools callable via MCP: 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

How do I install magicuidesign/mcp?

Install magicuidesign/mcp with a single command:

npx mdskills install magicuidesign/mcp

This downloads the skill files into your project and your AI agent picks them up automatically.

What platforms support magicuidesign/mcp?

magicuidesign/mcp works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

magicuidesign/mcp