Skip to main content
hc
Submit
mcpSource-backedReview first Safety ✓ Privacy ✓

Magic UI MCP Server for Claude

Browse and install Magic UI animated React components from Claude — search the component registry by name or keyword, retrieve full installation details for any component, and get guided setup instructions — with the official Magic UI MCP server.

by Magic UI·added 2026-06-18·
Claude CodeCodexCursorClaude Desktop
HarnessClaude CodeCodexCursorClaude Desktop
Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

  • The server is read-only — it queries the Magic UI registry but does not install files into your project automatically.
  • Installation of components into your project is guided by Claude based on retrieved specs — you apply the changes.

Privacy notes

  • Registry queries and component names are sent to the Magic UI registry API. No personal data or project content is sent externally.

Prerequisites

  • Node.js with `npx` available.
  • A React project using Tailwind CSS (Magic UI components are Tailwind-based).
  • An MCP client such as Claude Code or Claude Desktop.

Schema details

Install type
cli
Troubleshooting
No
Source repository stats
Scope
Source repo
Collection metadata
Estimated setup
2 minutes
Difficulty
beginner
Tool listing metadata
Full copyable content
{
  "mcpServers": {
    "magic-ui": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

About this resource

Overview

The Magic UI MCP Server is the official Model Context Protocol server from Magic UI, giving Claude access to the Magic UI component registry. Magic UI provides 100+ animated React components built with Tailwind CSS — marquees, carousels, blur fades, grid backgrounds, particle effects, and more. The MCP server surfaces the registry so Claude can guide installation of any component into your React project. MIT licensed.

The simplest install is via the Magic UI CLI: npx @magicuidesign/cli@latest install claude, which configures the MCP automatically.

Key capabilities

  • Browse registry — list all available Magic UI components with optional filters.
  • Search components — keyword search across component names, titles, and descriptions.
  • Get component details — full installation guidance including CLI commands and dependencies.

Tools

Tool Purpose
listRegistryItems Browse Magic UI registry with filters (kind, query, limit, offset)
searchRegistryItems Keyword search across component names, titles, descriptions
getRegistryItem Full details and installation guidance for a specific component

Featured components

Component Description
Marquee Infinite horizontal/vertical scroll animation
Blur Fade Reveal content with smooth blur-to-focus transitions
Grid Background Animated grid or dot background patterns
Number Ticker Animated number counter
Animated Beam SVG beam/connection animations
Orbiting Circles Concentric orbital animations
Magic Card Interactive gradient hover card effect
Sparkles Particle sparkle animation
Globe 3D animated globe visualization
Terminal Code terminal animation effect

How it compares

Server UI components Animated Registry browse Install guidance
Magic UI MCP Yes Yes Yes Yes
shadcn/ui MCP Yes Partial Yes Yes
Storybook MCP No (stories) No No No

Magic UI MCP focuses specifically on animated components that add motion and visual polish to React apps — distinct from shadcn/ui's utility-first components.

Installation

Via Magic UI CLI (recommended)

npx @magicuidesign/cli@latest install claude

This automatically configures the MCP server in Claude Code.

Claude Desktop (manual)

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

Requirements

  • Node.js (for npx).
  • A React + Tailwind CSS project.
  • An MCP client (Claude Code or Claude Desktop).

Security

  • Registry queries only — no write access to your project files.
  • No credentials required.

Source Verification Notes

Verified on 2026-06-18:

  • Official repository magicuidesign/mcp (MIT) on npm as @magicuidesign/mcp (v2.0.0) documents the CLI install via npx @magicuidesign/cli@latest install claude, all three tools (listRegistryItems, searchRegistryItems, getRegistryItem), and the animated React component registry coverage.
  • Claude Code MCP documentation at code.claude.com/docs/en/mcp describes the stdio connector pattern used above.
#magicui#react#ui-components#animation#tailwind#frontend

Source citations

Add this badge to your README

Show that Magic UI MCP Server for Claude is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/mcp/magicui-mcp-server.svg)](https://heyclau.de/entry/mcp/magicui-mcp-server)

How it compares

Magic UI MCP Server for Claude side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

FieldMagic UI MCP Server for Claude

Browse and install Magic UI animated React components from Claude — search the component registry by name or keyword, retrieve full installation details for any component, and get guided setup instructions — with the official Magic UI MCP server.

Open dossier 		After Effects MCP Server

MCP server for controlling Adobe After Effects through a local Node bridge and ScriptUI panel for compositions, layers, keyframes, expressions, masks, and effects.

Open dossier 		Android Skills MCP Server for Claude

Access AI-optimized Android development guides from Claude — search and retrieve SKILL.md content covering Jetpack Compose, Navigation 3, CameraX, AGP 9, App Functions, Edge-to-Edge, Android Profilers, XR, Google Play, and the Android CLI — with the Android Skills MCP server.

Open dossier 		Appwrite MCP Server for Claude

Connect Claude to the full Appwrite backend platform — databases, authentication, serverless functions, teams, messaging, and storage — with the official Appwrite MCP server using dynamic dispatch across the entire Appwrite API surface.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categorymcpmcpmcpmcp
Sourcesource-backedsource-backedsource-backedsource-backed
AuthorMagic UIDakkshinJaewoong Eum (skydoves)Appwrite
Added2026-06-182026-06-062026-06-182026-06-18
Platforms
Claude CodeCodexCursorClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Source repo————
Safety notes✓The server is read-only — it queries the Magic UI registry but does not install files into your project automatically. Installation of components into your project is guided by Claude based on retrieved specs — you apply the changes.✓After Effects MCP queues predefined commands to a local bridge directory and relies on an open After Effects ScriptUI panel to execute them. The bridge can create compositions, text layers, shape layers, solid layers, cameras, null objects, masks, keyframes, expressions, effects, and layer property changes. Layer duplication, layer deletion, expression changes, masks, timing edits, and batch property updates can materially alter an After Effects project. The install script may copy files into Adobe application folders and may require elevated privileges on some systems. Enabling After Effects scripting permissions can let scripts write files and access network resources, so keep the bridge limited to trusted projects. Use only the predefined script list exposed by the MCP server; do not modify it to accept arbitrary scripts unless that risk is understood.✓The server runs entirely offline — no network requests are made during queries. All skill content is bundled with the npm package.✓Mutation operations (write, update, delete) require `confirm_write=true` to be passed explicitly, adding a confirmation step before any destructive action. The API key scope determines what operations are available — use least-privilege scopes for your use case.
Privacy notes✓Registry queries and component names are sent to the Magic UI registry API. No personal data or project content is sent externally.✓Tool calls and results can expose composition names, project structure, layer names, layer properties, timing, expressions, effect names, masks, and local bridge file paths. Project contents may include client work, unreleased media, brand assets, filenames, text layers, and animation details. The command and result files in the local bridge directory can persist recent instructions and After Effects output. MCP client logs and model context may retain prompts, layer names, generated expressions, and project metadata.✓No API keys, user data, or query content is sent to any external service. All lookups happen locally against the bundled skill snapshot.✓User records, database documents, function logs, team memberships, and messaging data from your Appwrite project are surfaced in Claude's context. Your `APPWRITE_API_KEY` grants project-level access — keep it in the MCP config env and never commit it to version control.
Prerequisites
  • Node.js with `npx` available.
  • A React project using Tailwind CSS (Magic UI components are Tailwind-based).
  • An MCP client such as Claude Code or Claude Desktop.
  • Adobe After Effects 2022 or newer.
  • Node.js, npm, and a local checkout of the repository.
  • Permission to install the ScriptUI panel into the After Effects ScriptUI Panels folder.
  • After Effects scripting preferences reviewed, including whether scripts may write files and access the network.
  • Node.js with `npx` available.
  • An MCP client such as Claude Code or Claude Desktop.
  • An Appwrite account — log in at cloud.appwrite.io or self-hosted.
  • An Appwrite project with an API key that has the required scopes for your use case.
  • Python with `uvx` available.
  • An MCP client such as Claude Code or Claude Desktop.
Install
npx @magicuidesign/cli@latest install claude
git clone https://github.com/Dakkshin/after-effects-mcp.git && cd after-effects-mcp && npm install && npm run build
claude mcp add android-skills -- npx -y android-skills-mcp
claude mcp add appwrite -e APPWRITE_PROJECT_ID=<project-id> -e APPWRITE_API_KEY=<api-key> -- uvx mcp-server-appwrite
Config
{
  "mcpServers": {
    "magic-ui": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}
Manual-only setup:
npm run build && npm run install-bridge
{
  "mcpServers": {
    "android-skills": {
      "command": "npx",
      "args": ["-y", "android-skills-mcp"]
    }
  }
}
{
  "mcpServers": {
    "appwrite": {
      "command": "uvx",
      "args": ["mcp-server-appwrite"],
      "env": {
        "APPWRITE_PROJECT_ID": "<project-id>",
        "APPWRITE_API_KEY": "<api-key>",
        "APPWRITE_ENDPOINT": "https://cloud.appwrite.io/v1"
      }
    }
  }
}
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.