Skip to main content
Glama
Sign In
enesjakozh

Magic UI MCP Server

by magicuidesign
npmGitHub
JavaScript
MIT License
772
51
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Provides implementation details for Android device mock components for UI design

  • Provides implementation details for Safari browser mock components for UI design

@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 コンポーネントの包括的なリストを提供します。
getLayoutbento-grid 、 dock 、 file-tree 、 grid-pattern 、 interactive-grid-pattern 、 dot-patternコンポーネントの実装の詳細を提供します。
getMediahero-video-dialog 、 terminal 、 marquee 、 script-copy-btn 、 code-comparisonコンポーネントの実装の詳細を提供します。
getMotionblur-fade 、 scroll-progress 、 scroll-based-velocity 、 orbiting-circles 、 animationd-circular-progress-barコンポーネントの実装の詳細を提供します。
getTextRevealtext-animate 、 line-shadow-text 、 aurora-text 、 animated-shiny-text 、 animated-gradient-text 、 text-reveal 、 typing-animation 、 box-reveal 、 number-tickerコンポーネントの実装の詳細を提供します。
getTextEffectsword-rotate 、 flip-text 、 hyper-text 、 morphing-text 、 spinning-text 、 sparkles-textコンポーネントの実装の詳細を提供します。
getButtonsrainbow-button 、 shimmer-button 、 shine-button 、 interactive-hover-button 、 animation-subscribe-button 、 pulsating-button 、 ripple-buttonコンポーネントの実装の詳細を提供します。
getEffectsanimation-beam 、 border-beam 、 shine-border 、 magic-card 、 meteors 、 neon-gradient-card 、 confetti 、 particles 、 cool-mode 、 scratch-to-revealコンポーネントの実装の詳細を提供します。
getWidgetsanimation-list 、 tweet-card 、 client-tweet-card 、 lens 、 pointer 、 avatar-circles 、 icon-cloud 、 globeコンポーネントの実装の詳細を提供します。
getBackgroundswarp-background 、 flickering-grid 、 animated-grid-pattern 、 retro-grid 、 rippleコンポーネントの実装の詳細を提供します。
getDevicessafari 、 iphone-15-pro 、 androidコンポーネントの実装の詳細を提供します。

MCPの制限

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

クレジット

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

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

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

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

  1. MCP構成をインストールする
    1. サポートされているクライアント
  2. 手動インストール
    1. 使用例
      1. 利用可能なツール
        1. MCPの制限
          1. クレジット

            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
              7
              8
              TypeScript
              The Unlicense
              • Apple

            • Notion MCP Server

              emmanuelsystems
              -
              security
              F
              license
              -
              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 -
              275
              JavaScript
              • Apple

            • DaVinci Resolve MCP Server

              Tooflex
              -
              security
              -
              license
              -
              quality
              A Model Context Protocol server that enables AI assistants like Claude to interact with DaVinci Resolve Studio, providing advanced control over editing, color grading, audio, and other video production tasks.
              Last updated -
              Python

            • 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

            View all related MCP servers

            New MCP Servers

            ID: 1xfanq9kx4