Magic MCP: モダンなUIコンポーネントを生成するMCPサービス

はじめに

マジック エムシーピー 21st.devは21st.devチームによって開発されたフロントエンド開発者向けのAI駆動ツールです。自然言語の記述からモダンなUIコンポーネントをオンザフライで生成し、Cursor、WindSurf、VS Code（Clineプラグイン）などの開発環境に統合されている。ユーザーは、「モダンなナビゲーションバーを作成する」といった簡単な要件を入力すると、Magic MCPはそれを基にモダンなUIコンポーネントを生成します。 反応 コンポーネントコードにTailwind CSSスタイルとTypeScriptをサポート。このツールは完全にオープンソースで、GitHubでホストされており、開発者は無料で使用できます。ライブプレビューと豊富なコンポーネントライブラリを提供し、ラピッドプロトタイピングやチーム開発を支援します。

機能一覧

• 自然言語生成コンポーネント要件をテキストで記述し、Reactコンポーネントのコードを自動生成します。
• マルチIDEサポートCursor、WindSurf、VS Code (Cline Beta)とのシームレスな統合。
• モダン・コンポーネント・ライブラリ21st.dev.にインスパイアされたカスタマイズ可能なコンポーネントを多数提供しています。
• リアルタイム・プレビュー: コンポーネント生成時に効果を即座に表示し、デバッグを容易にします。
• TypeScriptのサポート: 生成されたコードが型安全で、エラーを減らすことを保証する。
• SVGLの統合プロフェッショナルなブランドアイコンとロゴをコンポーネントに直接埋め込みます。
• コンポーネントの強化（近日発表）既存のコンポーネントに高度な機能とアニメーションを追加します。

ヘルプの使用

設置プロセス

Magic MCPは、次の例に示すように、サポートされているIDEにインストールする必要があります。 カーソル 例えば、他のIDE（例えば ウインドサーフ (またはVS Code + Cline）も同様にインストールされる：

1. 環境を整える
   コンピューターにNode.js（最新のLTSバージョン、例えばv22を推奨）とnpmがインストールされていることを確認してください。
2. APIキーの取得
   21st.devのウェブサイトにアクセスし、ログインして "API "ページに移動し、新規の twenty_first_api_key.キーがなくても試すことはできるが、機能は制限される。
3. マジックMCPのインストール
   ターミナルを開き、以下のコマンドを実行する：

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{"TWENTY_FIRST_API_KEY"}"

そうしれいかん APIキー キーを公式ウェブサイトから入手したものと交換する。

4. カーソルIDEの設定
   CursorのSettingsを開き、Model Context Protocol (MCP)オプションを見つけ、以下の設定を追加する：

{
"mcpServers"：{。
"magic": {
"命令": "npx"、
"args": ["-y","@smithery/cli@latest", "install","@21st-dev/magic-mcp","--client", "cursor"]、
"env": {"TWENTY_FIRST_API_KEY": "あなたのAPIキー"}。

}
}

保存してIDEを再起動します。

5. インストールの確認
   カーソルチャットウィンドウで /ウイCreating Components with Magic MCP "というプロンプトが表示されたら、インストールは成功です。

ウインドサーフ コンフィギュレーション

ある ~/.codeium/windsurf/mcp_config.json 追加する：

{
"mcpServers"：{。
"magic": {
"command": "npx"、
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "windsurf"], {
"env": {"TWENTY_FIRST_API_KEY": "あなたのAPIキー"}。
}
}
}

VSコード + クライン・コンフィギュレーション（ベータ版）

ある クライン のMCPコンフィギュレーションに追加される。

{
"mcpServers"：{。
"magic": {
"command": "npx"、
"args": ["-y", "@smithery/cli@latest", "install", "@21st-dev/magic-mcp", "--client", "cline"], {
"env": {"TWENTY_FIRST_API_KEY": "あなたのAPIキー"}。
}
}
}

主な機能の使い方

UIコンポーネントの生成

• 手続き::
  1. IDEのチャットウィンドウで /ウイのような要件が続く。 /ui 検索機能付きナビゲーションバーの作成.
  2. Magic MCPは、ウィンドウに直接表示されるReactコンポーネントコードを生成します。
  3. コードの挿入」をクリックすると、コードがプロジェクト・ファイルに自動的に追加されます。
• 詳細説明::
  このコンポーネントはデフォルトでTailwind CSSスタイルとTypeScriptを使用しており、コードは手動で調整することができる。入力内容が具体的であればあるほど、より適切な結果が得られます。
• 典型例::
  インプット：/青いボタン
  出力：

  const ブルーボタン = () => {
  return (
  ボタンをクリックしてください。
  クリックしてください
  </button
  );
  };
  エクスポート default BlueButton.
  

リアルタイム・プレビュー

• 手続き::
  1. コンポーネントの生成後、IDEはコンポーネントの効果を示すプレビュー・ウィンドウを表示します。
  2. コードを修正すると、プレビューは自動的に更新されます。
• 詳細説明::
  ローカルプロジェクトが実行されていない場合、プレビューはMagic MCPのビルトインレンダリングに依存するため、実際の結果と若干異なる場合があります。

SVGLアイコンを使う

• 手続き::
  1. 輸入 /ロゴ ブランド名例 /ロゴ ツイッター.
  2. このツールはアイコンコードをSVGまたはJSX形式で返します。
  3. コンポーネントで使用するコピー。
• 典型例::
  インプット：/ロゴ GitHub
  出力：

  const GitHubIcon = () => (
   <!
   </svg
  </svg
  );
  

作業工程詳細

1. プロジェクトの開始
   フロントエンド・プロジェクトが作成されていることを確認します（Reactアプリの作成など）。magic MCPはプロジェクト構造に基づいてコードを生成します。
2. 入力要件
   IDEでは、"a responsive card list "のような自然言語による説明を使用してください。より明確な説明は、より正確な結果につながります。
3. 調整コード
   生成後のコードをチェックし、要件を満たすようにスタイルやロジックを修正する。
4. 動作試験
   コードを保存し、プロジェクトを実行する（例 npmスタート)、効果を確認した。

ほら

• 1ヶ月あたりの世代数に制限があり、制限を超えると有料プランにアップグレードする必要があります。
• 複雑なコンポーネントは、複数の単純な要件生成に分割することが推奨される。
• Discordのコミュニティに参加して質問しよう。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   開発者がUIエフェクトを表示する必要がある場合、Magic MCPはコンポーネントを素早く生成することで時間を節約します。
2. チーム・コードの再利用
   チームは21st.devを通じてコンポーネントを共有し、スタイルの標準化と効率化を図る。
3. フロントエンド技術を学ぶ
   初心者は、標準的なコードを生成し、変更しながら学習し、Reactを素早く使い始めるために使用する。

品質保証

1. マジックMCPは無料ですか？
   そう、GitHubにオープンソースで公開されており、基本機能は無料、高度な機能を利用するにはAPIキーと有料プランが必要だ。
2. 生成されたコードは市販されていますか？
   はい、コードはユーザーが所有し、どのプロジェクトにも使用できます。
3. どのIDEに対応していますか？
   現在、Cursor、WindSurf、VS Code (Cline Beta)をサポートしています。