Skip to main content
Glama
Sign In
enesjakozh

Magic Component Platform (MCP)

by 21st-dev
npmGitHub
TypeScript
3,157
1,627
  • Linux
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

21st.dev マジックAIエージェント

MCPバナー

Magic Component Platform（MCP）は、自然言語による記述を通じて、美しくモダンなUIコンポーネントを瞬時に作成できる、強力なAI駆動型ツールです。主要なIDEとシームレスに統合され、UI開発のための効率的なワークフローを提供します。

🌟 特徴

  • AIを活用したUI生成:自然言語で記述してUIコンポーネントを作成する
  • マルチIDEサポート:
  • モダン コンポーネント ライブラリ: 21st.devに触発された、事前に構築されたカスタマイズ可能なコンポーネントの膨大なコレクションにアクセスできます。
  • リアルタイムプレビュー: 作成したコンポーネントをすぐに確認できます
  • TypeScript サポート: 型安全な開発のための完全な TypeScript サポート
  • SVGL統合: プロフェッショナルなブランドアセットとロゴの膨大なコレクションへのアクセス
  • コンポーネントの強化: 高度な機能とアニメーションで既存のコンポーネントを改善します (近日公開)

🎯 仕組み

  1. エージェントに必要なことを伝える
    • AIエージェントのチャットで/uiと入力し、探しているコンポーネントを説明するだけです。
    • 例: /ui create a modern navigation bar with responsive design
  2. 魔法で創造しよう
    • IDEはMagicを使用するように促します
    • マジックは洗練されたUIコンポーネントを瞬時に構築します
    • コンポーネントは21st.devのライブラリからインスピレーションを得ています
  3. シームレスな統合
    • コンポーネントはプロジェクトに自動的に追加されます
    • 新しいUIコンポーネントをすぐに使い始めましょう
    • すべてのコンポーネントは完全にカスタマイズ可能

🚀 はじめに

前提条件

  • Node.js (最新の LTS バージョンを推奨)
  • サポートされている IDE の 1 つ:
    • カーソル
    • ウィンドサーフィン
    • VSCode（Cline拡張機能付き）

インストール

  1. APIキーを生成する
  2. インストール方法を選択
方法 1: CLI インストール (推奨)

IDE 用に MCP をインストールして構成するためのコマンドは 1 つだけです。

npx @21st-dev/cli@latest install <client> --api-key <key>

サポートされているクライアント: cursor、windsurf、cline、claude

方法2: 手動設定

手動で設定したい場合は、IDE の MCP 構成ファイルに以下を追加します。

