AI にオセロを作らせてみた
「ブラウザで遊べるオセロを作って」と指示するだけ。
ファイル作成・編集の承認からブラウザでの起動まで、実際の画面で一連の流れを紹介します。
使用モデルは Gemini 3.8 Flash。この一連の作業にかかった API 料金はおよそ $0.2 でした。
今回の流れ
- チャットで「ブラウザで遊べるオセロを作って」と指示 → AI が
index.html/script.js/style.cssを作成 - プロジェクト説明の
readme.mdも AI が自動生成 - 「ヒント機能を追加して」と追記指示 → 4 ファイルの差分編集をダイアログで確認・承認
- 「ブラウザで起動してください」と指示 → AI が
start index.htmlを発行し、承認して実行 - ブラウザでオセロが動作 — 完成
1. 作業中の Teaspoon IDE
指示を送ると、AI はファイルの一覧取得・作成・編集を複数ステップで自律的に進めます。
右のチャットペインには使用モデル（gemini-3.8-flash）と各応答の所要時間（例：(6.4s)）が表示され、
readme.md にはプロジェクト概要や CPU アルゴリズムの説明まで自動で記述されました。
2. ファイル編集の承認
「ヒント機能を追加して」と指示したところ、AI は 4 ファイルにまたがる差分編集を提案しました。 AI の変更はそのまま書き込まれるのではなく、必ずこの承認ダイアログで差分を確認してから 「適用」または「却下」を選びます。変更に納得できなければ却下でき、適用後でも「↩ ロールバック」で AI の変更だけを元に戻せます。
3. コマンド実行の承認
「ブラウザで起動してください」と頼むと、AI は start index.html というコマンドを発行します。
コマンドはあなたのユーザー権限で実行されるため、実行前に必ず内容を確認する承認ダイアログが挟まります。
承認すると Teaspoon IDE がブラウザを起動します。
4. 完成したオセロ
ブラウザで実際に遊べるオセロが完成しました。 3 段階の CPU の強さ（ランダム／位置評価／αβ法による先読み）、今回追加したヒント機能（「おすすめの手は【G3】です！」と表示）、 戦績の保存、パス・リスタートの操作ボタンまで実装されています。
この例でわかること
- 承認フローで安全 ファイルの書き込み・編集・コマンド実行はすべて承認制。AI が勝手に進めることはありません。
- 自律的なマルチステップ 生成 → ドキュメント作成 → 機能追加 → 起動まで、指示ごとに AI が複数ステップを自律実行します。
- 実コストは約 $0.2 Gemini 3.8 Flash + BYOK（自分の API キーを使う方式）のため、マージンなし・使った分だけの料金です。Ollama のローカル LLM を使えば完全無料・オフラインでも運用できます。
- やり直しが利く チェックポイントとロールバックにより、AI が触ったファイルだけを安全に取り消せます。
※ 画面内のチャットヘッダーに表示されている「予算 ○○%」バッジは、組織モード（一元管理）利用時の表示です。 詳しくは Teaspoon IDE Organization をご覧ください。