What is MCP?
MCP (Model Context Protocol) is an official server for Magic UI that facilitates the integration of various UI components and animations into applications.
How to use MCP?
To use MCP, install it via the command line using the provided npm command, and configure it in your IDE's MCP settings. Once set up, you can interact with the server to request UI components and animations.
Key features of MCP?
- Provides a comprehensive list of Magic UI components.
- Supports various client integrations.
- Allows for the retrieval of implementation details for UI components, animations, and special effects.
Use cases of MCP?
- Quickly adding UI components to web applications.
- Implementing animations and special effects in user interfaces.
- Streamlining the development process for UI designers and developers.
FAQ from MCP?
- What clients are supported by MCP?
MCP supports clients like cursor, windsurf, claude, and more.
- Is there a limit on the number of tools that can be called?
Yes, some clients have limitations on the number of tools they can call, which is why tools are grouped into categories.
- How can I get help with using MCP?
You can refer to the official documentation on the Magic UI website for detailed guidance.
@magicuidesign/mcp
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"]
}
}
}
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.
