Build a Next.js Chatbot

npx create-next-app@latest my-chatbot
cd my-chatbot
npm install openai ai

import OpenAI from "openai";
import { StreamingTextResponse, OpenAIStream } from "ai";

const client = new OpenAI({
  apiKey: process.env.CHEAPESTINFERENCE_API_KEY,
  baseURL: "https://api.cheapestinference.ai/v1",
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await client.chat.completions.create({
    model: "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo",
    messages,
    stream: true,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'bg-blue-100' : 'bg-gray-100'}>
            <p>{m.content}</p>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Say something..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

npm run dev