AI料理アシスタント

https://github.com/tsuchidarikuto/cooking-assistant
https://cooking-assistant-deploy.vercel.app/

Next.js

GitHub

TypeScript

Figma

VSCode

材料を写真に撮るだけ！音声操作で料理完成までAIがアシスタント！

yusa aihara

土田陸斗

推しアイデア

食材の写真を撮るだけで最適なレシピを提案し、音声対話で手が塞がっていても調理をサポート。 リアルタイムな質問やタイマー機能にも対応し、声で操作できる次世代の料理アシスタント。

作った背景

料理初心者が増える中、レシピ検索と調理の両方を同時に行うのは難しいという課題に着目。食材から何が作れるか悩む人や、調理中にレシピを見るために手を洗う手間を省きたいという声から開発に着手した。

推し技術

画像認識AIによる食材の自動検出と、Web Speech APIを活用したハンズフリー操作が特徴。音声認識と音声合成を組み合わせ、調理中でも両手が塞がっていても質問できる対話型インターフェースを実現。オフライン時も基本機能が使える設計。

プロジェクト詳細

AIレシピアシスタント

概要

AIレシピアシスタントは、手持ちの材料を撮影するだけでAIが最適なレシピを提案し、調理ガイドや履歴管理もできるWebアプリです。
ハッカソンで「料理×AI」をテーマに、初心者メンバーと共に短期間で開発しました。

image

使い方

1.ログイン
ユーザー登録またはログインを行います。

2.材料スキャン
手持ちの食材をカメラで撮影すると、AIが材料を認識し、レシピを自動生成します。

3.レシピ提案・調理ガイド
提案されたレシピを選択し、音声ガイド付きで調理を進められます。

4.履歴・お気に入り管理
作った料理やお気に入りレシピを記録・管理できます。 image

技術構成
  • フロントエンド: Next.js (App Router), TypeScript, Tailwind CSS
  • 認証・DB: Supabase
  • AI連携: OpenAI API (画像認識・レシピ生成)
  • UI設計支援: v0
  • その他: Lottieアニメーション, Lucideアイコン

AI活用
  • 開発時
    • コーディング補助にGitHub CopilotとClineを活用し、React/Next.jsの実装やバグ修正を効率化
    • UI構成や画面イメージの検討時にv0を利用し、プロトタイピングを高速化

↓　AIエージェント二刀流 image

  • 記事・ドキュメント作成
    • メンバーがWeb開発初心者だったため、AIに記事や説明文を生成してもらい、人間がファクトチェックした上で共有 image
    • APIの仕様や、DBの構造、アプリ全体のフローチャート等もMermaidで出力してもらうことで、全体の大まかな流れを共有しやすくした。 image
  • アプリ機能
    • 材料画像からの食材認識・レシピ自動生成にOpenAI APIを活用
    • 音声ガイドやユーザーの質問応答にもAIを利用

yusa aihara

@ba65dea856152af6