{ "mcpServers": { "@21st-dev/magic": { "command": "npx", "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""] } } }

設定ファイルの場所:

  • カーソル: ~/.cursor/mcp.json
  • ウィンドサーフィン: ~/.codeium/windsurf/mcp_config.json
  • クライン: ~/.cline/mcp_config.json
  • クロード: ~/.claude/mcp_config.json
方法3: VS Codeのインストール

ワンクリックでインストールするには、以下のいずれかのインストールボタンをクリックします。

VS Codeの手動セットアップ

まず、ワンクリックインストールの場合は上記のインストールボタンをご確認ください。手動インストールの場合は、以下の手順に従ってください。

VS Codeのユーザー設定（JSON）ファイルに、以下のJSONブロックを追加します。Ctrl Ctrl + Shift + Pを押してPreferences: Open User Settings (JSON)と入力することで実行できます。

{ "mcp": { "inputs": [ { "type": "promptString", "id": "apiKey", "description": "21st.dev Magic API Key", "password": true } ], "servers": { "@21st-dev/magic": { "command": "npx", "args": ["-y", "@21st-dev/magic@latest"], "env": { "API_KEY": "${input:apiKey}" } } } } }

オプションとして、ワークスペース内の.vscode/mcp.jsonというファイルに追加することもできます。

{ "inputs": [ { "type": "promptString", "id": "apiKey", "description": "21st.dev Magic API Key", "password": true } ], "servers": { "@21st-dev/magic": { "command": "npx", "args": ["-y", "@21st-dev/magic@latest"], "env": { "API_KEY": "${input:apiKey}" } } } }

❓ よくある質問

Magic AI Agent はコードベースをどのように処理しますか?

Magic AI Agentは、生成するコンポーネントに関連するファイルのみを書き込みまたは変更します。プロジェクトのコードスタイルと構造に従い、アプリケーションの他の部分に影響を与えることなく、既存のコードベースとシームレスに統合されます。

生成されたコンポーネントをカスタマイズできますか?

はい！生成されたすべてのコンポーネントは完全に編集可能で、適切に構造化されたコードが付属しています。コードベース内の他のReactコンポーネントと同様に、スタイル、機能、動作を変更できます。

世代が足りなくなったらどうなりますか?

月間生成上限を超えた場合、プランのアップグレードを促すメッセージが表示されます。いつでもアップグレードして、コンポーネントの生成を継続できます。既存のコンポーネントは引き続き完全に機能します。

新しいコンポーネントはどれくらい早く 21st.dev のライブラリに追加されますか?

作者はいつでも21st.devにコンポーネントを公開でき、Magic Agentはすぐにそれらにアクセスできます。つまり、コミュニティから提供される最新のコンポーネントとデザインパターンに常にアクセスできるということです。

コンポーネントの複雑さに制限はありますか?

Magic AI Agentは、シンプルなボタンから複雑なインタラクティブフォームまで、さまざまな複雑さのコンポーネントを処理できます。ただし、最良の結果を得るには、非常に複雑なUIを、より小さく管理しやすいコンポーネントに分割することをお勧めします。

🛠️ 開発

プロジェクト構造

mcp/ ├── app/ │ └── components/ # Core UI components ├── types/ # TypeScript type definitions ├── lib/ # Utility functions └── public/ # Static assets

主要コンポーネント

  • IdeInstructions : さまざまな IDE のセットアップ手順
  • ApiKeySection : APIキー管理インターフェース
  • WelcomeOnboarding : 新規ユーザー向けのオンボーディングフロー

🤝 貢献する

貢献を歓迎します！ Discordコミュニティに参加してフィードバックを提供し、Magic Agentの改善にご協力ください。ソースコードはGitHubで公開されています。

👥 コミュニティとサポート

⚠️ ベータ版のお知らせ

Magic Agentは現在ベータ版です。期間中はすべての機能を無料でご利用いただけます。プラットフォームの改善にご協力いただき、皆様からのフィードバックに感謝いたします。

📝 ライセンス

MITライセンス

🙏 謝辞

  • ベータテスターとコミュニティメンバーに感謝します
  • Cursor、Windsurf、Clineチームの協力に感謝します。
  • コンポーネントのインスピレーションを得るための21st.devとの統合
  • ロゴとブランド資産の統合のためのSVGL

詳細については、 Discord コミュニティに参加するか、 21st.dev/magicにアクセスしてください。

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

自然言語による記述から最新の UI コンポーネントを生成する AI 搭載ツール。一般的な IDE と統合して UI 開発ワークフローを効率化します。

  1. 🌟 特徴
    1. 🎯 仕組み
      1. 🚀 はじめに
        1. 前提条件
        2. インストール
      2. ❓ よくある質問
        1. Magic AI Agent はコードベースをどのように処理しますか?
        2. 生成されたコンポーネントをカスタマイズできますか?
        3. 世代が足りなくなったらどうなりますか?
        4. 新しいコンポーネントはどれくらい早く 21st.dev のライブラリに追加されますか?
        5. コンポーネントの複雑さに制限はありますか?
      3. 🛠️ 開発
        1. プロジェクト構造
        2. 主要コンポーネント
      4. 🤝 貢献する
        1. 👥 コミュニティとサポート
          1. ⚠️ ベータ版のお知らせ
            1. 📝 ライセンス
              1. 🙏 謝辞

                Related Resources

                Related MCP Servers

                • AI Development Assistant MCP Server

                  kleneway
                  -
                  security
                  A
                  license
                  -
                  quality
                  An AI-powered development toolkit for Cursor providing intelligent coding assistance through advanced reasoning, UI screenshot analysis, and code review tools.
                  Last updated -
                  932
                  240
                  TypeScript
                  MIT License

                • Feature-Discussion MCP Server

                  squirrelogic
                  A
                  security
                  A
                  license
                  A
                  quality
                  Facilitates interactive feature discussions with AI guidance, maintaining context and providing intelligent recommendations for implementation, architecture, and best practices in software development.
                  Last updated -
                  2
                  1
                  JavaScript
                  MIT License
                  • Apple

                • Make MCP Server

                  integromat
                  A
                  security
                  A
                  license
                  A
                  quality
                  Transform your Make scenarios into callable tools for AI assistants. Leverage your existing automation workflows while enabling AI systems to trigger and interact with them seamlessly.
                  Last updated -
                  6
                  244
                  53
                  TypeScript
                  MIT License

                • SupaUI MCP Server

                  buoooou
                  A
                  security
                  F
                  license
                  A
                  quality
                  A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
                  Last updated -
                  3
                  19
                  4
                  TypeScript

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/21st-dev/magic-mcp'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server