NextJS(App Router)を使ってChatGPTとチャットできるアプリを作成してみた

import { NextRequest, NextResponse } from 'next/server';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export const POST = async (request: NextRequest) => {
  const messages = await request.json();

  // completion: 完了、完成
  const completions = await openai.chat.completions.create({
    model: 'gpt-4o-2024-05-13',
    messages,
    stream: true
  })

  // レスポンスのデータを読み取るためのreaderを作成
  const reader = completions.toReadableStream().getReader();
  const decoder = new TextDecoder('utf-8');

  // データを返すための変数を作成
  const stream = new TransformStream();
  const writer = stream.writable.getWriter();
  const encoder = new TextEncoder();

  // 先にレスポンスを返すために即時関数で非同期実行する
  (async () => {
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        break;
      }

      const decodedValue = decoder.decode(value);
      const response = encoder.encode(`data: ${decodedValue}\n\n`);
      writer.write(response)
    }

    writer.close();
  })();

  return new NextResponse(stream.readable, {
    status: 200,
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive",
      "Content-Encoding": "none"
    }
  });
}

'use client';

import { ChatForm } from "@/components/ui/ChatForm";
import { ChatMain } from "@/components/ui/ChatMain";
import { Header } from "@/components/ui/Header";
import { ChatHistories } from "@/types";
import { Box } from "@mui/material";
import React, { useState } from "react";

export const Chat = () => {
  // 会話履歴を管理するためのstate
  const [chatHistories, setChatHistories] = useState<ChatHistories>([]);

  // チャット入力欄の値を管理するためのstate
  const [message, setMessage] = useState("");

  const sendMessage = async () => {
    if (message === "") return;

    const newChatHistories: ChatHistories = [
      ...chatHistories,
      {
        id: chatHistories[chatHistories.length - 1]?.id + 1 || 0,
        content: message,
        role: "user",
      },
    ]

    // 会話履歴の更新
    setChatHistories(newChatHistories);

    // APIを叩いてbotの返答を取得
    const response = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify(newChatHistories),
    });

    const reader = response.body?.getReader();
    const decoder = new TextDecoder("utf-8");

    if (!reader) return false;

    setChatHistories((prev) => [
      ...prev,
      {
        id: prev[prev.length - 1]?.id + 1 || 0,
        content: "",
        role: "assistant",
      },
    ]);

    while(true) {
      const { done, value } = await reader.read();

      if (done) break;
      if (!value) continue;

      const decodedValue = decoder.decode(value);

      const lines = decodedValue.split("data: ")
        .map((line) => line.trim())
        .filter((line) => line !== "");

      for (const line of lines) {
        try {
          const chunk = JSON.parse(line);
          const text = chunk.choices[0].delta.content || '';

          setChatHistories((prev) => (
            prev.map((chatHistory, index) => {
              const lastIndex = prev.length - 1;
              if (index === lastIndex) {
                return {
                  id: chatHistory.id,
                  content: chatHistory.content + text,
                  role: "assistant",
                };
              }
              return chatHistory
            }
          )));
        } catch (error) {
          console.error(error);
        }
      }
    }

    // チャット入力欄の初期化
    setMessage("");
  };

  return (
    <Box
      component="main"
      sx={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100dvh",
        width: "100vhw",
      }}
    >
      <Box sx={{ width: "100%" }}>
        <Header />
      </Box>
      <Box sx={{ flexGrow: 1, width: "100%" }}>
        <ChatMain chatHistories={chatHistories}/>
      </Box>
      <Box sx={{ width: "100%" }}>
        <ChatForm message={message} setMessage={setMessage} sendMessage={sendMessage}/>
      </Box>
    </Box>
  );
};