F
licenseNot graded
qualityF
maintenanceThis server implements the Model Context Protocol to facilitate meaningful interaction and understanding development between humans and AI through structured tools and progressive interaction patterns.
57
Magic UI MCP Server
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: OmniMCP
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 🙏
Maintenance
–Maintainers
<1hResponse time
–Release cycle
–Releases (12mo)
Commit activity
Issues opened vs closed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceA server that provides rich UI context and interaction capabilities to AI models, enabling deep understanding of user interfaces through visual analysis and precise interaction via Model Context Protocol.72MIT
- AlicenseCqualityDmaintenanceA Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.3227ISC
- FlicenseDqualityDmaintenanceA Model Context Protocol server that provides access to Magic UI components, allowing AI assistants and other MCP clients to discover and use UI components from the Magic UI design system.214
Related MCP Connectors
A Model Context Protocol server for Wix AI tools
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to control Unreal E…
Appeared in Searches
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/magicuidesign/mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server