# 1. Next.jsプロジェクトを作成
npx create-next-app@latest llm-chatbot-ui --typescript --tailwind --eslint
# 2. プロジェクトディレクトリに移動
cd llm-chatbot-ui
# 3. Vercel AI SDKをインストール
npm install ai

// app/api/chat/route.ts
import { StreamingTextResponse } from 'ai';
// バックエンドAPIのURL
const FASTAPI_URL = 'http://127.0.0.1:8000/ask/';
export async function POST(req: Request) {
  const { messages } = await req.json();
  // 最後のメッセージを質問として取得
  const lastMessage = messages[messages.length - 1];
  const question = lastMessage.content;
  // FastAPIに送信するためのフォームデータを作成
  const formData = new FormData();
  formData.append('question', question);
  const response = await fetch(FASTAPI_URL, {
    method: 'POST',
    body: formData,
  });
  // FastAPIからのレスポンスをストリーミングで返す
  // この実装はバックエンドがストリーミングをサポートしている必要があります。
  // 今回は簡略化のため、ストリーミングではないレスポンスを想定します。
  const data = await response.json();
  const answer = data.answer || 'Sorry, I could not get an answer.';
  // StreamingTextResponseを使ってテキストをストリームとして返す
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode(answer));
      controller.close();
    },
  });
  return new StreamingTextResponse(stream);
}

// app/page.tsx
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    // ここでNext.jsのAPIルートを指定
    api: '/api/chat',
  });
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          <strong>{m.role === 'user' ? 'User: ' : 'AI: '}</strong>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}