Magic UI MCP Server
ModelContextProtocol server for Magic UI that allows AI assistants to easily implement UI components for web applications by providing code for components like marquees, animations, special effects, and interactive backgrounds.
README Documentation
@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@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:
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 🙏