The Magic UI MCP Server provides tools for fetching implementation details and components for building interactive and animated UI elements. You can:

• Get a comprehensive list of all Magic UI components

• Access implementation details for layout components (bento-grid, dock, file-tree)

• Access media components (hero-video-dialog, terminal, marquee)

• Access motion and animation components (blur-fade, scroll-progress)

• Access text components (text-animate, typing-animation, word-rotate, hyper-text)

• Access button variants (rainbow-button, shimmer-button, shiny, ripple)

• Access special effects (animated-beam, confetti, particles, meteors)

• Access widgets (animated-list, tweet-card, orbiting circles)

• Access background components (warp-background, retro-grid, flickering grids)

• Access device mock components (safari, iphone-15-pro, android)

Provides implementation details for Android device mock components for UI design

Provides implementation details for Safari browser mock components for UI design

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Magic UI MCP Server add a marquee of tech logos to my homepage"

That's it! The server will respond to your query, and you can continue using it as needed.

Here is a step-by-step guide with screenshots.