Day 3: エージェントチャット
今日学ぶこと
- エージェントチャットの基本操作
- コンテキストプロバイダーの活用
- インテント検出と自動判断
- 効果的なプロンプトの書き方
エージェントチャットとは
KiroのエージェントチャットはただのAIチャットではありません。プロジェクト全体のコンテキストを理解し、ファイル操作やコマンド実行を自律的に行える対話インターフェースです。
flowchart TB
subgraph Agent["エージェントチャット"]
direction TB
A["自然言語入力"]
B["コンテキスト理解"]
C["インテント判断"]
D["アクション実行"]
E["結果報告"]
end
A --> B
B --> C
C --> D
D --> E
subgraph Actions["実行可能なアクション"]
F["ファイル読み書き"]
G["コード生成"]
H["コマンド実行"]
I["検索・分析"]
end
D --> F
D --> G
D --> H
D --> I
style Agent fill:#3b82f6,color:#fff
style Actions fill:#8b5cf6,color:#fff
従来のAIチャットとの違い
| 機能 | 従来のAIチャット | Kiroエージェントチャット |
|---|---|---|
| コンテキスト | 会話履歴のみ | プロジェクト全体 + Steering |
| ファイル操作 | コピペで手動 | 自動的に読み書き |
| コマンド実行 | 提案のみ | 許可を得て実行 |
| マルチファイル | 困難 | 複数ファイルを同時編集 |
チャットの基本操作
チャットパネルを開く
Kiroパネルの「Chat」タブ、または以下のショートカットで開けます：
- Mac:
Cmd + Shift + I - Windows/Linux:
Ctrl + Shift + I
基本的な会話
You: このプロジェクトの構造を説明してください
Kiro: このプロジェクトはNext.js 15を使用したWebアプリケーションです。
主なディレクトリ構造：
- src/app/ - App Routerによるページ
- src/components/ - 再利用可能なコンポーネント
- src/lib/ - ユーティリティ関数
...
セッション管理
複数の会話スレッドを管理できます：
flowchart LR
subgraph Sessions["セッション管理"]
S1["セッション1\n認証機能の実装"]
S2["セッション2\nバグ修正"]
S3["セッション3\nリファクタリング"]
end
S1 --> |"切り替え"| S2
S2 --> |"切り替え"| S3
style Sessions fill:#22c55e,color:#fff
- 新規セッション: 新しいトピックの開始
- セッション切り替え: 過去の会話に戻る
- 履歴検索: コード変更やコマンド出力を検索
コンテキストプロバイダー
コンテキストプロバイダーは、チャットに追加情報を提供する仕組みです。# に続けてプロバイダー名を入力します。
flowchart TB
subgraph Providers["コンテキストプロバイダー"]
A["#codebase"]
B["#file"]
C["#folder"]
D["#git diff"]
E["#terminal"]
F["#url"]
end
subgraph Chat["チャット"]
G["プロンプト + コンテキスト"]
end
A --> G
B --> G
C --> G
D --> G
E --> G
F --> G
style Providers fill:#8b5cf6,color:#fff
style Chat fill:#3b82f6,color:#fff
主要なコンテキストプロバイダー
| プロバイダー | 説明 | 使用例 |
|---|---|---|
#codebase |
関連ファイルを自動検索 | #codebase 認証の仕組みを説明して |
#file |
特定ファイルを参照 | #file:src/auth.ts このコードをレビューして |
#folder |
フォルダ内容を含める | #folder:src/components UIコンポーネントを一覧化して |
#git diff |
現在の変更差分 | #git diff この変更のレビューをして |
#terminal |
ターミナル履歴・出力 | #terminal エラーの原因を分析して |
#url |
Webドキュメント | #url:https://react.dev Reactの新機能を要約して |
#code |
コードスニペット | 選択コードを参照 |
#repository |
プロジェクト構造 | #repository アーキテクチャを分析して |
#current |
アクティブなエディタファイル | #current このファイルの問題を見つけて |
#steering |
ステアリングファイル | #steering:api-rules APIルールを確認して |
#docs |
ドキュメント内容 | #docs プロジェクトドキュメントを参照 |
#spec |
要件・設計ファイル | #spec:auth-feature 認証の要件を確認 |
#mcp |
MCPツール | #mcp 利用可能なツールを表示 |
プロバイダーの組み合わせ
複数のプロバイダーを組み合わせて、より精度の高い回答を得られます：
#codebase #file:src/auth.ts
認証システムがデータベースとどのように連携しているか説明してください
この例では：
#codebaseで関連ファイルを自動検索#file:src/auth.tsで認証の主要ファイルを明示的に参照- 両方のコンテキストを使って回答を生成
インテント検出
Kiroは質問の意図（インテント） を自動的に判断します。
flowchart TB
A["ユーザー入力"]
subgraph Detection["インテント検出"]
B{"質問？\n指示？"}
end
subgraph Question["質問の場合"]
C["説明を提供"]
D["コード変更なし"]
end
subgraph Instruction["指示の場合"]
E["アクション実行"]
F["ファイル変更"]
end
A --> B
B -->|"質問"| C
C --> D
B -->|"指示"| E
E --> F
style Detection fill:#f59e0b,color:#fff
style Question fill:#22c55e,color:#fff
style Instruction fill:#3b82f6,color:#fff
質問（説明を求める）
"この関数はどのように動作しますか？"
"認証フローを説明してください"
"なぜこのパターンを使用していますか？"
→ Kiroは説明のみを提供し、コードは変更しません。
指示（アクションを求める）
"ログインコンポーネントを作成してください"
"このバグを修正してください"
"テストを追加してください"
→ Kiroはファイルを作成・編集します。
明示的な指示
意図を明確にしたい場合は、動詞を使います：
| 意図 | 使用する動詞 |
|---|---|
| 作成 | create, add, implement |
| 修正 | fix, correct, repair |
| 変更 | update, modify, change |
| 削除 | remove, delete |
| 説明 | explain, describe, how does |
マルチファイル編集
Kiroの強力な機能の一つが、複数ファイルの同時編集です。
flowchart LR
subgraph Input["入力"]
A["新しいAPIエンドポイントを\n作成してください"]
end
subgraph Output["Kiroの出力"]
B["api/users.ts"]
C["types/user.ts"]
D["tests/users.test.ts"]
E["docs/api.md"]
end
A --> B
A --> C
A --> D
A --> E
style Input fill:#3b82f6,color:#fff
style Output fill:#22c55e,color:#fff
例：新機能の追加
ユーザープロフィール編集機能を追加してください。
以下を含めること：
- コンポーネント
- APIエンドポイント
- 型定義
- テスト
Kiroは必要なすべてのファイルを作成し、既存のコードとの整合性を保ちます。
効果的なプロンプトの書き方
1. 具体的に書く
❌ "認証を追加して"
✓ "JWTを使用したユーザー認証を追加してください。
- /api/auth/login エンドポイント
- /api/auth/logout エンドポイント
- トークンは24時間で期限切れ"
2. コンテキストを提供
❌ "このエラーを直して"
✓ "#terminal #file:src/api.ts
このエラーを直してください。
ターミナルにTypeErrorが表示されています。"
3. 制約を明示
❌ "フォームを作って"
✓ "ユーザー登録フォームを作成してください。
制約：
- React Hook Formを使用
- Zodでバリデーション
- 既存のUIコンポーネントを再利用"
4. 段階的に依頼
複雑なタスクは分割します：
Step 1: "まず、ユーザーモデルの型定義を作成してください"
Step 2: "次に、そのモデルを使ったCRUD APIを作成してください"
Step 3: "最後に、APIのテストを追加してください"
実践例
例1：コードレビュー
#git diff
この変更をレビューしてください。
特に以下の点を確認：
- セキュリティ上の問題
- パフォーマンスへの影響
- 既存コードとの一貫性
例2：バグ修正
#terminal #codebase
「Cannot read property 'map' of undefined」というエラーが
発生しています。原因を特定して修正してください。
例3：リファクタリング
#file:src/components/Dashboard.tsx
このコンポーネントをリファクタリングしてください：
1. 大きすぎるので、小さなコンポーネントに分割
2. ロジックはカスタムフックに抽出
3. 既存の機能は維持
例4：ドキュメント作成
#folder:src/api
このAPIディレクトリのREADMEを作成してください。
各エンドポイントの説明と使用例を含めてください。
チャットのベストプラクティス
Do（推奨）
-
コンテキストプロバイダーを活用
- 関連ファイルを明示的に参照
- エラー情報があればターミナルを含める
-
具体的な要件を記述
- 何を達成したいか明確に
- 技術的制約があれば記載
-
段階的にタスクを進める
- 大きなタスクは分割
- 各ステップの結果を確認
Don't（避けるべき）
-
曖昧な指示
- 「いい感じにして」
- 「なんかおかしいから直して」
-
コンテキストなしの質問
- ファイルを参照せずにエラーについて質問
-
一度に大量の変更を依頼
- レビューが困難になる
まとめ
| 概念 | 説明 |
|---|---|
| エージェントチャット | プロジェクト全体を理解した対話インターフェース |
| コンテキストプロバイダー | # で追加情報を提供 |
| インテント検出 | 質問と指示を自動判断 |
| マルチファイル編集 | 複数ファイルを同時に変更 |
重要ポイント
- #プロバイダーでコンテキストを豊かに
- 具体的な要件と制約を記述
- 質問と指示を明確に区別
- 複雑なタスクは段階的に
練習問題
問題1: 基本
#codebase プロバイダーを使って、プロジェクトの主要な機能について質問してください。Kiroがどのようなファイルを参照するか確認しましょう。
問題2: 応用
以下のシナリオでプロンプトを作成してください：
- テストが失敗している原因を調査
- 新しいユーティリティ関数を追加
- 既存コードのパフォーマンスを改善
チャレンジ問題
複数のコンテキストプロバイダーを組み合わせて、以下を実行してください：
#git diffで最近の変更を確認#terminalでテスト結果を確認- 変更に関連するバグを特定して修正を依頼
参考リンク
次回予告: Day 4では「Specs入門」を学びます。Kiroの核心機能であるSpec駆動開発の基礎を理解しましょう。