Ignite UI CLI MCP は、AI アシスタントが {ProductName} アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問を行えるようにする Model Context Protocol (MCP) サーバーです。Ignite UI CLI MCP をエディター、GitHub リポジトリ、またはデスクトップ AI クライアントに接続し、やりたいことを説明するだけで、アシスタントが CLI ツールを使用してくれます。
+Ignite UI CLI MCP は、AI アシスタントが {ProductName} アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問に回答できるようにする Model Context Protocol (MCP) サーバーです。Ignite UI CLI MCP をエディター、GitHub リポジトリ、またはデスクトップ AI クライアントに接続し、やりたいことを伝えると、アシスタントが CLI ツールを使用します。
## 概要 -Ignite UI CLI MCP は、AI アシスタントがチャットまたはエージェント モードを介して、Ignite UI CLI のプロジェクト スキャフォールディング、コンポーネント生成、プロジェクト変更、ドキュメント対応ワークフローに直接アクセスできるようにします。サーバーは Ignite UI テーマ設定 MCP と連携します。CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、テーマ設定 MCP がパレット、テーマ、トークン、スタイリングを処理します。ほとんどのチームは、同じ AI クライアント セッションで両方のサーバーを接続します。 - -Ignite UI CLI MCP は Ignite UI テーマ設定 MCP と連携します。実際には、CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、テーマ設定 MCP がパレット、テーマ、トークン、スタイリング ワークフローを処理します。ほとんどのチームは両方のサーバーを接続します。 +Ignite UI CLI MCP は、チャットまたはエージェント モードを通じて、Ignite UI CLI プロジェクトのスキャフォールディング、コンポーネント生成、プロジェクト変更、ドキュメント対応ワークフローへの直接アクセスを AI アシスタントに提供します。サーバーは Ignite UI Theming MCP と連携して動作します。CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、Theming MCP がパレット、テーマ、トークン、スタイリングを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアント セッションに接続させます。 -推奨されるセットアップ パスは、最初に Ignite UI CLI から始めることです。このパスはプロジェクトを作成し、必要なパッケージをインストールし、VS Code の初期 MCP 設定を書き込みます。空のフォルダーから始めて MCP を通じてアシスタントにプロジェクトを作成させることも、既に存在するプロジェクトに MCP を接続することもできます。 +推奨セットアップ手順は、最初に Ignite UI CLI から始めることです。この手順では、Ignite UI CLI がプロジェクトを作成し、必要なパッケージをインストールし、VS Code 用の MCP 構成を初期設定します。また、空のフォルダーでアシスタントが MCP を通じてプロジェクトを作成するところから開始することも、既存のプロジェクトに MCP を接続することもできます。 -セットアップ後の完全なビルド フローを確認したい場合は、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 +セットアップ後の完全なビルド フローを確認したい場合は、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 -セットアップ後の完全なビルド フローを確認したい場合は、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 +セットアップ後の完全なビルド フローを確認したい場合は、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 **接続後に試すプロンプトの例:** -> _"{Platform} 用 Ignite UI の新しいプロジェクトをこのフォルダーに作成し、推奨されるデフォルト設定を使用して、サンプル データを含むスターター ダッシュボード ページを追加してください。"_ +> _「このフォルダーに新しい Ignite UI for {Platform} プロジェクトを作成し、推奨されるデフォルトを使用して、サンプル データを含むスターター ダッシュボード ページを追加して」_ -> _"このプロジェクトに新しいグリッド ページを追加し、サンプル データに接続し、現在のナビゲーション構造を維持してください。"_ +> _「このプロジェクトに新しいグリッド ページを追加し、サンプル データに接続して、現在のナビゲーション構造を維持して」_ -> _"コンボ コンポーネントが公開するプロパティとイベントは何ですか？また、検索可能なドロップダウンに最も役立つものはどれですか？"_ +> _「コンボ コンポーネントが公開するプロパティとイベントは何ですか? 検索可能なドロップダウンに最も役立つものはどれですか?」_ -> _"既存のプロジェクトを更新してサイド ナビゲーション レイアウトを追加し、現在のページとルートを保持してください。"_ +> _「既存のプロジェクトを更新してサイド ナビゲーション レイアウトを追加し、現在のページとルートを維持して」_ ## 前提条件 -MCP サーバーを設定する前に、次のものを用意してください: +MCP サーバーを構成する前に、以下の前提条件が満たされていることを確認してください。 -- **Node.js** (v18 以降) がインストール済み - これによりサーバーの起動に使用する `npx` コマンドが提供されます。 -- **MCP サポートのある AI クライアント** - たとえば、VS Code with GitHub Copilot、GitHub Copilot クラウド エージェント、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを含む JetBrains IDE。 -- 初回のサーバー起動時の `npx` パッケージ解決のためのインターネット アクセス。 -- 次のいずれかの開始点: +- **Node.js** (v18 以降) がインストールされていること — これにより、サーバーの起動に使用される `npx` コマンドが提供されます。 +- **MCP サポートを備えた AI クライアント** — 例: VS Code と GitHub Copilot、GitHub Copilot クラウド エージェント、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。 +- 最初にサーバーが起動するときの `npx` パッケージ解決のためのインターネット アクセス。 +- 以下のいずれかの開始点: - 新しいプロジェクト用の空のフォルダー - Ignite UI CLI で作成したプロジェクト - 引き続き作業する既存の {ProductName} プロジェクト -同じクライアント セッションでテーマ設定ツールを使用したい場合、`igniteui-theming` がプロジェクトでまだ利用できない場合は次を実行してください: +同じクライアント セッションでテーマ ツールも使用したいが、`igniteui-theming` がまだプロジェクトで利用できない場合は、次のコマンドを実行します。 ```bash npm install igniteui-theming ``` -## AI クライアント向け Ignite UI CLI MCP の設定 +## AI クライアント用の Ignite UI CLI MCP の構成 -MCP サーバーは `npx` で起動します。Node.js と `igniteui-cli` パッケージへのアクセス以外に別途インストールは不要です。 +MCP サーバーは `npx` を通じて起動されます。Node.js と `igniteui-cli` パッケージへのアクセス以外に追加のインストールは必要ありません。 -正規の起動コマンドは次のとおりです: +正規の起動コマンドは次のとおりです。 ```bash npx -y igniteui-cli mcp ``` > [!NOTE] -> `-y` フラグは、手動操作なしにサーバーを起動できるように、`npx` にパッケージのダウンロード プロンプトを自動確認するよう指示します。 +> `-y` フラグは、`npx` にパッケージ ダウンロード プロンプトを自動確認するように指示するため、サーバーは手動介入なしで起動できます。 -### セットアップ パスの選択 +### セットアップ手順を選択する -Ignite UI CLI MCP を始めるには 3 つの方法があります: +Ignite UI CLI MCP を開始するには 3 つの方法があります。 > **推奨 - CLI ファースト** - `ig new` または対応する `npx --package igniteui-cli igniteui new` コマンドを使用して、最初に Ignite UI CLI でプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、VS Code 用の `.vscode/mcp.json` を自動的に書き込むため、これが最も簡単なセットアップです。その後、生成された MCP 設定を確認し、AI クライアントでプロジェクトを開くだけです。 + 最初に `ig new` または `npx --package igniteui-cli igniteui new` コマンドにより Ignite UI CLI を使ってプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、VS Code 用の `.vscode/mcp.json` を自動的に作成するため、これが最も簡単なセットアップです。その後、生成された MCP 構成を確認し、AI クライアントでプロジェクトを開くだけです。 > **空のフォルダー** - 完全に空のフォルダーから始め、MCP 設定を手動で追加してから、チャットを通じてアシスタントにプロジェクトを作成させます。このパスは、最初に CLI を自分で実行するのではなく、MCP に最初のプロジェクト作成ステップを主導させたい場合に便利です。 + 完全に空のフォルダーから始め、MCP 構成を手動で追加してから、アシスタントにチャットを通じてプロジェクトを作成するよう依頼します。このパスは、最初に CLI を自分で実行するのではなく、MCP でプロジェクト作成フローを最初から動かしたい場合に便利です。 -> **既存のプロジェクト** - 既存のプロジェクトに MCP 設定を追加し、現在のコードベースで作業を続けます。このパスは、プロジェクトが既に存在していて、何かを再生成せずにプロジェクトの変更、コンポーネント作業、ドキュメントの質問をアシスタントに手伝ってもらいたい場合に便利です。 +> **既存プロジェクト** + 既存のプロジェクトに MCP 構成を追加し、現在のコードベースで作業を続けます。このパスは、プロジェクトが既に存在し、プロジェクトの変更、コンポーネント作業、ドキュメントへの質問を、何も再生成することなくアシスタントに支援させたい場合に便利です。 -3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです: +3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです。 -- **CLI ファースト** パスでは、Ignite UI CLI がプロジェクトを作成し、最初の MCP 設定を準備します -- **空のフォルダー** パスでは、最初に MCP 設定を作成し、その後アシスタントにプロジェクトを作成させます -- **既存プロジェクト** パスでは、MCP を現在のコードベースに接続し、既にあるものから続けます +- **CLI ファースト**の手順では、Ignite UI CLI がプロジェクトを作成し、最初の MCP 構成を準備します +- **空のフォルダー**の手順では、最初に MCP 構成を作成し、その後アシスタントにプロジェクトを作成させます +- **既存プロジェクト**の手順では、MCP を現在のコードベースにアタッチし、既存のものから続行します -いずれの場合も、MCP サーバーが接続されて AI クライアントに表示されると、アシスタントは同じセッションで作業を続けることができます。 +いずれの場合も、MCP サーバーが接続されて AI クライアントで表示されたら、アシスタントは同じセッションで作業を続けることができます。 -最初に Ignite UI CLI でプロジェクトを作成する場合は、次のいずれかの方法で CLI を実行できます: +最初に Ignite UI CLI でプロジェクトを作成する場合は、次のいずれかの方法で CLI を実行できます。 - **グローバル インストール** @@ -100,7 +98,7 @@ Ignite UI CLI MCP を始めるには 3 つの方法があります: npm install -g igniteui-cli ``` - これにより、任意のターミナル セッションで `ig` コマンドが使用できるようになり、プロジェクトを定期的に作成およびスキャフォールディングする場合は最も明確なオプションです。 + これにより、任意のターミナル セッションで `ig` コマンドが使用できるようになります。定期的にプロジェクトの作成あるいはスキャフォールディングを行う場合は、最も明確なオプションです。 - **グローバル インストールなし** @@ -108,30 +106,30 @@ Ignite UI CLI MCP を始めるには 3 つの方法があります: npx --package igniteui-cli igniteui new ``` - これは、グローバルな `ig` コマンドの代わりに `npx` を通じて CLI を実行します。 + グローバルな `ig` コマンドの代わりに `npx` を通じて CLI を実行します。 -**CLI ファースト** パスの場合、ガイド モードまたは直接コマンドでプロジェクトを作成できます。 +**CLI ファースト**の手順の場合、ガイド モードまたは直接コマンドでプロジェクトを作成できます。 -ガイド モードは、CLI が利用可能なオプションを順を追って案内する場合に使用します: +CLI に利用可能なオプションを案内させたい場合はガイド モードを使用します。 ```bash ig new ``` -対応する `npx` 形式: +`npx` で実行する場合: ```bash npx --package igniteui-cli igniteui new ``` -プロジェクト設定が既にわかっている場合は、直接コマンドを使用します: +プロジェクト設定を既に知っている場合は直接コマンドを使用します。 ```bash ig new my-app --framework=angular --type=igx-ts --template=empty ``` -対応する `npx` 形式: +`npx` で実行する場合: ```bash npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty @@ -143,7 +141,7 @@ npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts ig new my-app --framework=react ``` -対応する `npx` 形式: +`npx` で実行する場合: ```bash npx --package igniteui-cli igniteui new my-app --framework=react @@ -155,28 +153,28 @@ npx --package igniteui-cli igniteui new my-app --framework=react ig new my-app --framework=webcomponents ``` -対応する `npx` 形式: +`npx` で実行する場合: ```bash npx --package igniteui-cli igniteui new my-app --framework=webcomponents ``` -ガイド モードでは、Ignite UI CLI がプロジェクト名、フレームワーク、テンプレート、テーマ、コンポーネントを追加するかセットアップを完了するかを尋ねます。直接モードでは、コマンド自体にフレームワークとサポートされているオプションを指定します。 +ガイド モードでは、Ignite UI CLI は、プロジェクト名、フレームワーク、テンプレート、テーマ、コンポーネントを追加するか、セットアップを完了するか、を対話形式で聞いてきます。直接モードでは、フレームワークとサポートされているオプションをコマンド自体に指定します。 -プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、Angular 向けの Ignite UI CLI ドキュメントを参照してください。 +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、Angular の Ignite UI CLI ドキュメントを参照してください。 -プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、「[Ignite UI CLI](../general-cli-overview.md)」を参照してください。 +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、[Ignite UI CLI](../general-cli-overview.md) を参照してください。 -プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、「[Ignite UI CLI](../general-cli-overview.md)」を参照してください。 +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、[Ignite UI CLI](../general-cli-overview.md) を参照してください。 ### VS Code -VS Code の GitHub Copilot は、ワークスペース レベルの設定ファイルを通じて MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します: +VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します。 ```json { @@ -193,16 +191,16 @@ VS Code の GitHub Copilot は、ワークスペース レベルの設定ファ } ``` -Ignite UI CLI でプロジェクトを最初に作成した場合は、生成された `.vscode/mcp.json` を確認し、両方のエントリが存在することを確認してください。 +最初に Ignite UI CLI でプロジェクトを作成した場合は、生成された `.vscode/mcp.json` を確認し、両方のエントリが存在することを確認してください。 -保存後、GitHub Copilot チャット パネルを開き、**エージェント** モードに切り替えると、Ignite UI CLI MCP ツールが利用可能になります。 +保存したら、GitHub Copilot チャット パネルを開き、**Agent** モードに切り替えると、Ignite UI CLI MCP ツールが利用できるようになります。 > [!NOTE] -> VS Code の MCP サポートには GitHub Copilot と VS Code 1.99 以降が必要です。 +> VS Code での MCP サポートには、GitHub Copilot と VS Code 1.99 以降が必要です。 ### Cursor -Cursor はプロジェクト スコープの MCP 設定をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します: +Cursor はプロジェクト スコープの MCP 構成をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します。 ```json { @@ -219,14 +217,14 @@ Cursor はプロジェクト スコープの MCP 設定をサポートします } ``` -新しい Cursor チャット セッションを開くと、サーバーが自動的に検出されます。 +サーバーは、新しい Cursor チャット セッションを開くと自動的に選択されます。 > [!NOTE] -> Cursor の **Settings → MCP** からグローバルに MCP サーバーを設定することもできます。 +> Cursor の **Settings → MCP** を介してグローバルに MCP サーバーを構成することもできます。 ### Claude Desktop -Claude Desktop 設定ファイルにサーバーを追加します: +サーバーを Claude Desktop 構成ファイルに追加します。 - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` @@ -246,11 +244,11 @@ Claude Desktop 設定ファイルにサーバーを追加します: } ``` -保存後、Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることを確認できます。 +保存後に Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることが確認されます。 ### Claude Code -Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを通じて MCP サーバーをサポートします。チームと設定を共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します: +Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを介して MCP サーバーをサポートします。チームと構成を共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します。 ```json { @@ -267,23 +265,23 @@ Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファ } ``` -あるいは、ローカル環境のみにコマンドラインでサーバーを追加することもできます: +または、ローカル環境専用にコマンド ラインでサーバーを追加できます。 ```bash claude mcp add igniteui-cli -- npx -y igniteui-cli mcp claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp ``` -Claude Code 内で `/mcp` コマンドを使用してサーバーが接続されていることを確認します。 +Claude Code 内で `/mcp` コマンドを使用して、サーバーが接続されていることを確認します。 ### JetBrains IDE -JetBrains AI Assistant は IDE 設定を通じて MCP サーバーをサポートします: +JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。 1. **Settings** (macOS では **Preferences**) を開きます。 2. **Tools → AI Assistant → Model Context Protocol (MCP)** に移動します。 3. **+ Add** をクリックし、**As JSON** を選択するかフォーム フィールドを使用します。 -4. 次の設定を入力します: +4. 次の構成を入力します。 ```json { @@ -303,11 +301,11 @@ JetBrains AI Assistant は IDE 設定を通じて MCP サーバーをサポー 5. **OK** をクリックして AI Assistant を再起動します。 > [!NOTE] -> MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされ有効になっている必要があります。 +> MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 ### その他の MCP クライアント -その他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します: +他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します。 ```bash npx -y igniteui-cli mcp @@ -316,15 +314,15 @@ npx -y igniteui-theming igniteui-theming-mcp ### GitHub -GitHub Copilot クラウド エージェントは、リポジトリ レベルの MCP 設定をサポートします。リポジトリで: +GitHub Copilot クラウド エージェントはリポジトリ レベルの MCP 構成をサポートします。リポジトリで次の操作を行います。 -1. メイン リポジトリ ページを開きます。 +1. メインのリポジトリ ページを開きます。 2. **Settings** をクリックします。 -3. サイドバーで **Copilot** から **Cloud agent** に移動します。 +3. サイドバーで **Copilot** → **Cloud agent** に移動します。 4. **MCP configuration** セクションに JSON を貼り付けます。 5. **Save** をクリックします。 -次のようなリポジトリ設定を使用します: +次のようなリポジトリ構成を使用します。 ```json { @@ -345,127 +343,127 @@ GitHub Copilot クラウド エージェントは、リポジトリ レベルの } ``` -このセットアップは、GitHub クラウド エージェントがリポジトリ コンテキストから直接同じ CLI MCP とテーマ設定 MCP ツールを使用したい場合に便利です。 +このセットアップは、GitHub クラウド エージェントがリポジトリ コンテキストから直接同じ CLI MCP と Theming MCP ツールを使用する場合に便利です。 ## 利用可能なツール -MCP サーバーは、AI がプロンプトに基づいて自動的に使用するツールのセットを公開します。これらのツールを直接呼び出すことはありません。チャットでやりたいことを説明すると、アシスタントが適切なものを選びます。このテーブルは、開始前に利用可能なものを確認するためのものです。 +MCP サーバーは、AI がプロンプトに基づいて自動的に使用するツールのセットを公開しています。これらのツールを直接呼び出す必要はありません。チャットで必要なものを説明すれば、アシスタントが適切なツールを選択します。このテーブルは、開始前に何が利用可能かを把握するためのものです。 -現在のパラメーターを含むライブ リストを取得するには、次のように尋ねます: +現在のパラメーターを含むライブ リストを取得するには、次のように質問します。 -> _"Ignite UI CLI MCP が提供するツールは何ですか？"_ +> _「Ignite UI CLI MCP が提供するツールは何ですか?」_ -各ツールの概要を以下に示します: +各ツールの概要を以下に示します。 | ツール | 説明 | |------|-------------| -| `list_components` | フレームワークの利用可能な Ignite UI コンポーネント ドキュメントを一覧表示します。オプションのキーワード フィルター (名前、キーワード、サマリーに対する大文字小文字を区別しない部分文字列一致) を受け付けます。 | -| `get_doc` | ケバブケース名 (例: `grid-editing`、`combo-overview`) で特定のコンポーネント ドキュメントの完全な Markdown コンテンツを取得します。コード サンプル、テーブル、リンクを含みます。 | -| `search_docs` | フレームワークの Ignite UI ドキュメント全体をフルテキスト検索します。抜粋付きで上位 20 件のランク付けされた結果を返します。 | -| `get_project_setup_guide` | 特定のフレームワークで新しいプロジェクトを作成するためのプロジェクト セットアップ ガイドを返します。CLI 手順とインストール手順を含みます。 | -| `search_api` | Angular、React、Web Components 全体でキーワードまたはコンポーネント名で API エントリを検索します。 | -| `get_api_reference` | 特定のコンポーネントまたはクラスの完全な API リファレンスを返します。プロパティ、メソッド、イベントを含みます。Angular、React、Web Components をサポートします。 | +| `list_components` | フレームワークの利用可能な Ignite UI コンポーネント ドキュメントをリストします。オプションのキーワード フィルター (名前、キーワード、概要に対する大文字と小文字を区別しない部分文字列一致) を受け入れます。 | +| `get_doc` | ケバブ ケース名 (例: `grid-editing`、`combo-overview`) で特定のコンポーネント ドキュメントの完全なマークダウン コンテンツを取得します。コード サンプル、テーブル、リンクを含みます。 | +| `search_docs` | フレームワークの Ignite UI ドキュメント全体でフルテキスト検索を実行します。抜粋付きで最大 20 件のランク付けされた結果を返します。 | +| `get_project_setup_guide` | CLI 手順とインストール手順を含む、特定のフレームワークで新しいプロジェクトを作成するためのプロジェクト セットアップ ガイドを返します。 | +| `search_api` | Angular、React、Web Components 全体でキーワードまたはコンポーネント名によって API エントリを検索します。 | +| `get_api_reference` | プロパティ、メソッド、イベントを含む、特定のコンポーネントまたはクラスの完全な API リファレンスを返します。Angular、React、Web Components をサポートします。 | -大まかに言えば、CLI MCP ツールは次のことを支援します: +まとめると、CLI MCP ツールは以下を支援します。 - 新しいプロジェクトの作成 -- 既存のプロジェクトでの作業 +- 既存プロジェクトでの作業 - コンポーネントの追加と変更 -- プロジェクト構造と設定の更新 +- プロジェクト構造と構成の更新 - ドキュメントと API の質問への回答 > [!NOTE] -> フレームワーク検出はコンポーネント プレフィックスを使用します: Angular には `Igx`、React には `Igr`、Web Components には `Igc`、Blazor には `Igb`。アシスタントは、開いているファイルまたはプロンプト コンテキストから適切なフレームワークを自動的に選択します。 +> フレームワークの検出にはコンポーネント名のプレフィックスを参照します: Angular は `Igx`、React は `Igr`、Web Components は `Igc`、Blazor は `Igb` です。アシスタントは、開いているファイルまたはプロンプト コンテキストから正しいフレームワークを自動的に選択します。 -テーマ設定サーバーは、スタイリング、テーマ、パレット、トークン ワークフローを同じクライアント セッションに追加します。 +テーマ サーバーは、同じクライアント セッションにスタイリング、テーマ、パレット、トークン ワークフローを追加します。 -主要な実践的ワークフローについては、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 +主要なハンズオン ワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 -主要な実践的ワークフローについては、「[Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md)」を参照してください。 +主要なハンズオン ワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 ## 一般的なワークフロー -以下のセットアップ シナリオは、各開始点をいつ使用するかを示しています。 +以下のセットアップ シナリオは、各開始点を使用するタイミングを示します。 -### CLI ファースト セットアップ +### CLI ファーストセットアップ -最速のガイド付きセットアップを希望し、`.vscode/mcp.json` を自動生成したい場合は、最初に Ignite UI CLI でプロジェクトを作成します。 +最も速いガイド付きセットアップが必要で、`.vscode/mcp.json` を自動生成したい場合は、最初に Ignite UI CLI でプロジェクトを作成します。 -シナリオ例: +シナリオの例: -- _"最初に Ignite UI CLI で新しいプロジェクトを作成し、生成されたプロジェクトを VS Code で開き、そこから MCP で続けたい。"_ -- _"React プロジェクトが欲しいことは既にわかっているので、CLI でプロジェクトを作成してから、MCP を使ってページとコンポーネントを追加したい。"_ +- _「最初に Ignite UI CLI で新しいプロジェクトを作成し、生成されたプロジェクトを VS Code で開き、そこから MCP で続ける」_ +- _「React プロジェクトが必要なので、CLI で作成してから MCP を使用してページとコンポーネントを追加する」_ -### 空のフォルダー セットアップ +### 空のフォルダーのセットアップ -MCP 設定を自分で追加した後、アシスタントにチャットからプロジェクトを作成させたい場合は、空のフォルダーから始めます。 +自分で MCP 構成を追加した後、アシスタントにチャットからプロジェクトを作成させたい場合は、空のフォルダーから始めます。 -シナリオ例: +シナリオの例: -- _"完全に空のフォルダーがあり、MCP が接続された後にアシスタントにチャットからプロジェクト全体を作成してほしい。"_ -- _"最初に Ignite UI CLI を手動で実行したくない。MCP に最初のプロジェクト作成ステップを主導してほしい。"_ +- _「完全に空のフォルダーがあり、MCP が接続された後にアシスタントにチャットからプロジェクト全体を作成させる」_ +- _「最初に Ignite UI CLI を手動で実行したくない。MCP で最初のプロジェクト作成ステップを動かしたい」_ -### 既存プロジェクト セットアップ +### 既存プロジェクトのセットアップ -現在のコードベースを維持し、プロジェクトの変更、コンポーネント作業、ドキュメントの質問にアシスタントを使いたい場合は、既存のプロジェクトに MCP を接続します。 +現在のコードベースを維持してアシスタントにプロジェクトの変更、コンポーネント作業、ドキュメントの質問を支援させたい場合は、MCP を既存のプロジェクトに接続します。 -シナリオ例: +シナリオの例: -- _"既にプロジェクトがあり、アシスタントがページとコンポーネントを更新できるように MCP を追加したいだけだ。"_ -- _"プロジェクトは既に存在しており、現在のコードベースで作業しながら主にドキュメントと API の質問をしたい。"_ +- _「プロジェクトは既にあり、アシスタントにページとコンポーネントの更新を支援させるためだけに MCP を追加したい」_ +- _「プロジェクトは既に存在し、主に現在のコードベースで作業しながらドキュメントと API の質問をしたい」_ ## トラブルシューティング **`npx` が認識されない** -Node.js がインストールされていないか、現在のターミナル環境で利用できません。[nodejs.org](https://nodejs.org) から Node.js をインストールし、`node --version` で確認してください。 +Node.js がインストールされていないか、現在のターミナル環境で利用できません。[nodejs.org](https://nodejs.org) から Node.js をインストールし、`node --version` で確認します。 **`ig` が認識されない** -グローバルな `ig` コマンドを使用したい場合は、最初に `npm install -g igniteui-cli` で Ignite UI CLI をインストールしてください。グローバル インストールが不要な場合は、代わりに `npx --package igniteui-cli igniteui ...` 形式を使用してください。 +グローバルな `ig` コマンドを使用したい場合は、最初に `npm install -g igniteui-cli` で Ignite UI CLI をインストールします。グローバル インストールが不要な場合は、代わりに `npx --package igniteui-cli igniteui ...` 形式を使用します。 -**設定を保存した後、MCP ツールが表示されない** +**構成を保存した後に MCP ツールが表示されない** -ワークスペースをリロードし、エディターを再度開くか、AI クライアントを再起動してください。一部のクライアントは新しい MCP 設定ファイルを検出するために完全な再起動が必要です。 +ワークスペースをリロードし、エディターを再起動するか、AI クライアントを再起動します。一部のクライアントでは、新しい MCP 構成ファイルを検出するために完全な再起動が必要です。 -**一方のサーバーが起動に失敗する** +**一方のサーバーが起動しない** -設定の内容がキー名と引数の順序を含め、例と完全に一致することを確認してください。 +構成コンテンツがキー名と引数の順序を含めて例と正確に一致していることを確認します。 -**プロジェクトは作成されたが、MCP 設定が VS Code でしか利用できない** +**プロジェクトは作成されたが、MCP 構成は VS Code のみで利用可能** -Ignite UI CLI は CLI ファースト パスで `.vscode/mcp.json` を書き込みます。Cursor、Claude Desktop、Claude Code、JetBrains、GitHub、またはその他の MCP クライアントを使用している場合は、同じサーバー エントリをそのクライアントの設定形式と場所にコピーしてください。 +Ignite UI CLI は CLI ファースト手順のプロジェクト新規作成において `.vscode/mcp.json` を書き込みます。Cursor、Claude Desktop、Claude Code、JetBrains、GitHub、または別の MCP クライアントを使用している場合は、同じサーバー エントリをそのクライアントの構成形式と場所にコピーします。 **アシスタントが間違ったフォルダーで作業しているか、プロジェクト ファイルが見つからない** -AI クライアントがプロジェクト ルートを指していることを確認してください。エディター ベースのクライアントを使用している場合は、プロジェクト ルート フォルダーを開いてください。デスクトップまたはチャット ファースト クライアントを使用している場合は、正しいプロジェクト フォルダーをセッション コンテキストとして利用できるようにしてください。 +AI クライアントがプロジェクト ルートを指していることを確認します。エディター ベースのクライアントを使用している場合は、プロジェクト ルート フォルダーを開きます。デスクトップまたはチャット ファーストのクライアントを使用している場合は、正しいプロジェクト フォルダーをセッション コンテキストとして使用できるようにします。 -**空のフォルダー セットアップが期待どおりに動作しない** +**空のフォルダーのセットアップが期待通りに動作しない** -開始前にフォルダーが実際に空であることを確認してください。フォルダーに既にプロジェクト ファイルが含まれている場合は、新しい空のワークスペースとして扱う代わりに、既存プロジェクト パスを使用してください。 +開始前にフォルダーが実際に空であることを確認します。フォルダーに既にプロジェクト ファイルが含まれている場合は、新しい空のワークスペースとして扱う代わりに、既存プロジェクトの手順を使用します。 -**GitHub MCP 設定が拒否される** +**GitHub MCP 構成が拒否される** -JSON が `mcpServers` 構造を使用していること、および各ローカル サーバー エントリに `type`、`command`、`args` が含まれていることを確認してください。`tools` フィールドを含める場合は、有効なツール名または `["*"]` を使用してください。 +JSON が `mcpServers` 構造を使用していること、および各ローカル サーバー エントリに `type`、`command`、`args` が含まれていることを確認します。`tools` フィールドを含める場合は、有効なツール名または `["*"]` を使用します。 ## その他のリソース -- [Ignite UI を使用した AI 支援開発](./ai-assisted-development-overview.md) -- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) -- [Ignite UI CLI MCP と Ignite UI テーマ設定 MCP を使用したアプリのエンドツーエンド構築](../general-how-to-mcp-e2e.md) +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) - [{ProductName} スキル](./skills.md) -- [Ignite UI テーマ設定 MCP](./theming-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) -コミュニティは常に活発で、新しいアイデアを歓迎しています。 +コミュニティに参加して新しいアイデアをご提案ください。 -- [{ProductName} **フォーラム**]({ForumsLink}) -- [{ProductName} **GitHub**]({GithubLink}) +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) diff --git a/doc/jp/components/ai/skills.md b/doc/jp/components/ai/skills.md index a48e58988..1f231952c 100644 --- a/doc/jp/components/ai/skills.md +++ b/doc/jp/components/ai/skills.md @@ -387,6 +387,9 @@ Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md) - {ProductName} で作業を開始 - Angular Schematics & Ignite UI CLI +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/doc/jp/components/ai/theming-mcp.md b/doc/jp/components/ai/theming-mcp.md index a4a507c00..f97760d51 100644 --- a/doc/jp/components/ai/theming-mcp.md +++ b/doc/jp/components/ai/theming-mcp.md @@ -21,6 +21,15 @@ _language: ja ほとんどのツールは、**Sass** または **CSS** 出力のいずれかを生成できます。Sass 出力がデフォルトで、`igniteui-theming` Sass モジュールと統合されます。CSS 出力は、すぐに使用できる CSS カスタム プロパティを生成し、**ローカル Sass ツールチェーンなしで**使用できます。サーバーがコンパイルを行います。 +Ignite UI Theming MCP は Ignite UI CLI MCP と連携します。実際には、Theming MCP はパレット、テーマ、トークン、タイポグラフィ、エレベーション、スタイリング ワークフローを処理し、CLI MCP はプロジェクト作成、プロジェクト変更、コンポーネント ワークフロー、ドキュメント指向のタスクを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアントに接続させます。 + + +セットアップ後の具体的な組み合わせワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 + + +セットアップ後の具体的な組み合わせワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 + + **接続後に試すプロンプトの例:** > 「プライマリ #2563eb とコーラル セカンダリ #f97316 を使用して、{Platform} アプリ用の完全な Material Design ダーク テーマを作成して」 @@ -382,7 +391,15 @@ ng add igniteui-angular ## その他のリソース + +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) + + +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) + +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) - [{ProductName} スキル](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +React の場合: + +```bash +ig new my-app --framework=react +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=react +``` + + + +Web Components の場合: + +```bash +ig new my-app --framework=webcomponents +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=webcomponents +``` + + +続いて行われる処理: + +- Ignite UI CLI がプロジェクト構造を作成します +- 必要なプロジェクト パッケージがインストールされます +- CLI を使ったセットアップ手順では、VS Code 用の `.vscode/mcp.json` も初期設定されます + +## ステップ 2: CLI MCP と Theming MCP を接続する + +プロジェクトを作成したら、両方の MCP サーバーが AI クライアントで利用可能であることを確認します。 + +### VS Code + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアント + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +構成を保存したら、AI クライアントを再起動して、`igniteui-cli` と `igniteui-theming` の両方の MCP サーバーが利用可能であることを確認します。 + +## ステップ 3: アシスタントにプロジェクトを確認させる + +両方の MCP サーバーが起動したら、新しいチャットを開き、アシスタントにプロジェクト レベルのコンテキストを提供することから始めます。 + +プロンプトの例: + +> _「このプロジェクトを確認し、機能の追加を開始する前に現在の構造を説明して」_ + +> _「作成されたもの、メイン エントリ ポイント、新しいページを追加する場所を教えて」_ + +続いて行われる処理: + +- CLI MCP が、生成された、あるいは既存のプロジェクトを検査します +- アシスタントが構造を要約します +- 次のステップのための共通の理解が得られます + +## ステップ 4: チャットを通じて実際の機能を追加する + +プロジェクト構造が明確になったら、具体的な機能を要求します。 + +プロンプトの例: + +> _「{ProductName} グリッドを使用した Orders ページを追加して。Order ID、Customer Name、Order Date、Total Amount の列を含め、サンプル データにグリッドをバインドして」_ + +追加のプロンプト: + +> _「Orders グリッドでフィルタリング、ソート、ページングを有効にして、ページ レイアウトをアプリの残りの部分と一致させて」_ + +続いて行われる処理: + +- CLI MCP が適切なページを追加または更新します +- アシスタントがコンポーネント コードを作成または更新します +- 機能が既存のアプリ構造に統合されます + +さらに小さな改良の指示を続けることができます。 + +> _「グリッドの上にシンプルなツールバーを追加し、レイアウトをコンパクトに保って」_ + +## ステップ 5: 同じセッションでドキュメントの質問をする + +コンポーネント API を調べるために会話を離れる必要はありません。 + +プロンプトの例: + +> _「{Platform} グリッドがサポートするフィルタリング オプションは何ですか? シンプルな注文テーブルに最も適したものはどれですか?」_ + +> _「コンボ コンポーネントが公開するイベントは何ですか? 選択変更にはどれを使うべきですか?」_ + +> _「サイド ナビゲーション レイアウトに最も適した {ProductName} コンポーネントはどれですか? その理由は?」_ + +続いて行われる処理: + +- CLI MCP がドキュメント対応ツールを使用して質問に回答します +- すぐに実装要求を続けることができます + +例えば: + +> _「推奨されるフィルタリング アプローチを現在の Orders グリッドに適用して」_ + +## ステップ 6: カスタム テーマを適用する + +アプリ構造とメイン機能が整ったら、同じチャットで Theming MCP に切り替えます。 + +プロンプトの例: + +> _「アプリにプロフェッショナルなテーマを適用して。深いブルーのプライマリ カラー、暖かいアンバーのセカンダリ カラーを使用し、間隔をコンパクトに保って」_ + +続いて行われる処理: + +- Theming MCP がパレットとテーマ構成を生成します +- アシスタントが適切なテーマまたはスタイル ファイルを更新します +- アプリのスタイリングを、現在の構造と一致した状態に維持します + +より具体的なプロンプトでテーマをさらに調整できます。 + +> _「グリッド ヘッダーにプライマリ カラーを使用し、行の高さを少し増やして、ページの残りの部分を視覚的にクリーンに保って」_ + +> _「グリッドのスタイリングを改良する前に、生成されたプライマリとセカンダリのパレット シェードを表示して」_ + +## ステップ 7: 反復を続ける + +このワークフローの最も強力な部分は、1 つの会話の中で、プロジェクト作業、ドキュメントの質問、テーマ設定、を自由に行き来できることです。 + +プロンプトの例: + +> _「現在の Orders ページ構造を維持しながら、レイアウトを簡略化してフィルタリング エリアをよりコンパクトにして」_ + +> _「現在のテーマを使用しながら、ダッシュボード カードとグリッドの間隔をアプリの残りの部分とより一致させて」_ + +> _「生成されたファイルを確認し、主なプロジェクト、コンポーネント、テーマの変更を説明して」_ + +続いて行われる処理: + +- CLI MCP がプロジェクトとコンポーネントの改良を処理します +- Theming MCP がテーマとトークンの改良を処理します +- ワークフロー全体の流れが途切れることなく、アシスタントがサポートします + +## トピックのまとめ + +このワークフローは、プロジェクトのセットアップ、コンポーネント作業、ドキュメントの検索、テーマ設定を 1 つのチャット セッションで行いたい場合に有効です。 + +以下の場合におすすめです: + +- 個々のコード スニペットではなく、実際のプロジェクト スキャフォールドから始めたい場合 +- 実装とドキュメントへの質問とを交互に行いたい場合 +- プロジェクト構造とビジュアル スタイリングを並行して改善していきたい場合 + +実際の運用では、プロジェクトとコンポーネントの変更に CLI MCP を使用し、必要に応じてドキュメントの質問のために立ち止まり、続けて Theming MCP を使用して生成結果を改良する流れが、同じ会話を離れることのない、最も効率的なパターンです。 + +## 関連トピック + +- [Ignite UI を使った AI 支援開発](ai/ai-assisted-development-overview.md) +- [{ProductName} スキル](ai/skills.md) +- [Ignite UI CLI MCP](ai/cli-mcp.md) +- [Ignite UI Theming MCP](ai/theming-mcp.md) + + + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink})