Build ChatGPT from Scratch: Complete an AI Chat Application in 7 Days

Implement Streaming Conversation

// app/api/chat/route.ts
import { OpenAI } from 'openai';
import { StreamingTextResponse, OpenAIStream } from 'ai';
import { prisma } from '@/lib/prisma';

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

export async function POST(req: Request) {
  const { messages, conversationId, model = 'gpt-3.5-turbo' } = await req.json();
  
  try {
    // Create streaming response
    const response = await openai.chat.completions.create({
      model,
      messages,
      stream: true,
      temperature: 0.7,
      max_tokens: 2000,
    });
    
    // Convert to readable stream
    const stream = OpenAIStream(response, {
      async onCompletion(completion) {
        // Save message to database
        await prisma.message.create({
          data: {
            role: 'assistant',
            content: completion,
            conversationId,
            model,
            tokens: completion.split(' ').length * 1.3, // Estimate
          },
        });
      },
    });
    
    return new StreamingTextResponse(stream);
  } catch (error) {
    console.error('Chat API Error:', error);
    return new Response('Internal Server Error', { status: 500 });
  }
}

// components/chat/ChatInterface.tsx
'use client';

import { useState, useRef, useEffect } from 'react';
import { useChat } from 'ai/react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import ModelSelector from './ModelSelector';

export default function ChatInterface() {
  const [selectedModel, setSelectedModel] = useState('gpt-3.5-turbo');
  const messagesEndRef = useRef<HTMLDivElement>(null);
  
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
    body: {
      model: selectedModel,
    },
    onError: (error) => {
      console.error('Chat error:', error);
      toast.error('Failed to send message, please try again');
    },
  });
  
  // Auto-scroll to bottom
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);
  
  return (
    <div className="flex flex-col h-screen max-w-4xl mx-auto">
      {/* Header */}
      <div className="border-b p-4 flex justify-between items-center">
        <h1 className="text-xl font-semibold">ChatGPT Clone</h1>
        <ModelSelector 
          value={selectedModel} 
          onChange={setSelectedModel}
        />
      </div>
      
      {/* Message List */}
      <div className="flex-1 overflow-y-auto p-4">
        <MessageList messages={messages} />
        <div ref={messagesEndRef} />
      </div>
      
      {/* Input Area */}
      <div className="border-t p-4">
        <MessageInput
          value={input}
          onChange={handleInputChange}
          onSubmit={handleSubmit}
          isLoading={isLoading}
        />
      </div>
    </div>
  );
}