Magic UI MCP MCP — Use Cases, Install & Live Demo

Why use it

Key features

Three tools over the live Magic UI registry
Natural-language component search (kind, query, pagination)
Returns install commands and complete usage snippets
No static bundle — always reads the current registry
Works across all major MCP clients

Live Demo

What it looks like in practice

magic-ui-mcp.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

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

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

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

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Magic UI MCP

Add an animated hero section to a Next.js landing page

👤 Frontend devs and designers building marketing pages ⏱ ~15 min beginner

When to use: You need a polished hero animation and don't want to browse docs yourself.

Prerequisites

Next.js or React project — npx create-next-app@latest
Tailwind + shadcn/ui — Magic UI builds on these; install if missing

Flow

Ask for it naturally

Add a blur-fade-in animation for the H1 and CTA in my hero section.✓ Copied

→ Agent calls searchRegistryItems for 'blur fade' and returns the component
Install + wire in

Install the component and paste it into app/page.tsx replacing the current hero.✓ Copied

→ Install command runs; imports added; hero updated
Tweak timing

Slower entrance — 600ms delay between H1 and CTA.✓ Copied

→ Props updated inline

Outcome: A ship-worthy hero animation without leaving the editor.

Pitfalls

Mixing Magic UI with a non-Tailwind setup — Most components assume Tailwind classes; port to CSS modules only if you're ready for that work

Combine with: mcp-echarts

Browse all Magic UI components by category

👤 Designers exploring the library ⏱ ~10 min beginner

When to use: You're early in design and want to scan what's available.

Flow

List by kind

List all Magic UI components of kind 'animation' — limit 30.✓ Copied

→ listRegistryItems returns names + titles
Expand the interesting ones

Show me the details for marquee, aurora-text, shine-border.✓ Copied

→ Full details incl. install + usage per component

Outcome: A short-list of components worth trying in your next page.

Replace a static logo row with a marquee of logos

👤 Marketing/landing-page owners ⏱ ~10 min beginner

When to use: Your 'Trusted by' row looks dated — a scrolling marquee adds motion.

Flow

Find the marquee

Make the 'Trusted by' row a marquee of logos.✓ Copied

→ Agent picks the marquee component and adapts it
Pause on hover

Pause the marquee on hover for accessibility.✓ Copied

→ prop/class tweak; preserves motion-reduced users

Outcome: Marquee row that looks modern and respects motion preferences.

Pitfalls

Ignoring prefers-reduced-motion — Magic UI components typically honor it; don't override unless you know the users

Combine with: motion-dev-animations-skill

Combinations

Pair with other MCPs for X10 leverage

magic-ui-mcp + motion-dev-animations-skill

Magic UI for pre-built components, motion.dev for custom animations

Use Magic UI's blur-fade for the hero, then motion.dev for a custom scroll-linked parallax below.✓ Copied

magic-ui-mcp + figma

Take a Figma design and reach for the closest Magic UI component

This Figma card section looks like Magic UI's bento-grid. Install it and fill in the text.✓ Copied

magic-ui-mcp + claude-code-design-skills

Figma-to-code flow + Magic UI enhancements

Convert the Figma to React; where it makes sense, use Magic UI components instead of scratch components.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
listRegistryItems	kind?, query?, limit?, offset?	Browse or paginate available components	1 registry fetch
searchRegistryItems	query + pagination	Natural-language component lookup	1 registry fetch
getRegistryItem	id/name	Before you install, to see exactly what you'll get	1 registry fetch

Cost & Limits

What this costs to run

API quota: Registry is a public fetch — no rate issues in normal use
Tokens per call: Small metadata per call
Monetary: Free
Tip: Use listRegistryItems with kind filter; don't fetch every item just to browse.

Security

Permissions, secrets, blast radius

Credential storage: No credentials

Data egress: Read-only fetches to the Magic UI registry. No writes anywhere.

Any component you install pulls code into your project — read the generated file once before committing, same as any dependency.

Troubleshooting

Common errors and fixes

Tool returns empty array

Registry might be reachability-blocked in your network; retry, and confirm DNS to magicui.design resolves.

Verify: curl -I https://magicui.design/r/index.json

Component installs but looks unstyled

Tailwind config or CSS variables missing — follow Magic UI's one-time setup (globals.css + tailwind.config.ts).

Verify: Check tailwind.config.ts for magicui plugin

Animation stutters

Likely a re-render cascade. Memoize parent components; confirm no layout thrash.

Verify: Chrome DevTools Performance → Frames

Alternatives

Magic UI MCP vs others

Alternative	When to use it instead	Tradeoff
motion-dev-animations-skill	You want custom motion logic, not a component library	More work; more control
figma	You have existing designs in Figma to port	Different direction: design → code, not library-first
claude-code-design-skills	You're doing Figma-to-code, not library-adoption	Covers a different part of the pipeline

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills