mcp

The Magic UI MCP server provided by @magicuidesign/mcp serves as a centralized MCP endpoint for Magic UI components and design tools. Once you configure this server in your MCP-enabled IDE or environment, you can query a suite of tools that expose detailed information about available UI components, layouts, media components, motion effects, text reveals, text effects, widgets, and more. Tools are grouped by category, such as getUIComponents, getLayout, getMedia, getMotion, getTextReveal, getTextEffects, getButtons, getEffects, getWidgets, getBackgrounds, and getDevices, each returning structured descriptions and usage guidance for the corresponding Magic UI features. This enables dynamic browsing, discovery, and integration of Magic UI elements directly through MCP prompts like: “Provide a list of all components” or “Explain the layout implementation for grid patterns.”

Prerequisites:

• Node.js and npm installed on your machine
• Internet access to fetch the MCP package

1. Install and configure the MCP server using the example from the README:

Create or update your MCP config file (e.g., mcp.config.json) with:

{ "mcpServers": { "magicuidesign-mcp": { "command": "npx", "args": ["-y", "@magicuidesign/mcp@latest"] } } }

2. Run the MCP server configuration in your IDE or CLI as appropriate for your setup. The command uses npx to install and run the MCP package on demand.

3. Verify the server is reachable through your MCP client and start issuing tool requests such as getUIComponents, getLayout, and getMedia to explore Magic UI capabilities.

Notes and tips:

• The server exposes a wide range of tools; some clients may have limits on the number of tools they can call. If you hit a limit, group requests or use iterative queries.
• The npm package name is @magicuidesign/mcp; keep it updated to receive the latest tools and enhancements.
• If you need to customize environment settings, you can extend the mcpServers configuration with env variables as needed (e.g., env: { "VAR_NAME": "description" }).
• Ensure your network and firewall settings allow MCP tool calls to reach the server and that any required dependencies for the underlying Magic UI tools are available in your environment.