はじめに
Bolt や V0 のようなAI駆動開発を進めていくとプロジェクトが次第に大きくなり、ユーザプロンプトに関連するコードが増え、トークンの消費が激しくなります。生成による開発の質を落とさず、なおかつトークンを節約する方法があるなら知っておくに越したことはないですよね。
Stackblitz が公開している公式情報をまとめています。画像や説明を追加していますが原文読むのが苦しくない方はリンクからリファレンスを参照してください。
効果的なプロンプト作成
プロンプトライブラリの活用
プロジェクト作成の効率化のため、プロンプトライブラリを活用できます。
プロンプトライブラリ
プロンプトライブラリはプロジェクト作成画面やプロジェクト開発時にもプロンプト入力用のテキストボックスにボタンが設置されています。
プリセットのプロンプトがいくつか用意されておりますが、新しいプロンプトを自身で作成することも可能です。
自分で曖昧な指示を作文するよりも、一度プリセットのプロンプトを参考にしつつ利用してみるとよいかもしれません。プロンプトライブラリの管理機能もあり、よく利用するプロンプトをお気に入りに追加するなどしてアクセスしやすくすることもできます。
プロンプトの自動改善
Boltはユーザのプロンプトを"ベター"なプロンプトに改善してくれる機能を備えています。
利用手順は以下の通りです。
- チャットボックスにプロンプトを入力します。
- 「Enhance prompt」アイコンをクリックすると、Boltが推奨プロンプトを生成します。必要に応じて編集可能です。
私も利用していますが、やはり最初のプロンプトで開発要件や技術スタック、NGな実装パタンをある程度記載できていないと、「よくある設計」で実装されるので初回のプロンプトでは重要です。
プロンプト作成のヒント
- アプリケーションのアーキテクチャ（ツール、フレームワークなど）から始める。
- 各コンポーネントや機能を1つずつ追加する。
- 各コンポーネントの詳細を小さく具体的なプロンプトで記載する。過剰な指示を一度に与えないようにする。
- 変更すべき点や変更してはいけない点を明確に指示する。具体的な要素や関数を参照し、変更箇所を正確に指示する。
- 常識に頼らず、明確な指示を与える。
プロンプトの作成や実例は下記のようなツールもあるようです。
Boltに修正（非）対象にするか指示する
当たり前でありながら難しいですが、明確な指示を与えることでより正確な結果を得ることができます。
その方法はプロンプトに書き込むだけではなく、BoltのUIで対象・非対称を明確化させるために便利なツールが用意されています。
-
特定ファイルに限定
Boltコードエディタでフォーカスしたいファイルを右クリックし、「Target file」を選択。 -
特定ファイルやディレクトリを除外
除外したいファイルやディレクトリを右クリックし、「Lock file」または「Lock all」を選択。
-
特定のコードセクションに集中
コードビューで対象のコードをハイライトし、「Ask Bolt」ボタンをクリック。選択したコードがプロンプトボックスにリンクされます。
-
特定のUI要素を指示
プレビュービューで「Inspector」アイコンをクリックし、対象の要素を選択します。プロンプトボックスにリンクされます。
プロンプトに関するトラブルシューティング
Boltがプロンプト全体を実行しない場合
- 変更を小さな部分に分割し、1つずつ指示する。
- 各変更が正しく動作するか確認しながら進める。
同じチャット内で以前の指示を忘れる場合
- コンテキストウィンドウには限界があります。
- これまでの会話を要約してコンテキストウィンドウをリセットする方法がおすすめです。Reset the AI context windowに手順が記載されておりますが、「AIコンテキストウィンドウのリセット」でもまとめます。
プロジェクトとシステムのプロンプトのカスタマイズ
AIモデルの動作を指定してプロジェクトをカスタマイズ可能
- プロジェクトプロンプト：特定のプロジェクトに関連するプロンプト
- システムプロンプト：すべてのプロジェクトに適用されるプロンプト
私は以下のサンプルを活用して設定しています。
更新手順
- 左側のメニューを開きます（プロジェクト内にいる必要があります）。
- 「Settings > Knowledge」をクリック。
- プロジェクトプロンプトまたはグローバルシステムプロンプトを更新し、「Save prompt」をクリック。
トークン効率化
トークンの最大効率化を目指し、コストを削減するための方法を以下にまとめます。
トークンの基本理解
BoltではAnthropic社のClaude Sonnet 4 AIモデルを使用しており、トークンは以下の3つの方法で消費されます：
- チャットメッセージの送受信
- AIによるコード生成
- 既存コードの変更内容を読み取る際
トークン使用を減らすためのヒント
以下のヒントを活用すると、大幅なトークン削減が可能です：
ディスカッションモードの使用
- Build Modeでは会話ごとにコードが更新されるためトークン消費が多くなります。
- ヘルプやトラブルシューティング時には、Build ModeではなくDiscussion Modeを使用してください。
- Discussion ModeはBuild Modeに比べて約90%トークン消費を抑えられます。
プロンプトテキストボックスにトグルボタンがあります。このボタンを有効化してプロンプトを書き込むとコードの編集は行われず、コードの説明や現状のコードから機能追加する際の提案等が行えます。
自動エラー修復の繰り返しを避ける
- Boltはエラー発生時に1回のみ自動修復を試みます。
- 「Attempt fix」ボタンを繰り返しクリックすると不要なトークン消費が発生します。
- 修復結果を確認し、次のリクエストを精査してから進めましょう。
時々、Boltが生成したコードで閉じタグが忘れられていたり、Nuxt のようなフレームワークの規約を忘れ去られたりして、ビルドできないコードが起きたります。前者はすんなり解決しますが、規約のようなコード上に記載の無いルールなどは Attempt fix では解決できなかったりします。
エラーハンドリングの追加
- 問題箇所に詳細なログやエラーハンドリングを追加することで、AIが根本原因を理解しやすくなります。
- 詳細なログがあると、再発時により精度の高い修正が可能となります。
AIがエラーハンドリングできるようにコンソールログを吐かせるコードを生成させるプロンプトは用意した方がいいと思います。コンソールログを吐かせてからディスカッションモードという流れは良く使います。
リバート機能の活用
- プロジェクトを以前の状態に戻す際にトークンを消費せず、リバート機能を使用できます。
- ただし、リバート後の変更は元に戻せないため、注意が必要です。
プロンプトが不明瞭であったり，大々的な変更を一度に命令するなどサボると、意図しないコード作成や追記が実行されます。エラーが起きたり、ガラッと見た目が意図せず変わったりした場合は素直にリバート機能を使う方が結果的にトークンの節約に繋がります...
機能を段階的に追加
- アプリの基本構造を作成してから、詳細な機能を1つずつ追加してください。
とはありますが、初回プロンプト（プロジェクト作成）は入念に明確な設計をして高品質なプロンプトを書き上げた方が大きくスタートアップ切れるかと思います。そこからは地道に指示内容が明瞭なプロンプトでどんどん差分を生み出していきます。
明確で焦点を絞ったプロンプトを使用
- AIに指示を与える際は、具体的で焦点を絞ったプロンプトを使用しましょう。
プロジェクトサイズの削減
- プロジェクトが大きくなると、トークン消費も増えます。
- プロジェクトのサイズを小さく保つことを意識しましょう。
未使用ファイルのクリーンアップ
- Knipツールを使用して未使用ファイルを削除し、プロジェクトサイズを縮小できます。
- コマンド：
npx knip --production --fix --allow-remove-files
.bolt/ignore ファイルの活用
- AIのコンテキストウィンドウから除外するファイルやフォルダを
.bolt/ignoreにリストアップできます。 - 除外ファイルを指定する際は、全体のプロジェクト動作に影響を与えないように注意が必要です。
プロジェクトの分割
- 大規模アプリをバックエンドとフロントエンドなど、複数プロジェクトに分割することで効率化が図れます。
AIコンテキストウィンドウのリセット
- 会話履歴をリセットすることで、AIに送信される情報量を減らせます。
- 会話履歴を要約して保存し、新しいプロジェクトで使用する方法も有効です。
私も活用できていないTIPSがありますが、トークン効率化に向けてこういったノウハウを公式がドキュメント化しているのは助かりますね。
ディスカッションモード
コード生成を依頼するのではなく、プロジェクトの内容に応じてQAが可能になります。プロジェクトの構成や仕組みを把握するために便利な機能です。
概要
ディスカッションモードでは、コードを生成することなく、プロジェクト固有のインサイトを提供します。この機能はGemini 2.5 Flashと検索グラウンドを活用し、Boltのサポートドキュメントやインターネット上の情報にリアルタイムでアクセスすることで、使用している技術に関する高品質かつ最新の回答を提供します。
ディスカッションモードを使用することでトークン使用量を削減でき、Build Modeに比べて送受信する情報が少なくなります。また、安全に使用でき、コードの変更は指示があるまで行われません。
使用方法
- プロジェクト内のBoltプロンプトボックスで、チャットアイコンをクリックしてBuild ModeとDiscussion Modeを切り替えます。
- プロンプトを入力して応答を確認します。その後、以下のいずれかを選択できます：
- ディスカッションを続ける
- クイックアクションボタンの1つを使用して提案を実行する（クイックアクションを選択するとBuild Modeに切り替わります）。
特徴
プロジェクトコンテキスト認識
- 各ディスカッションメッセージには、プロジェクトのコードベースが含まれており、状況に応じた回答が提供されます。
- 最近のメッセージ6件も参照可能。
- 主なユースケース：
- デバッグ支援
- ツール、ライブラリ、APIの推奨
- プロダクト/プロジェクトの意思決定
- デザイン改善の提案
- 新機能の提案
- 外部APIの理解および統合
- 実行計画の生成
- ページ内のコンポーネントをハイライトし、変更案を議論
検索グラウンド
- AIは、回答時にGoogle検索などの信頼できるソースから最新情報を取得できます。
- これにより、古くない正確な回答を保証する。
- 例1: 最新のStripe APIアップデートに関する質問では、最新ドキュメントを検索して回答。
- 例2: 人気ライブラリのバグに関する質問では、フォーラムやサポートページの最新解決策を確認。
クイックアクションボタン
- 各ディスカッションモードの応答後に即時実行可能なアクションを提供：
- この計画を実行（Build Modeに自動切り替え）
- サンプルを表示
- アイデアを洗練
- クイックアクションボタンはコンテキストに応じて動的に生成。
コード以外のディスカッション
- ディスカッションモードは、プロジェクトに完全対応した「スマートなチームメイト」として機能。
- トレードオフの検討、推奨事項の確認、デバッグ、またはセカンドオピニオンが必要な場合に最適。
- プロジェクトに関する情報を完全に把握した状態で議論可能。