人とのお悩み相談チャットサービスの構築: Next.js 13 + ChatGPT

はじめに

この記事では、Next.js 13とOpenAIのChatGPTを組み合わせて、人とのお悩み相談チャットサービスを作成する方法を紹介します。このサービスは、ユーザーがチャット形式で悩みを共有し、チャットボットが適切なアドバイスや情報を提供するものです。

プロジェクトの設定

まず、Next.jsプロジェクトを作成します。

npx create-next-app your-app-name
cd your-app-name
npm install

ChatGPTのAPIキーの取得

次に、OpenAIのサイトにアクセスし、APIキーを取得します。キーは.env.localファイルに保存しましょう。

NEXT_PUBLIC_OPENAI_API_KEY=your_api_key

ChatGPTとの通信を行うためのAPIルートの設定

pages/api/chat.jsファイルを作成し、ChatGPTとの通信を行うためのエンドポイントを設定します。

import axios from "axios";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { input } = req.body;
    const response = await axios.post(
      "https://api.openai.com/v1/engines/davinci-codex/completions",
      {
        prompt: input,
        max_tokens: 100,
        n: 1,
        stop: null,
        temperature: 0.8,
      },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
        },
      }
    );

    const chatResponse = response.data.choices[0].text;
    res.status(200).json({ message: chatResponse });
  } else {
    res.status(405).end();
  }
}

フロントエンドの構築

pages/index.jsファイルに、チャット画面を表示するコンポーネントを作成します。

import { useState } from "react";
import axios from "axios";

export default function Home() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);

  async function handleSubmit(e) {
    e.preventDefault();

    setMessages([...messages, { type: "user", content: input }]);
    setInput("");

    const response = await axios.post("/api/chat", { input });
    setMessages([
      ...messages,
      { type: "user", content: input },
      { type: "bot", content: response.data.message },
    ]);
  }

  return (
    <div>
      {/* ここにチャット画面のコンポーネントを記述します */}
    </div>
  );
}

チャット画面のデザイン

CSSを使ってチャット画面をデザインしましょう。

styles/Home.module.cssファイルを作成し、以下のスタイルを適用します。

.chatContainer {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #f1f1f1;
  border-radius: 5px;
  height: 70vh;
  overflow-y: scroll;
}

.chatInput {
  display: flex;
  margin-top: 1rem;
}

.chatInput input {
  flex-grow: 1;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.chatInput button {
  background-color: #0070f3;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  margin-left: 1rem;
  cursor: pointer;
}

.message {
  margin-bottom: 1rem;
}

.userMessage {
  text-align: right;
}

.botMessage {
  text-align: left;
}

コンポーネントにスタイルを適用

pages/index.jsファイルで、先ほど作成したスタイルを適用します。

import styles from "../styles/Home.module.css";

// ...

return (
  <div>
    <h1>お悩み相談チャットサービス</h1>
    <div className={styles.chatContainer}>
      {messages.map((message, index) => (
        <div
          key={index}
          className={`${styles.message} ${
            message.type === "user" ? styles.userMessage : styles.botMessage
          }`}
        >
          {message.content}
        </div>
      ))}
    </div>
    <form className={styles.chatInput} onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="お悩みを入力してください"
      />
      <button type="submit">送信</button>
    </form>
  </div>
);

アプリケーションの起動と確認

アプリケーションを起動して、チャットサービスが正しく動作しているか確認します。

npm run dev

以上で、Next.js 13とChatGPTを組み合わせた人とのお悩み相談チャットサービスの作成が完了しました。ユーザーがチャット形式で悩みを共有すれば、チャットボットが適切なアドバイスや情報を提供してくれます。このプロジェクトをさらに発展させることで、ユーザーがさまざまな悩みに対してリアルタイムで対応できるチャットサービスを提供することができます。

ネタバラシ

上記は、Model:GPT-4のChatGPTに以下のテキストを与え、生成したテキストになります。

技術ブログを書きたいです。
Next.js 13 + ChatGPT を組み合わせて人とのお悩み相談チャットサービスを作り、それを細かく言語化して下さい。

入門者が本人のアウトプットで書いた記事とほぼ同じ様なクオリティの記事ができあがりました。
ぱっと見では、人間が書いたものなのか？AIが書いたものなのか？
その判断は知識がない人では判断出来ないと思います。いや、むしろ判断しなくてもよいのかもしれませんね。

このテキストもAIが生成しているものかもしれませんので。