Chat Application Template

Complete Next.js + OpenAI chat application with streaming responses

Quick Start

# Clone template
git clone https://github.com/wearehybrid/chat-template.git
cd chat-template

# Install dependencies
npm install

# Set environment variables
cp .env.example .env.local
# Add your OPENAI_API_KEY

# Run development server
npm run dev

Features

✨ Core Features

• Real-time streaming responses
• Message history persistence
• Typing indicators
• Error handling & retry
• Mobile-responsive design

🔧 Technical Stack

• Next.js 14 with App Router
• OpenAI GPT-4 integration
• Tailwind CSS styling
• Vercel AI SDK
• TypeScript support

Code Structure

chat-app/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts       # OpenAI API integration
│   ├── components/
│   │   ├── Chat.tsx          # Main chat component
│   │   ├── Message.tsx       # Message bubble
│   │   └── MessageInput.tsx  # Input field
│   └── page.tsx              # Home page
├── lib/
│   └── openai.ts             # OpenAI client setup
└── types/
    └── chat.ts               # TypeScript definitions

Key Components

API Route (app/api/chat/route.ts)

import { OpenAIStream, StreamingTextResponse } from 'ai'
import { openai } from '@/lib/openai'

export async function POST(req: Request) {
  const { messages } = await req.json()
  
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    stream: true,
    messages,
  })
  
  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}

Chat Component

'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 p-4">
        {messages.map(message => (
          <Message key={message.id} message={message} />
        ))}
      </div>
      <MessageInput 
        input={input}
        handleInputChange={handleInputChange}
        handleSubmit={handleSubmit}
      />
    </div>
  )
}

Customization Options

Models

• GPT-4 Turbo
• GPT-3.5 Turbo
• Claude 3
• Custom models

Features

• File uploads
• Voice input
• Code highlighting
• Export conversations

Styling

• Dark/light themes
• Custom colors
• Message animations
• Mobile layouts

Deployment

Vercel (Recommended)

One-click deployment with automatic scaling

vercel --prod

• Automatic HTTPS
• Global CDN
• Environment variables

Docker

Containerized deployment for any platform

docker build -t chat-app .

• Consistent environments
• Easy scaling
• Platform agnostic

Build Your Chat App

Get started with our production-ready chat template

Start Your Project View on GitHub