diff --git a/jp/components/ai/maker-framework.md b/jp/components/ai/maker-framework.md index 77ca612776..b4515ac882 100644 --- a/jp/components/ai/maker-framework.md +++ b/jp/components/ai/maker-framework.md @@ -68,23 +68,23 @@ Copilot Chat をエージェント モードに切り替え、ツール リス ### Claude Desktop 1. Claude Desktop の設定ファイルを開きます: - - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - - Windows: `%APPDATA%\Claude\claude_desktop_config.json` + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` 2. `mcpServers` ブロックに `maker` エントリを追加します: - ```json - { - "mcpServers": { - "maker": { - "command": "npx", - "args": ["-y", "@igniteui/maker-mcp", "--stdio"], - "env": { - "Executor__AIProviderKeys__Anthropic": "" - } - } - } - } - ``` + ```json + { + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } + } + ``` 3. Claude Desktop を再起動します。初回起動時にネイティブ バイナリがダウンロードされます (通常の接続で約 30 秒)。 diff --git a/jp/components/general/cli/getting-started-with-angular-schematics.md b/jp/components/general/cli/getting-started-with-angular-schematics.md index 78ad08ace8..7ff4bd3f5c 100644 --- a/jp/components/general/cli/getting-started-with-angular-schematics.md +++ b/jp/components/general/cli/getting-started-with-angular-schematics.md @@ -178,21 +178,138 @@ ng g @igniteui/angular-schematics:start ## AI アシスタント統合 -Ignite UI for Angular Schematics コレクションには、Ignite UI for Angular Agent Skills と Ignite UI MCP サーバーをプロジェクトに一括設定する `ai-config` schematic が含まれています。Ignite UI for Angular パッケージをインストールした後、プロジェクト ルートから以下のコマンドを実行してください。 +Ignite UI for Angular Schematics コレクションには、プロジェクトの AI コーディング アシスタント統合をセットアップする `ai-config` schematic が含まれています。1 つのコマンドで以下を実行します: + +- **MCP サーバーの設定** - 選択したコーディング アシスタント用の MCP 設定ファイルに、Ignite UI と Angular CLI MCP サーバー エントリを書き込みます +- **スキル ファイルのコピー** - Angular 固有のスキル ガイドをエージェント ディレクトリに追加します +- **インストラクション ファイルのセットアップ** - 各エージェントのインストラクション ファイルにプロジェクト固有のガイダンスを設定します + +Ignite UI for Angular パッケージをインストールした後、プロジェクト ルートから以下のコマンドを実行してください: ```cmd ng generate @igniteui/angular-schematics:ai-config ``` -これにより、Ignite UI for Angular Agent Skills が `.claude/skills/` にコピーされ、`@angular/cli`、`igniteui mcp`、`igniteui-theming-mcp` の 3 つの MCP サーバー エントリが `.vscode/mcp.json` に書き込まれます。ファイルが既に存在していて最新の状態であれば、コマンドは何も行いません。 +### フラグ リファレンス + +| フラグ | 値 | デフォルト | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | 対話形式でプロンプト; 非対話形式モードでは `generic` | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | 対話形式でプロンプト; 非対話形式モードでは `generic` + `claude` | + +### サポートされているコーディング アシスタント + +| コーディング アシスタント | 選択値 | 設定ファイル パス | ルート キー | +|-----------------|--------------|-------------|----------| +| Generic (Claude Code、VS Code など) | `generic` | `.mcp.json` | `mcpServers` | +| VS Code (GitHub Copilot) | `vscode` | `.vscode/mcp.json` | `servers` | +| Cursor | `cursor` | `.cursor/mcp.json` | `mcpServers` | +| Gemini | `gemini` | `.gemini/settings.json` | `mcpServers` | +| JetBrains Junie | `junie` | `.junie/mcp/mcp.json` | `mcpServers` | + +### サポートされている AI エージェント + +| エージェント | スキル ディレクトリ | インストラクション ファイル | +|-------|------------------|------------------| +| Generic | `.agents/skills` | `AGENTS.md` | +| Claude | `.claude/skills` | `.claude/CLAUDE.md` | +| Copilot | `.github/skills` | `.github/copilot-instructions.md` | +| Cursor | `.cursor/skills` | `.cursor/rules/cursor.mdc` | +| Codex | `.codex/skills` | `.codex/instructions.md` | +| Windsurf | `.windsurf/skills` | `.windsurf/rules/guidelines.md` | +| Gemini | `.gemini/skills` | `.gemini/GEMINI.md` | +| Junie | `.junie/skills` | `.junie/guidelines.md` | + +### 使用例 + +対話形式 - コーディング アシスタント、エージェントの順でプロンプトが表示されます: + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +非対話形式 - アシスタントとエージェントの両方を指定します: + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot +``` + +MCP 設定のみをスキップします: + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants none --agents claude generic +``` + +スキル ファイルとインストラクションのみをスキップします (MCP サーバーは引き続き設定されます): + +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants vscode --agents none +``` + +schematic は `ng add igniteui-angular` の一部として自動的に実行され、デフォルト値はエージェントに `["claude", "generic"]`、アシスタントに `["generic"]` が使用されます。 + +### MCP サーバー設定 + +schematic は、選択したコーディング アシスタントの設定ファイルに書き込みます (または既存のファイルにマージします)。既存のサードパーティ MCP サーバー エントリは常に保持されます - コマンドはマージするのみで、上書きしません。Angular schematic 経由で実行すると、Ignite UI サーバーと並んで追加の `angular-cli` MCP サーバー エントリが自動的に含まれます。 + +**Generic、Cursor、Gemini、Junie** (`.mcp.json` および同等のファイル、ルート キー `mcpServers`): + +```json +{ + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + }, + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +**VS Code / GitHub Copilot** (`.vscode/mcp.json`、ルート キー `servers`): + +```json +{ + "servers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + }, + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### スキル ファイル + +スキル ファイルは、各エージェントのスキル ディレクトリにコピーされる Angular 固有のガイドです。インストール済みの Ignite UI パッケージから取得され、schematic を実行するたびに同期されます - 既存のファイルはコンテンツが変更された場合にのみ更新されます。 + +> [!NOTE] +> パッケージをインストールする前 (例: `--skip-install` を使用した場合) に `ai-config` を実行すると、schematic は組み込みテンプレートにフォールバックします。インストール済みバージョンのスキル ファイルを取得するには、インストール後にコマンドを再実行してください。 + +### Ignite UI CLI の使用 -Ignite UI CLI がグローバルにインストールされている場合、同等のコマンドは次のとおりです。 +Ignite UI CLI がグローバルにインストールされている場合、同等のコマンドは次のとおりです: ```cmd ig ai-config ``` > [!NOTE] -> `ig ai-config` コマンドは `igniteui mcp` と `igniteui-theming-mcp` の 2 つの Ignite UI エントリのみを設定し、`@angular/cli` は登録しません。3 つのサーバーをすべて一括設定するには `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 +> `ig ai-config` コマンドは `igniteui-cli` と `igniteui-theming` の 2 つの Ignite UI エントリのみを設定し、`angular-cli` は登録しません。1 つのステップですべての 3 つのサーバーを設定するには `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 -すべての AI クライアントおよび Agent Skills の設定手順の詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 \ No newline at end of file +すべての AI クライアントおよび Agent Skills の配線に関する詳細なセットアップ手順については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 \ No newline at end of file diff --git a/jp/components/general/cli/getting-started-with-cli.md b/jp/components/general/cli/getting-started-with-cli.md index 317c6902a7..15440ed42a 100644 --- a/jp/components/general/cli/getting-started-with-cli.md +++ b/jp/components/general/cli/getting-started-with-cli.md @@ -55,6 +55,24 @@ ig new ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav ``` +プロジェクト作成時に AI アシスタントとエージェントの設定を指定することもできます: + +```cmd +ig new my-app --framework=angular --type=igx-ts --template=side-nav --assistants generic --agents claude copilot +``` + +AI 設定を完全にスキップするには: + +```cmd +ig new my-app --framework=angular --type=igx-ts --assistants none --agents none +``` + +**`ig new` の実行順序:** +1. プロジェクト ファイルが生成されます +2. AI 設定が新しいプロジェクト ディレクトリ内で実行されます (フラグが指定されていない場合はアシスタントとエージェントのプロンプトが表示されます) +3. Git が初期化されます (`--skip-git` を指定した場合を除く) +4. 依存関係がインストールされます (`--skip-install` を指定した場合を除く) + >[!NOTE] > `v13.1.0` 以降、`igx-ts` プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用したい場合は、`type` を `igx-ts-legacy` に設定できます。 @@ -188,13 +206,31 @@ ig start Ignite UI CLI には、AI コーディング アシスタント (GitHub Copilot、Claude、Cursor など) を最新の Ignite UI コンポーネント ドキュメントおよび API リファレンスに接続する組み込みの MCP (Model Context Protocol) サーバーが含まれています。設定後、AI アシスタントはコンポーネント API を照会したり、セットアップ ガイドを取得したり、コンテキストを切り替えずに正確な Ignite UI for Angular コードを生成したりできます。 -`ig new` でプロジェクトを作成した場合、スキャフォールディング時に VS Code MCP 設定が `.vscode/mcp.json` に生成され、Ignite UI for Angular Agent Skills が `.claude/skills/` にコピーされます。これらのファイルのいずれかまたは両方が欠けている既存のプロジェクトで作業している場合は、プロジェクト ルートから `ig ai-config` を実行して MCP 設定とスキルを一括セットアップしてください。 +`ig new` でプロジェクトを作成した場合、スキャフォールディング時に MCP 設定と Agent Skills がすでに生成されています。既存のプロジェクトで作業している場合は、プロジェクト ルートから `ig ai-config` を実行して MCP サーバー、スキル ファイル、インストラクション ファイルを一括セットアップしてください: ```cmd ig ai-config ``` -AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください。 +コマンドは複数のコーディング アシスタントと AI エージェントをサポートしています: + +```cmd +ig ai-config --assistants generic vscode --agents claude copilot +``` + +| フラグ | 値 | デフォルト | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | 対話形式でプロンプト; 非対話形式モードでは `generic` | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | 対話形式でプロンプト; 非対話形式モードでは `generic` + `claude` | + +フラグなしで実行すると、`ig ai-config` は対話形式モードになり、スペースでトグル、ENTER で確認してコーディング アシスタントとエージェントを選択するよう促します。プロンプトは `ig new` 時のウィザード ステップを反映しています: + +1. **コーディング アシスタントの選択** - MCP サーバー設定の対象として 1 つ以上を選択します (Generic、VS Code、Cursor、Gemini、Junie)、またはスキップするには None を選択します。 +2. **AI エージェントの選択** - スキル ファイルとインストラクション ファイル用に 1 つ以上のエージェントを選択します (Generic、Claude、Copilot、Cursor、Codex、Windsurf、Gemini、Junie)、またはスキップするには None を選択します。 + +対話形式モードのデフォルトはアシスタントに **Generic**、エージェントに **Generic + Claude** です。ウィザード プロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI アシスタントの設定](step-by-step-guide-using-cli.md#configure-ai-assistants)を参照してください。 + +AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください: ```cmd ig mcp @@ -218,4 +254,4 @@ ig mcp | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | 現在のプロジェクトのテストを実行します。 | ig version | -v | ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。 | | ig mcp | | Ignite UI MCP サーバーを起動し、接続された AI アシスタントにコンポーネント ドキュメント検索および API リファレンス ツールを提供します。[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 | -| ig ai-config | | `.claude/skills/` に Ignite UI for Angular Agent Skills をコピーし、`.vscode/mcp.json` に Ignite UI MCP サーバー設定を書き込むことで、既存のプロジェクトの AI 統合をセットアップします。 | \ No newline at end of file +| ig ai-config | | AI コーディング アシスタント統合をセットアップします - 選択したアシスタントとエージェント用に MCP サーバーを設定し、スキル ファイルをコピーし、インストラクション ファイルを設定します。 | \ No newline at end of file diff --git a/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md b/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md index 0d92d64d2b..25706212d6 100644 --- a/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -46,7 +46,7 @@ ng new --collection="@igniteui/angular-schematics" -上記の手順を完了すると、アプリケーション構造が生成され、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 +上記の手順を完了すると、ウィザードはプロジェクト構造を生成し、次に [AI コーディング アシスタントの設定](#ai-アシスタント統合)を促します。AI 設定が完了すると、Git リポジトリが初期化されて初期状態がコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 @@ -77,3 +77,47 @@ ng g @igniteui/angular-schematics:component アプリケーションにテンプレートを追加した後、プロセスを完了するかコントロールの追加を続行するかどうかを選択します。プロセスの完了を選択すると、必要なパッケージが (プロジェクト作成時に) インストールされ、アプリケーションがデフォルトのブラウザーで開かれます。 `ng g @igniteui/angular-schematics:c [template] [name]` コマンドを使用して、後からいつでも、Ignite UI for Angular ビューをアプリケーションに追加できます。 + +## AI アシスタント統合 + +プロジェクトのブートストラップ タイプ、名前、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を促します。このステップは `ng generate @igniteui/angular-schematics:ai-config` と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。 + +### コーディング アシスタントの選択 + +MCP サーバーを設定するコーディング アシスタントを選択するよう促されます。スペース キーで選択をトグルし、ENTER で確認します: + +![ステップ バイ ステップ プロンプト: MCP 設定用コーディング アシスタントの選択](../../../images/general/ig-step-by-step-ai-config-assistants.png) + +- **Generic** (Claude Code、VS Code など) - `.mcp.json` に書き込みます +- **VS Code** (GitHub Copilot) - `.vscode/mcp.json` に書き込みます +- **Cursor** - `.cursor/mcp.json` に書き込みます +- **Gemini** - `.gemini/settings.json` に書き込みます +- **JetBrains Junie** - `.junie/mcp/mcp.json` に書き込みます +- **None** - MCP 設定をスキップします + +デフォルトの選択は **Generic** です。**None** を選択すると MCP サーバー設定が完全にスキップされます。 + +### AI エージェントの選択 + +次に、スキル ファイルとインストラクションを設定する AI エージェントを選択するよう促されます: + +![ステップ バイ ステップ プロンプト: スキル ファイルとインストラクション用 AI エージェントの選択](../../../images/general/ig-step-by-step-ai-config-agents.png) + +- **Generic** - `.agents/skills/` と `AGENTS.md` +- **Claude** - `.claude/skills/` と `.claude/CLAUDE.md` +- **Copilot** - `.github/skills/` と `.github/copilot-instructions.md` +- **Cursor** - `.cursor/skills/` と `.cursor/rules/cursor.mdc` +- **Codex** - `.codex/skills/` と `.codex/instructions.md` +- **Windsurf** - `.windsurf/skills/` と `.windsurf/rules/guidelines.md` +- **Gemini** - `.gemini/skills/` と `.gemini/GEMINI.md` +- **Junie** - `.junie/skills/` と `.junie/guidelines.md` +- **None** - スキル ファイルとインストラクションをスキップします + +デフォルトの選択は **Generic** と **Claude** です。**None** を選択するとエージェント設定が完全にスキップされます。 + +Angular schematic 経由で実行すると、Ignite UI サーバーと並んで追加の `angular-cli` MCP サーバー エントリが自動的に含まれます。 + +> [!NOTE] +> 非対話形式のプロジェクト作成時に AI 設定プロンプトを完全にスキップするには、`ng new` に `--assistants none --agents none` を渡します。後から AI 設定を再実行するには、プロジェクト ルートから `ng generate @igniteui/angular-schematics:ai-config` を使用してください。 + +MCP クライアント設定と利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 diff --git a/jp/components/general/cli/step-by-step-guide-using-cli.md b/jp/components/general/cli/step-by-step-guide-using-cli.md index bea038bb8a..f921180438 100644 --- a/jp/components/general/cli/step-by-step-guide-using-cli.md +++ b/jp/components/general/cli/step-by-step-guide-using-cli.md @@ -52,7 +52,7 @@ ig new ![](../../../images/general/ig-step-by-step-new-project-theme.png) -上記の手順を完了すると、アプリケーション構造が生成され、git リポジトリが初期化され、プロジェクトがコミットされます。次に、プロセスを完了するか、アプリケーションに新しいビューを追加するかのプロンプトが表示されます。 +上記の手順を完了すると、アプリケーション構造が生成されます。次に、ウィザードは [AI コーディング アシスタントの設定](#configure-ai-assistants)を促します。AI 設定が完了すると、Git リポジトリが初期化され、プロジェクトがコミットされ、プロセスを完了するかアプリケーションに新しいビューを追加するかを尋ねられます: ![](../../../images/general/ig-step-by-step-new-project-action.png) @@ -84,3 +84,43 @@ ig add 以下の構文を使用して [`add`](getting-started-with-cli.md#add-template) コマンドを使用すると、後からいつでも、Ignite UI for Angular ビューをアプリケーションに追加できます。 `ig add [template] [name]`. + +## AI アシスタントの設定 {#configure-ai-assistants} + +フレームワーク、プロジェクト タイプ、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を促します。このステップは `ig ai-config` と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。 + +### コーディング アシスタントの選択 + +MCP サーバーを設定するコーディング アシスタントを選択するよう促されます。スペース キーで選択をトグルし、ENTER で確認します: + +![ステップ バイ ステップ AI 設定 コーディング アシスタント プロンプト](../../../images/general/ig-step-by-step-ai-config-assistants.png) + +- **Generic** (Claude Code、VS Code など) - `.mcp.json` に書き込みます +- **VS Code** (GitHub Copilot) - `.vscode/mcp.json` に書き込みます +- **Cursor** - `.cursor/mcp.json` に書き込みます +- **Gemini** - `.gemini/settings.json` に書き込みます +- **JetBrains Junie** - `.junie/mcp/mcp.json` に書き込みます +- **None** - MCP 設定をスキップします + +デフォルトの選択は **Generic** です。**None** を選択すると MCP サーバー設定が完全にスキップされます。 + +### AI エージェントの選択 + +次に、スキル ファイルとインストラクションを設定する AI エージェントを選択するよう促されます: + +![ステップ バイ ステップ AI 設定 エージェント プロンプト](../../../images/general/ig-step-by-step-ai-config-agents.png) + +- **Generic** - `.agents/skills/` と `AGENTS.md` +- **Claude** - `.claude/skills/` と `.claude/CLAUDE.md` +- **Copilot** - `.github/skills/` と `.github/copilot-instructions.md` +- **Cursor** - `.cursor/skills/` と `.cursor/rules/cursor.mdc` +- **Codex** - `.codex/skills/` と `.codex/instructions.md` +- **Windsurf** - `.windsurf/skills/` と `.windsurf/rules/guidelines.md` +- **Gemini** - `.gemini/skills/` と `.gemini/GEMINI.md` +- **Junie** - `.junie/skills/` と `.junie/guidelines.md` +- **None** - スキル ファイルとインストラクションをスキップします + +デフォルトの選択は **Generic** と **Claude** です。**None** を選択するとエージェント設定が完全にスキップされます。 + +> [!NOTE] +> 非対話形式のプロジェクト作成時に AI 設定プロンプトを完全にスキップするには、`ig new` に `--assistants none --agents none` を渡します。後から AI 設定を再実行するには、プロジェクト ルートから `ig ai-config` を使用してください。