How do I install magicuidesign/mcp?

Install magicuidesign/mcp with a single command: npx mdskills install magicuidesign/mcp. This downloads the skill files into your project and your AI agent picks them up automatically.

What platforms support magicuidesign/mcp?

magicuidesign/mcp works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

← Back to MCP servers

magicuidesign/mcp

Name: magicuidesign/mcp: AI Agent Skill
Rating: 7.8 (1 reviews)
Author: magicuidesign

Verified

MCP ServerDesign SystemsIntermediate

Official ModelContextProtocol (MCP) server for Magic UI. - [x] cursor - [x] windsurf - [x] claude - [x] cline - [x] roo-cline Add to your IDE's MCP config: Once configured, you can questions like: The server provides the following tools callable via MCP: 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

by @magicuidesign0Updated 2 weeks ago

Add this skill

npx mdskills install magicuidesign/mcp

Fork & Edit

Skill Advisor7.8

Well-documented MCP server with categorized UI component tools and clear setup

+Provides 11 well-organized tools for accessing 50+ React UI components
+Includes automated CLI installation for 5 major AI clients
+Offers clear usage examples and explains MCP tool count limitations
-Declares shell and network permissions without clear justification in docs

SKILL.md

Edit in Browser

1# @magicuidesign/mcp
2 
3[![npm version](https://badge.fury.io/js/@magicuidesign%2Fmcp.svg?icon=si%3Anpm)](https://badge.fury.io/js/@magicuidesign%2Fmcp)
4 
5Official ModelContextProtocol (MCP) server for [Magic UI](https://magicui.design/).
6 
7<div align="center">
8  <img src="https://github.com/magicuidesign/mcp/blob/main/public/mcp.png" alt="MCP" />
9</div>
10 
11## Install MCP configuration
12 
13```bash
14npx @magicuidesign/cli@latest install <client>
15```
16 
17### Supported Clients
18 
19- [x] cursor
20- [x] windsurf
21- [x] claude
22- [x] cline
23- [x] roo-cline
24 
25## Manual Installation
26 
27Add to your IDE's MCP config:
28 
29```json
30{
31  "mcpServers": {
32    "magicuidesign-mcp": {
33      "command": "npx",
34      "args": ["-y", "@magicuidesign/mcp@latest"]
35    }
36  }
37}
38```
39 
40## Example Usage
41 
42Once configured, you can questions like:
43 
44> "Make a marquee of logos"
45 
46> "Add a blur fade text animation"
47 
48> "Add a grid background"
49 
50## Available Tools
51 
52The server provides the following tools callable via MCP:
53 
54| Tool Name       | Description                                                                                                                                                                                                                                                                                                                                                                                             |
55|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
56| `getUIComponents` | Provides a comprehensive list of all Magic UI components.                                                                                                                                                                                                                                                                                                                                                     |
57| `getLayout`       | Provides implementation details for [bento-grid](https://magicui.design/docs/components/bento-grid), [dock](https://magicui.design/docs/components/dock), [file-tree](https://magicui.design/docs/components/file-tree), [grid-pattern](https://magicui.design/docs/components/grid-pattern), [interactive-grid-pattern](https://magicui.design/docs/components/interactive-grid-pattern), [dot-pattern](https://magicui.design/docs/components/dot-pattern) components.         |
58| `getMedia`        | Provides implementation details for [hero-video-dialog](https://magicui.design/docs/components/hero-video-dialog), [terminal](https://magicui.design/docs/components/terminal), [marquee](https://magicui.design/docs/components/marquee), [script-copy-btn](https://magicui.design/docs/components/script-copy-btn), [code-comparison](https://magicui.design/docs/components/code-comparison) components.                                                               |
59| `getMotion`       | Provides implementation details for [blur-fade](https://magicui.design/docs/components/blur-fade), [scroll-progress](https://magicui.design/docs/components/scroll-progress), [scroll-based-velocity](https://magicui.design/docs/components/scroll-based-velocity), [orbiting-circles](https://magicui.design/docs/components/orbiting-circles), [animated-circular-progress-bar](https://magicui.design/docs/components/animated-circular-progress-bar) components. |
60| `getTextReveal`   | Provides implementation details for [text-animate](https://magicui.design/docs/components/text-animate), [line-shadow-text](https://magicui.design/docs/components/line-shadow-text), [aurora-text](https://magicui.design/docs/components/aurora-text), [animated-shiny-text](https://magicui.design/docs/components/animated-shiny-text), [animated-gradient-text](https://magicui.design/docs/components/animated-gradient-text), [text-reveal](https://magicui.design/docs/components/text-reveal), [typing-animation](https://magicui.design/docs/components/typing-animation), [box-reveal](https://magicui.design/docs/components/box-reveal), [number-ticker](https://magicui.design/docs/components/number-ticker) components. |
61| `getTextEffects`  | Provides implementation details for [word-rotate](https://magicui.design/docs/components/word-rotate), [flip-text](https://magicui.design/docs/components/flip-text), [hyper-text](https://magicui.design/docs/components/hyper-text), [morphing-text](https://magicui.design/docs/components/morphing-text), [spinning-text](https://magicui.design/docs/components/spinning-text), [sparkles-text](https://magicui.design/docs/components/sparkles-text) components.       |
62| `getButtons`      | Provides implementation details for [rainbow-button](https://magicui.design/docs/components/rainbow-button), [shimmer-button](https://magicui.design/docs/components/shimmer-button), [shiny-button](https://magicui.design/docs/components/shiny-button), [interactive-hover-button](https://magicui.design/docs/components/interactive-hover-button), [animated-subscribe-button](https://magicui.design/docs/components/animated-subscribe-button), [pulsating-button](https://magicui.design/docs/components/pulsating-button), [ripple-button](https://magicui.design/docs/components/ripple-button) components. |
63| `getEffects`      | Provides implementation details for [animated-beam](https://magicui.design/docs/components/animated-beam), [border-beam](https://magicui.design/docs/components/border-beam), [shine-border](https://magicui.design/docs/components/shine-border), [magic-card](https://magicui.design/docs/components/magic-card), [meteors](https://magicui.design/docs/components/meteors), [neon-gradient-card](https://magicui.design/docs/components/neon-gradient-card), [confetti](https://magicui.design/docs/components/confetti), [particles](https://magicui.design/docs/components/particles), [cool-mode](https://magicui.design/docs/components/cool-mode), [scratch-to-reveal](https://magicui.design/docs/components/scratch-to-reveal) components. |
64| `getWidgets`      | Provides implementation details for [animated-list](https://magicui.design/docs/components/animated-list), [tweet-card](https://magicui.design/docs/components/tweet-card), [client-tweet-card](https://magicui.design/docs/components/client-tweet-card), [lens](https://magicui.design/docs/components/lens), [pointer](https://magicui.design/docs/components/pointer), [avatar-circles](https://magicui.design/docs/components/avatar-circles), [icon-cloud](https://magicui.design/docs/components/icon-cloud), [globe](https://magicui.design/docs/components/globe) components.                                |
65| `getBackgrounds`  | Provides implementation details for [warp-background](https://magicui.design/docs/components/warp-background), [flickering-grid](https://magicui.design/docs/components/flickering-grid), [animated-grid-pattern](https://magicui.design/docs/components/animated-grid-pattern), [retro-grid](https://magicui.design/docs/components/retro-grid), [ripple](https://magicui.design/docs/components/ripple) components.                                                               |
66| `getDevices`      | Provides implementation details for [safari](https://magicui.design/docs/components/safari), [iphone-15-pro](https://magicui.design/docs/components/iphone-15-pro), [android](https://magicui.design/docs/components/android) components.                                                                                                                                                            |
67 
68## MCP Limitations
69 
70Some clients have a [limit](https://docs.cursor.com/context/model-context-protocol#limitations) 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.
71 
72## Credits
73 
74Big thanks to [@beaubhp](https://github.com/beaubhp) for creating the MCP server 🙏
75 
76[MIT](https://github.com/magicuidesign/mcp/blob/main/LICENSE.md)

Full transparency — inspect the skill content before installing.