VoltAgentでイタリア料理レシピ提案アプリ「Buonoくん」を作ってみた話

Last updated at 2025-12-03Posted at 2025-12-03

はじめに

こんにちは。トライベック株式会社の岡山です。
今回は個人開発でVoltAgentを使用し、イタリア料理レシピ提案アプリ「Buonoくん」を開発した経験を共有します。

開発の背景

私は普段、フロントエンドエンジニアとしてTypeScriptを用いた開発を行っています。
そのため、使い慣れたTypeScriptでAIエージェントを構築できるVoltAgentに関心を持ちました。

また、プライベートではよく料理をするのですが、基本的にレシピは見ずに独学で作るタイプです。
「自分の感覚で作っている料理が、世間一般のレシピとどれくらい乖離しているのか（あるいは合っているのか）」を確認し、答え合わせをする相手が欲しいと思ったのが、このアプリを作るきっかけになりました。

VoltAgentとは?

VoltAgentは、AIエージェントの開発を効率化するTypeScript/JavaScript向けフレームワークです。

公式情報

VoltAgentの主な特徴

基本特性

オープンソースのTypeScriptフレームワークで、AIエージェントの構築とオーケストレーションを行う
メモリ、ワークフロー、ツール、組み込みLLM監視機能を備えたプロダクション対応のエージェントを構築できる

主要機能

複数のLLMプロバイダー(OpenAI、Anthropic、Googleなど)をコード変更なしに切り替え可能
永続的なメモリアダプタにより、実行間でコンテキストを保持
RAG(検索拡張生成)機能により、データソースから情報を取得してレスポンスを生成
Model Context Protocol(MCP)サーバーへの接続をサポート

監視・デバッグ

VoltOpsという組み込みのLLM監視プラットフォームにより、エージェントの動作をリアルタイムで可視化
実行トレース、パフォーマンスメトリクス、ビジュアルダッシュボードで詳細なデバッグが可能

作ったもの「Buonoくん」

ユーザーが食材・難易度・人数を指定すると、本格的で家庭でも再現可能なイタリアンレシピをAIが生成・提案するAIエージェントアプリです。

マスコットキャラ「Buonoくん」はGeminiの「Nano Banana」で作成しました。
基となるイラストを作成し、簡易的なプロンプトで様々な派生イラストを作成することができました。

主な機能

食材ベースのレシピ生成
料理の種類指定（パスタ、ピッツァ、リゾットなど）
レシピバリエーション生成
お気に入りレシピの管理

アプリケーション全体のアーキテクチャ

レイヤー	技術スタック	デプロイ先/用途
フロントエンド	Next.js	Vercel
バックエンド	VoltAgent	Render
データベース/API/認証	Supabase	データベース管理・認証機能

Buonoくん誕生までの道のり

大まかな所要時間をまとめました。細かい調整やデバッグを除けば、主要機能の実装はほぼ一日で完了できました。

ステップ	内容	所要時間
1	VoltAgentでのAgent構築（マルチエージェント設定を含む）	5時間
2	Supabaseでバックエンド（DB・API・認証機能）の構築	6時間
3	Next.jsでフロントUIの仕上げとバックエンド連携	4時間
4	Buonoくんイラスト作成（Gemini Nano Banana）	30分
合計		約15.5時間

エージェントのアーキテクチャ

エージェント名	役割
BuonoKun	司令塔。ユーザー入力を受け取り、生成フローを制御し、最終的なJSONを統合する。
RecipeGenerationAgent	シェフ。食材・難易度・人数を元にメインのイタリアンレシピを考案する。
RecipeVariationGenerationAgent	栄養士/プランナー。メインレシピを元に「ビーガン」「グルテンフリー」などのアレンジ版を作成する。

VoltAgentではマルチエージェントアーキテクチャがサポートされてます。
統合エージェントである BuonoKun がユーザーの窓口となり、タスクに応じて専門のサブエージェント（RecipeGenerationAgent や RecipeVariationGenerationAgent）を呼び出します。