マジックUI MCPサーバー

@magicuidesign/mcp

Magic UIの公式 ModelContextProtocol (MCP) サーバー。

MCP構成をインストールする

npx @magicuidesign/cli@latest install <client>

サポートされているクライアント

[x] カーソル
[x] ウィンドサーフィン
[x] クロード
[x] クライン
[x] ルー・クライン

手動インストール

IDE の MCP 構成に追加します:

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

使用例

設定が完了すると、次のような質問ができるようになります。

「ロゴのマーキーを作る」

「ぼかしフェードテキストアニメーションを追加する」

「グリッド背景を追加する」

利用可能なツール

サーバーは、MCP 経由で呼び出し可能な次のツールを提供します。

ツール名	説明
`getUIComponents`	すべての Magic UI コンポーネントの包括的なリストを提供します。
`getLayout`	bento-grid 、 dock 、 file-tree 、 grid-pattern 、 interactive-grid-pattern 、 dot-patternコンポーネントの実装の詳細を提供します。
`getMedia`	hero-video-dialog 、 terminal 、 marquee 、 script-copy-btn 、 code-comparisonコンポーネントの実装の詳細を提供します。
`getMotion`	blur-fade 、 scroll-progress 、 scroll-based-velocity 、 orbiting-circles 、 animationd-circular-progress-barコンポーネントの実装の詳細を提供します。
`getTextReveal`	text-animate 、 line-shadow-text 、 aurora-text 、 animated-shiny-text 、 animated-gradient-text 、 text-reveal 、 typing-animation 、 box-reveal 、 number-tickerコンポーネントの実装の詳細を提供します。
`getTextEffects`	word-rotate 、 flip-text 、 hyper-text 、 morphing-text 、 spinning-text 、 sparkles-textコンポーネントの実装の詳細を提供します。
`getButtons`	rainbow-button 、 shimmer-button 、 shine-button 、 interactive-hover-button 、 animation-subscribe-button 、 pulsating-button 、 ripple-buttonコンポーネントの実装の詳細を提供します。
`getEffects`	animation-beam 、 border-beam 、 shine-border 、 magic-card 、 meteors 、 neon-gradient-card 、 confetti 、 particles 、 cool-mode 、 scratch-to-revealコンポーネントの実装の詳細を提供します。
`getWidgets`	animation-list 、 tweet-card 、 client-tweet-card 、 lens 、 pointer 、 avatar-circles 、 icon-cloud 、 globeコンポーネントの実装の詳細を提供します。
`getBackgrounds`	warp-background 、 flickering-grid 、 animated-grid-pattern 、 retro-grid 、 rippleコンポーネントの実装の詳細を提供します。
`getDevices`	safari 、 iphone-15-pro 、 androidコンポーネントの実装の詳細を提供します。

MCPの制限

一部のクライアントでは、呼び出せるツールの数に制限があります。そのため、ツールをカテゴリ別にグループ化することにしました。注：各コンポーネントのより具体的なコンテキストについては、MCPをローカルで実行し、コンポーネントをグループ化するロジックを変更してください。

クレジット

MCP サーバーを作成してくれた@beaubhpに大いに感謝します 🙏

マサチューセッツ工科大学

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

マーキー、アニメーション、特殊効果、インタラクティブな背景などのコンポーネントのコードを提供することで、AI アシスタントが Web アプリケーションの UI コンポーネントを簡単に実装できるようにする Magic UI 用の ModelContextProtocol サーバー。

Related MCP Servers

MCP Starter Server
MatthewDailey
A
security
A
license
A
quality
This server provides a minimal template for creating AI assistant tools using the ModelContextProtocol, featuring a simple 'hello world' tool example and development setups for building custom MCP tools.
Last updated -
1
4
8
TypeScript
The Unlicense
Notion MCP Server
emmanuelsystems
A
security
F
license
A
quality
A Model Context Protocol server that connects AI assistants like Claude to Notion workspaces, enabling them to view, search, create, and update Notion databases, pages, and content blocks.
Last updated -
12
194
JavaScript
MCP Magic UI
idcdev
-
security
F
license
-
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 -
3
TypeScript
Mixpanel MCP Server
moonbirdai
-
security
-
license
-
quality
A Model Context Protocol server that enables AI assistants like Claude to interact with Mixpanel analytics, allowing them to track events, page views, user signups, and update user profiles directly through natural language requests.
Last updated -
JavaScript
MIT License

View all related MCP servers

Magic UI MCP Server

@magicuidesign/mcp

MCP構成をインストールする

サポートされているクライアント

手動インストール

使用例

利用可能なツール

MCPの制限

クレジット

Related MCP Servers

MCP Starter Server

Notion MCP Server

MCP Magic UI

Mixpanel MCP Server

New MCP Servers

MCP directory API