Back to list
dev_to 2026年3月14日

YouCanChef:私はどのように AI を活用して、自分だけの移動型料理アシスタントを作成しましたか?

YouCanChef: ¿Cómo creé mi propio asistente de cocina nómada con IA?

Translated: 2026/3/14 12:01:15
youcanchefai-codingtravel-techgemini-apinpm-deploy

Japanese Translation

YouCanChef:私はどのように AI を活用して、自分だけの移動型料理アシスタントを作成しましたか? ようこそ、旅人さんそして料理の愛好家の方々のへ! 世界中を絶えず移動する者として、私は各地のレストランで試食したレシピを真似し、再現するのを非常に喜びます。しかし、大きな課題があります:異なる国でこれらの食材を見つけられるか? 今日は、どうやって『YouCanChef』——あなたが現在いる場所に食材を入手しやすいかどうか、またはそれを代替できるかを知るツール——を作成したかをお伝えします。このアイデアは単純でありながら強力です: 入力の条件:料理の名称や食材のリスト + 現在のあなたの場所 処理:AI が「市場文化」を分析します 出力:利用可能性の赤信号ランプ(🟢 入手容易、🟡 特産品、🔴 入手不可能)およびスマートな代替案 このプロジェクトでは、金銭的な費用は一切掛けず、スピードを重視したプロトタイピングを可能にするツールを使用していましたが、コンポーネントは以下の通りです: | コンポーネント | ツール | 理由 | | --- | --- | --- | | 脳(AI) | Google AI Studio (Gemini) | 広範で無料な機能と優れた推論力 | | 高速プロトタイピング | Bolt.new | プロンプトから完全に機能するアプリケーションを生成 | | ウェブコードエディタ | WebStorm / VS Code | 技術的な改善とバージョン管理のコントロール | | デプロイ | Vercel | 個人のプロジェクトにとって迅速で無料なホスティング | スーパーマーケットの在庫 API に接続するのは複雑であるため、私たちは代わりに AI の知識ベースを使用し、食材の入手確率を推定しました。例:「Achiote をマドリードで見つける確率は?」-> AI:「ラバピエスでラテン系の店では 90%、通常のスーパーでは 20%」 開発過程で、いくつかの「定番の」問題に遭遇しましたが、これはあなたの時間を節約します: - Bolt.new を使用する場合、時にはコードが .env ファイルにあるにもかかわらず GEMINI_API_KEY を検出しないことがあります。 解決策:Vite を使用している場合は、変数を VITE_ プレフィックス付きで宣言することを確認してください: ```javascript const tempKey = import.meta.env.VITE_GEMINI_API_KEY; ``` - Google はモデルを常に変更します。API 呼び出しで 404 エラーが発生した場合、モデル名を確認してください。現在、gemini-1.5-flash が最も安定していますが、プレビュー環境ではあなたの地域とアクセス状況に応じて gemini-3-flash-preview の方が必要になる可能性があります。 ```javascript const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); ``` プロトタイプが Bolt で機能した後の次の段階は、完全にコントロールを備えた私のローカル環境へそれを移植する作業でした: - リポジトリをクローン:`git clone` - 依存性をインストール:`npm install` - Git を設定:ZIP をダウンロードした場合、`git init` で初期化し、ソースを接続してください。 - デプロイ:GitHub アカウントと Vercel を接続すれば完成です! YouCanChef は単なるアプリではなく、旅の相棒です。適切な AI を用いれば、料理の国境線は消滅することを私は学びました。次の段階は何ですか?私は「味の代替エンジン」を開発中であり、これは不可能な場合、食材が見つからない際、味のプロファイルを分析して正確な代替案を提案します。 あなた自身、旅用のアシスタントを作成するのはいかがでしょうか?コメントで、旅人向けに AI に他に何を活用させたいとおっしゃってください!🌍✈️ ヒント:完璧なアプリを待つかどうか。MVP をリリースし、AI が良い料理のアドバイスをくれるか試し、その後写真を地図に加えてください。

Original Content

YouCanChef: ¿Cómo creé mi propio asistente de cocina nómada con IA? ¡Hola, nómadas y amantes de la cocina! Como alguien que viaja constantemente por el mundo, me encanta replicar las recetas que pruebo en los restaurantes locales. Sin embargo, el gran reto es: ¿Cómo encuentro estos ingredientes en un país diferente? Hoy les comparto cómo construí "YouCanChef", una herramienta que analiza ingredientes y te dice si son fáciles de encontrar en tu ubicación actual o cómo reemplazarlos. La idea es simple pero poderosa: Input: Nombre del plato o lista de ingredientes + Tu ubicación actual. Proceso: La IA analiza la "Cultura de Mercado" local. Output: Un semáforo de disponibilidad (🟢 Fácil, 🟡 Especialidad, 🔴 Inexistente) y sugerencias de sustitutos inteligentes. Para este proyecto, utilicé herramientas que permiten prototipar a velocidad luz sin gastar un centavo: Componente Herramienta ¿Por qué? Cerebro (IA) Google AI Studio (Gemini) Capa gratuita generosa y excelente razonamiento. Prototipado Rápido Bolt.new Genera aplicaciones completas a partir de prompts. Editor de Código WebStorm / VS Code Para refinamiento técnico y control de versiones. Despliegue Vercel Hosting rápido y gratuito para proyectos personales. En lugar de conectar APIs de inventarios de supermercados (que es complejo), usamos la base de conocimiento de la IA para estimar la probabilidad de encontrar un ingrediente. Ejemplo: "¿Qué tan probable es encontrar Achiote en Madrid?" -> IA: "90% en tiendas latinas de Lavapiés, 20% en supermercados comunes". Durante la creación, me encontré con un par de "clásicos" que te ahorrarán tiempo: Si usas Bolt.new, a veces el código no detecta tu GEMINI_API_KEY aunque esté en el archivo .env. Solución: Asegúrate de que la variable esté declarada con el prefijo VITE_ si estás usando Vite: const tempKey = import.meta.env.VITE_GEMINI_API_KEY; Google actualiza sus modelos constantemente. Si recibes un error 404 al llamar a la API, verifica el nombre del modelo. Actualmente, gemini-1.5-flash es la opción más estable, pero en entornos de preview podrías necesitar gemini-3-flash-preview (según tu región y acceso). const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' }); Una vez que el prototipo funcionó en Bolt, el siguiente paso fue llevarlo a mi entorno local para tener control total: Clonar el repo: git clone Instalar dependencias: npm install Configurar Git: Si descargaste el ZIP, inicializa con git init y conecta tu origen. Deploy: Conecta tu cuenta de GitHub con Vercel y ¡listo! YouCanChef no es solo una app, es un compañero de viaje. Me enseñó que con la IA adecuada, las fronteras culinarias desaparecen. ¿Qué sigue? Estoy trabajando en un motor de "Sustitución de sabores" que analice perfiles de sabor para sugerir reemplazos exactos cuando un ingrediente es imposible de hallar. ¿Te animas a construir tu propio asistente de viajes? ¡Cuéntame en los comentarios qué otra utilidad le darías a la IA para nómadas! 🌍✈️ Tip: No esperes a tener la app perfecta. Lanza el MVP, prueba si la IA te da buenos consejos de cocina y luego añade las fotos y los mapas.