Next.jsとLangChainで構築するスマートAI献立プランナー：信頼できるJSON出力

"Sure, here is a meal plan. For Monday, you could have scrambled eggs... then for lunch, maybe a chicken salad. Dinner could be salmon..."

npx create-next-app@latest ai-meal-planner --typescript --tailwind --eslint
cd ai-meal-planner

npm install langchain @langchain/openai zod

# .env.local
OPENAI_API_KEY="your-openai-api-key-here"

npm run dev

// app/page.tsx
'use client';

import { useState } from 'react';

export default function Home() {
  const [goals, setGoals] = useState('');
  const [restrictions, setRestrictions] = useState('');
  const [mealPlan, setMealPlan] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setMealPlan(null);

    try {
      const response = await fetch('/api/generate-meal-plan', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ goals, restrictions }),
      });

      if (!response.ok) {
        throw new Error('Failed to generate meal plan');
      }

      const data = await response.json();
      setMealPlan(data.mealPlan);
    } catch (error) {
      console.error(error);
      alert('An error occurred. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-50">
      <div className="w-full max-w-2xl bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
          AI食事プランナー 🥗
        </h1>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label htmlFor="goals" className="block text-gray-700 font-medium mb-2">
              食事目標
            </label>
            <input
              type="text"
              id="goals"
              value={goals}
              onChange={(e) => setGoals(e.target.value)}
              className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
              placeholder="例：高タンパク質、低炭水化物"
              required
            />
          </div>
          <div className="mb-6">
            <label htmlFor="restrictions" className="block text-gray-700 font-medium mb-2">
              アレルギー・制限事項
            </label>
            <input
              type="text"
              id="restrictions"
              value={restrictions}
              onChange={(e) => setRestrictions(e.target.value)}
              className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
              placeholder="例：グルテンフリー、ナッツ類なし"
            />
          </div>
          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-blue-600 text-white p-3 rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-400"
          >
            {isLoading ? '生成中...' : '食事プランを生成'}
          </button>
        </form>

        {mealPlan && (
          <div className="mt-8">
            <h2 className="text-2xl font-bold mb-4 text-center text-gray-800">あなたの7日間食事プラン</h2>
            {/* 食事プランをここにレンダリングします */}
          </div>
        )}
      </div>
    </main>
  );
}

mkdir -p app/api/generate-meal-plan
touch app/api/generate-meal-plan/route.ts

// app/api/generate-meal-plan/route.ts
import { NextResponse } from 'next/server';
import { z } from 'zod';
import { ChatOpenAI } from '@langchain/openai';
import { StructuredOutputParser } from 'langchain/output_parsers';
import { PromptTemplate } from '@langchain/core/prompts';

// 単一の食事のスキーマを定義
const mealSchema = z.object({
  dish_name: z.string().describe('The name of the dish.'),
  calories: z.number().describe('Estimated calories for the meal.'),
});

// 1日の完全なプランのスキーマを定義
const dailyPlanSchema = z.object({
  breakfast: mealSchema,
  lunch: mealSchema,
  dinner: mealSchema,
});

// 週間食事プラン全体のスキーマを定義
const weeklyPlanSchema = z.object({
  monday: dailyPlanSchema,
  tuesday: dailyPlanSchema,
  wednesday: dailyPlanSchema,
  thursday: dailyPlanSchema,
  friday: dailyPlanSchema,
  saturday: dailyPlanSchema,
  sunday: dailyPlanSchema,
});

export async function POST(req: Request) {
  try {
    const body = await req.json();
    const { goals, restrictions } = body;

    // 1. 出力パーサーを初期化
    const parser = StructuredOutputParser.fromZodSchema(weeklyPlanSchema);

    // 2. プロンプトテンプレートを作成
    const prompt = new PromptTemplate({
      template: `You are an expert nutritionist. Generate a 7-day meal plan based on the user's goals and restrictions.
      {format_instructions}
      User's Goals: {goals}
      Dietary Restrictions: {restrictions}
      `,
      inputVariables: ['goals', 'restrictions'],
      partialVariables: { format_instructions: parser.getFormatInstructions() },
    });
    
    // 3. チャットモデルを初期化
    const model = new ChatOpenAI({
      modelName: 'gpt-3.5-turbo',
      temperature: 0.7,
    });
    
    // 4. チェーンを作成して実行
    const chain = prompt.pipe(model).pipe(parser);
    const mealPlan = await chain.invoke({
      goals: goals,
      restrictions: restrictions,
    });

    return NextResponse.json({ mealPlan }, { status: 200 });
  } catch (error) {
    console.error('Error generating meal plan:', error);
    return NextResponse.json({ error: 'Failed to generate meal plan.' }, { status: 500 });
  }
}

// app/page.tsx（メインコンポーネント内にこれを追加）

// ...（Homeコンポーネント内、フォームの後に）

{mealPlan && (
  <div className="mt-8 w-full">
    <h2 className="text-2xl font-bold mb-4 text-center text-gray-800">あなたの7日間食事プラン</h2>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {Object.entries(mealPlan).map(([day, meals]) => (
        <div key={day} className="bg-gray-100 p-4 rounded-lg">
          <h3 className="text-xl font-semibold capitalize mb-2 text-gray-700">{day}</h3>
          <ul>
            {(Object.entries(meals) as [string, { dish_name: string; calories: number }][]).map(([mealType, details]) => (
              <li key={mealType} className="mb-1">
                <span className="font-semibold capitalize">{mealType}:</span> {details.dish_name} ({details.calories} kcal)
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
)}