The Magic UI MCP Server provides tools for fetching implementation details and components for building interactive and animated UI elements. You can:
Get a comprehensive list of all Magic UI components
Access implementation details for layout components (bento-grid, dock, file-tree)
Access media components (hero-video-dialog, terminal, marquee)
Access motion and animation components (blur-fade, scroll-progress)
Access text components (text-animate, typing-animation, word-rotate, hyper-text)
Access button variants (rainbow-button, shimmer-button, shiny, ripple)
Access special effects (animated-beam, confetti, particles, meteors)
Access widgets (animated-list, tweet-card, orbiting circles)
Access background components (warp-background, retro-grid, flickering grids)
Access device mock components (safari, iphone-15-pro, android)
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Magic UI MCP Serveradd a marquee of tech logos to my homepage"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@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
Related MCP server: SupaUI MCP Server
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 |
| Lists Magic UI registry items with optional filters like |
| Searches Magic UI registry items by keyword across names, titles, descriptions, and registry types, with pagination support. |
| Returns details for a single registry item, including install instructions and optional source, related items, and examples. |
MCP Limitations
Some clients have a limit on the number of tools they can call. The server keeps a small generic tool surface and reads directly from the live Magic UI registry, rather than relying on hardcoded category buckets. Broad semantic discovery concepts such as widgets, media, or devices are not currently modeled as first-class categories in the MCP API.
Credits
Big thanks to @beaubhp for creating the MCP server 🙏
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.