Skip to main content
Glama
Sign In
enesjakozh

Magic UI MCP Server

by magicuidesign
npmGitHub
JavaScript
MIT License
785
106
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

@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:

Tool NameDescription
getUIComponentsProvides a comprehensive list of all Magic UI components.
getLayoutProvides implementation details for bento-grid, dock, file-tree, grid-pattern, interactive-grid-pattern, dot-pattern components.
getMediaProvides implementation details for hero-video-dialog, terminal, marquee, script-copy-btn, code-comparison components.
getMotionProvides implementation details for blur-fade, scroll-progress, scroll-based-velocity, orbiting-circles, animated-circular-progress-bar components.
getTextRevealProvides 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.
getTextEffectsProvides implementation details for word-rotate, flip-text, hyper-text, morphing-text, spinning-text, sparkles-text components.
getButtonsProvides implementation details for rainbow-button, shimmer-button, shiny-button, interactive-hover-button, animated-subscribe-button, pulsating-button, ripple-button components.
getEffectsProvides implementation details for animated-beam, border-beam, shine-border, magic-card, meteors, neon-gradient-card, confetti, particles, cool-mode, scratch-to-reveal components.
getWidgetsProvides implementation details for animated-list, tweet-card, client-tweet-card, lens, pointer, avatar-circles, icon-cloud, globe components.
getBackgroundsProvides implementation details for warp-background, flickering-grid, animated-grid-pattern, retro-grid, ripple components.
getDevicesProvides implementation details for safari, iphone-15-pro, android components.

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 🙏

MIT

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

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.

  1. Install MCP configuration
    1. Supported Clients
  2. Manual Installation
    1. Example Usage
      1. Available Tools
        1. MCP Limitations
          1. Credits

            Related MCP Servers

            • MCP Starter Server

              MatthewDailey
              A
              security
              A
              license
              A
              quality
              This server provides a minimal template for creating AI assistant tools using the ModelContextProtocol, featuring a simple 'hello world' tool example and development setups for building custom MCP tools.
              Last updated -
              1
              1
              8
              TypeScript
              The Unlicense
              • Apple

            • Notion MCP Server

              emmanuelsystems
              -
              security
              F
              license
              -
              quality
              A Model Context Protocol server that connects AI assistants like Claude to Notion workspaces, enabling them to view, search, create, and update Notion databases, pages, and content blocks.
              Last updated -
              275
              JavaScript
              • Apple

            • MCP Magic UI

              idcdev
              -
              security
              F
              license
              -
              quality
              A 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.
              Last updated -
              3
              TypeScript

            • Mixpanel MCP Server

              moonbirdai
              -
              security
              -
              license
              -
              quality
              A Model Context Protocol server that enables AI assistants like Claude to interact with Mixpanel analytics, allowing them to track events, page views, user signups, and update user profiles directly through natural language requests.
              Last updated -
              JavaScript
              MIT License

            View all related MCP servers

            New MCP Servers

            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