Meal Prep Agent

ライブで試す

下記に好みを入力すると、4つのAIエージェントがリアルタイムで協力する様子を見ることができます。全プロセスは約2-3分です。

---

アーキテクチャ

このプロジェクトはマルチエージェントワークフローを使用しています。専門化されたAIの役割が順番に作業し、それぞれが次のエージェントにコンテキストを渡します。

なぜ1つではなく4つのエージェント？

各エージェントは特定の焦点を持っており、すべてを1つのエージェントで行うよりも良い結果を生み出します。レシピリサーチエージェントはレシピを見つけることだけを考えます。食事計画エージェントは栄養バランスとバリエーションだけを考えます。専門化が品質につながります。

---

実装の詳細

Server-Sent Eventsによるストリーミング

UIは各エージェントが作業している間、リアルタイムで進捗を表示します。2-3分のプロセスには、何かが起こっているというフィードバックが不可欠です。

// サーバーがエージェントの更新をストリーム
const encoder = new TextEncoder();
const stream = new ReadableStream({
  async start(controller) {
    for await (const update of agentWorkflow()) {
      controller.enqueue(encoder.encode(
        `data: ${JSON.stringify(update)}\n\n`
      ));
    }
    controller.close();
  }
});

エージェントプロンプト戦略

各エージェントが受け取るもの：

1. 明確な役割定義
2. 構造化された出力フォーマット
3. 前のエージェントからのコンテキスト
4. 制約（予算、食事制限）

買い物リストエージェントが最も詳細なプロンプトを受け取ります—材料の量を理解し、重複を避け、店舗セクション（青果、乳製品、タンパク質、パントリー）別に整理する必要があります。

---

学んだこと

このユースケースでは順次処理が並列処理に勝る。 最初は並列でエージェントを実行しようとしましたが、依存関係の連鎖でこれは現実的ではありませんでした。各エージェントは前のエージェントの出力を本当に必要としています。

プロンプトエンジニアリングが違いを生む。 同じGPT-4o-miniモデルでも、プロンプト構造によって大きく異なる結果が出ます。良い出力の具体例を追加することで、品質が大幅に向上しました。

ストリーミングUXは重要。 最初のバージョンは3分待ってからすべての出力をまとめて表示していました。ユーザーは完了前に離脱していました。リアルタイムの進捗表示がエンゲージメントを高く保ちました。