"当然，这是一个餐饮计划。周一，你可以吃炒鸡蛋...然后午餐，也许是鸡肉沙拉。晚餐可以是三文鱼..."

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('生成餐饮计划失败');
      }

      const data = await response.json();
      setMealPlan(data.mealPlan);
    } catch (error) {
      console.error(error);
      alert('发生错误，请重试。');
    } 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';

// 定义单餐的 Schema
const mealSchema = z.object({
  dish_name: z.string().describe('菜名。'),
  calories: z.number().describe('该餐的估计卡路里。'),
});

// 定义全天计划的 Schema
const dailyPlanSchema = z.object({
  breakfast: mealSchema,
  lunch: mealSchema,
  dinner: mealSchema,
});

// 定义整周餐饮计划的 Schema
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: `你是一位专业的营养师。根据用户的目标和限制生成 7 天餐饮计划。
      {format_instructions}
      用户目标: {goals}
      饮食限制: {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);
    return NextResponse.json({ error: '生成餐饮计划失败。' }, { 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} 千卡)
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
)}