Magic UI – README | MCP Marketplace

✨ From vibe coding to vibe deployment. UBOS MCP turns ideas into infra with one message.

Learn more

@magicuidesign/mcp

npm version

Official ModelContextProtocol (MCP) server for Magic UI.

MCP

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.

Featured Templates

View More
AI Characters
Your Speaking Avatar
168 685
AI Characters
Sarcastic AI Chat Bot
128 1440
Data Analysis
Pharmacy Admin Panel
238 1704
Customer service
AI-Powered Product List Manager
147 625

Start your free trial

Build your solution today. No credit card required.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.