概要

Next.jsを活用して、AI機能を実装する際にOpenAI APIを組み込むことで、強力なAIベースのツールやアプリケーションを開発できます。たとえば、チャットボットやコンテンツ生成アプリケーションなどが簡単に作成できます。OpenAI APIは、自然言語処理のモデルを使って、ユーザーの入力に対するレスポンスを生成するための機能を提供します。 この記事では、Next.jsとOpenAI APIを使用して、AI機能を効率よく実装する方法について詳しく解説します。

必要な手順

OpenAI APIのセットアップ

まず、OpenAI APIの利用にはAPIキーが必要です。次に、環境変数を使ってAPIキーを安全に管理します。Next.jsプロジェクトのルートに.env.localファイルを作成し、APIキーを設定します。

NEXT_PUBLIC_OPENAI_API_KEY=your_api_key_here

次に、openaiパッケージをインストールします。

npm install openai

APIルートの作成

Next.jsのAPIルートを使用して、サーバーサイドからOpenAI APIを呼び出します。以下は、ユーザーの入力に基づいてOpenAIに問い合わせを行い、生成されたテキストを返すシンプルなAPIルートの例です。

// pages/api/chatbot.js
import { OpenAI } from 'openai';
const openai = new OpenAI(process.env.NEXT_PUBLIC_OPENAI_API_KEY);
export default async function handler(req, res) {
  const { message } = req.body;
  
  const response = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: message,
    max_tokens: 150,
  });
  res.status(200).json({ reply: response.data.choices[0].text });
}

チャットボットUIの構築

Next.jsのフロントエンドで、チャットボットのインターフェースを作成します。WebSocketやSocket.IOを使用して、リアルタイムでメッセージをやり取りすることで、ユーザーにスムーズな体験を提供できます。

// components/ChatBot.js
import { useState, useEffect } from 'react';
import io from 'socket.io-client';
let socket;
export default function ChatBot() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    socket = io();
    socket.on('response', (reply) => {
      setMessages((prev) => [...prev, { sender: 'bot', text: reply }]);
    });
    return () => {
      socket.disconnect();
    };
  }, []);
  const sendMessage = () => {
    setMessages((prev) => [...prev, { sender: 'user', text: message }]);
    socket.emit('message', message);
    setMessage('');
  };
  return (
    <div>
      <h1>AIチャットボット</h1>
      <div className="chatbox">
        {messages.map((msg, index) => (
          <div key={index} className={msg.sender === 'user' ? 'user-msg' : 'bot-msg'}>
            {msg.sender === 'user' ? 'You: ' : 'Bot: '} {msg.text}
          </div>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="質問を入力してください..."
      />
      <button onClick={sendMessage}>送信</button>
    </div>
  );
}

コンテンツ生成機能の実装

OpenAI APIは、ブログ記事の生成や要約などのコンテンツ生成にも適しています。以下は、ユーザーが入力したトピックに基づいて記事の概要を生成する例です。

const generateSummary = async (topic) => {
  const response = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: `Write a brief summary of ${topic}.`,
    max_tokens: 200,
  });
  return response.data.choices[0].text;
};

このように、様々なAIベースの機能をNext.jsアプリケーションに統合することが可能です。

まとめ

Next.jsとOpenAI APIを活用することで、強力なAI機能を持つWebアプリケーションを効率的に構築できます。リアルタイムチャットやコンテンツ生成機能など、幅広いユースケースに応用可能です。OpenAIの豊富なAPIを駆使して、ユーザーに優れた体験を提供できるアプリを開発してみましょう。