Home / MCP / Magic UI MCP Server

Magic UI MCP Server

Provides an MCP server exposing utilities to query Magic UI components, layouts, media, motion, text effects, widgets, and more.

javascript

155stars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You run a ModelContextProtocol (MCP) server to expose a programmable interface for Magic UI components, layouts, media, motion, text effects, and more. With MCP you can query and orchestrate these building blocks from supported clients, enabling dynamic UI composition and customization at scale.

How to use

You use an MCP client to connect to the server and call available tools. Each tool returns data and implementation details for a specific aspect of Magic UI, such as components, layouts, media, motion effects, and text styles. You can combine tool outputs to build complex UI patterns, automate UI generation, and retrieve up-to-date component information to drive your design system.

How to install

Prerequisites: you need Node.js and npm installed on your machine. Verify installation with node -v and npm -v.

Option 1: Install via MCP setup command for the client (recommended where supported). Run this command to install the MCP server for your client:

npx @magicuidesign/cli@latest install <client>

Configuration snippet for MCP client

Add the following MCP configuration to connect your IDE or environment to the MCP server. This registers a local MCP server callable via npm/npx.

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

Available tools

getUIComponents

Provides a comprehensive list of all Magic UI components.

getLayout

Provides implementation details for bento-grid, dock, file-tree, grid-pattern, interactive-grid-pattern, dot-pattern components.

getMedia

Provides implementation details for hero-video-dialog, terminal, marquee, script-copy-btn, code-comparison components.

getMotion

Provides implementation details for blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, animated-circular-progress-bar components.

getTextReveal

Provides implementation details for text-animate, line-shadow-text, aurora-text, animated-shiny-text, animated-gradient-text, text-reveal, typing-animation, box-reveal, number-ticker components.

getTextEffects

Provides implementation details for word-rotate, flip-text, hyper-text, morphing-text, spinning-text, sparkles-text components.

getButtons

Provides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button components.

getEffects

Provides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal components.

getWidgets

Provides implementation details for animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, globe components.

getBackgrounds

Provides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple components.

getDevices

Provides implementation details for safari, iphone-15-pro, android components.