Skip to main content
Glama
enesjakozh

Magic UI MCP Server

by magicuidesign
npmGitHub
JavaScript
MIT License
1,485
125
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

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

How are these scores calculated?

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 Toolkit

              zxfgds
              -
              security
              F
              license
              -
              quality
              A comprehensive Model Context Protocol server implementation that enables AI assistants to interact with file systems, databases, GitHub repositories, web resources, and system tools while maintaining security and control.
              Last updated -
              3
              1
              TypeScript

            • SupaUI MCP Server

              buoooou
              A
              security
              F
              license
              A
              quality
              A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
              Last updated -
              3
              680
              4
              TypeScript

            • MCP Magic UI

              idcdev
              A
              security
              F
              license
              A
              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 -
              2
              9
              TypeScript

            • Magic UI MCP Server

              Semondora
              A
              security
              A
              license
              A
              quality
              A foundation for building interactive applications using the Model Context Protocol that integrates AI capabilities with Magic UI components.
              Last updated -
              11
              1,485
              1
              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