Building Your First AI Chatbot with Next.js and OpenAI

// Basic chatbot message interface
interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: Date;
  metadata?: {
    tokens?: number;
    model?: string;
    latency?: number;
  };
}

// Chatbot configuration
interface ChatbotConfig {
  model: 'gpt-4' | 'gpt-3.5-turbo';
  maxTokens: number;
  temperature: number;
  systemPrompt: string;
  conversationHistory: ChatMessage[];
}

// Example system prompt for a helpful assistant
const SYSTEM_PROMPT = `You are a helpful AI assistant created to provide accurate, friendly, and informative responses. You should:
- Be conversational and engaging
- Provide clear and detailed explanations
- Ask clarifying questions when needed
- Admit when you don't know something
- Be respectful and professional at all times`;
            

// Create new Next.js project
npx create-next-app@latest ai-chatbot --typescript --tailwind --eslint --app

// Navigate to project directory
cd ai-chatbot

// Install additional dependencies
npm install openai lucide-react @radix-ui/react-dialog @radix-ui/react-toast

// Install development dependencies
npm install -D @types/node @types/react @types/react-dom

// Create environment variables file
// .env.local
OPENAI_API_KEY=your_openai_api_key_here
NEXT_PUBLIC_APP_NAME=AI Chatbot
NEXT_PUBLIC_APP_VERSION=1.0.0

// .env.example (for version control)
OPENAI_API_KEY=your_api_key_here
NEXT_PUBLIC_APP_NAME=AI Chatbot
NEXT_PUBLIC_APP_VERSION=1.0.0

// package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "type-check": "tsc --noEmit"
  }
}

// tsconfig.json paths configuration
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/types/*": ["types/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}
            

// components/chat/ChatContainer.tsx
'use client';
import React, { useState, useRef, useEffect } from 'react';
import { MessageList } from './MessageList';
import { ChatInput } from './ChatInput';
import { ChatHeader } from './ChatHeader';
import { ChatMessage } from '@/types/chat';

interface ChatContainerProps {
  className?: string;
}

export function ChatContainer({ className = '' }: ChatContainerProps) {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const handleSendMessage = async (content: string) => {
    if (!content.trim() || isLoading) return;

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: content.trim(),
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [...messages, userMessage],
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to get response');
      }

      const data = await response.json();
      
      const assistantMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: data.message,
        timestamp: new Date(),
        metadata: data.metadata,
      };

      setMessages(prev => [...prev, assistantMessage]);
    } catch (err) {
      setError('Failed to send message. Please try again.');
      console.error('Chat error:', err);
    } finally {
      setIsLoading(false);
    }
  };

  const handleClearChat = () => {
    setMessages([]);
    setError(null);
  };

  return (
    <div className={`flex flex-col h-full bg-white rounded-lg shadow-lg ${className}`}>
      <ChatHeader onClearChat={handleClearChat} messageCount={messages.length} />
      
      <div className="flex-1 overflow-hidden">
        <MessageList 
          messages={messages} 
          isLoading={isLoading}
          error={error}
        />
        <div ref={messagesEndRef} />
      </div>

      <ChatInput 
        onSendMessage={handleSendMessage}
        isLoading={isLoading}
        disabled={!!error}
      />
    </div>
  );
}

// components/chat/MessageBubble.tsx
import React from 'react';
import { ChatMessage } from '@/types/chat';
import { User, Bot, Copy, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface MessageBubbleProps {
  message: ChatMessage;
  onCopy?: (content: string) => void;
  onRegenerate?: (messageId: string) => void;
}

export function MessageBubble({ message, onCopy, onRegenerate }: MessageBubbleProps) {
  const isUser = message.role === 'user';
  
  const handleCopy = () => {
    navigator.clipboard.writeText(message.content);
    onCopy?.(message.content);
  };

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4 group`}>
      <div className={`max-w-[80%] ${isUser ? 'order-2' : 'order-1'}`}>
        <div className={`flex items-start gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
          {/* Avatar */}
          <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
            isUser 
              ? 'bg-blue-500 text-white' 
              : 'bg-gray-100 text-gray-600 border-2 border-gray-200'
          }`}>
            {isUser ? <User size={16} /> : <Bot size={16} />}
          </div>

          {/* Message Content */}
          <div className={`relative ${isUser ? 'text-right' : 'text-left'}`}>
            <div className={`inline-block px-4 py-2 rounded-2xl ${
              isUser
                ? 'bg-blue-500 text-white rounded-br-md'
                : 'bg-gray-100 text-gray-800 rounded-bl-md border border-gray-200'
            }`}>
              <p className="text-sm leading-relaxed whitespace-pre-wrap">
                {message.content}
              </p>
            </div>

            {/* Timestamp and Actions */}
            <div className={`flex items-center gap-2 mt-1 text-xs text-gray-500 ${
              isUser ? 'justify-end' : 'justify-start'
            }`}>
              <span>{message.timestamp.toLocaleTimeString()}</span>
              
              {/* Action buttons (shown on hover) */}
              <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleCopy}
                  className="h-6 w-6 p-0 hover:bg-gray-200"
                  title="Copy message"
                >
                  <Copy size={12} />
                </Button>
                
                {!isUser && onRegenerate && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onRegenerate(message.id)}
                    className="h-6 w-6 p-0 hover:bg-gray-200"
                    title="Regenerate response"
                  >
                    <RefreshCw size={12} />
                  </Button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
            

// app/api/chat/route.ts
import { NextRequest, NextResponse } from 'next/server';
import OpenAI from 'openai';
import { ChatMessage } from '@/types/chat';

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

// System prompt for the chatbot
const SYSTEM_PROMPT = `You are a helpful AI assistant built with Next.js and OpenAI. You should:
- Provide accurate, helpful, and friendly responses
- Be conversational and engaging
- Ask clarifying questions when needed
- Admit when you don't know something
- Keep responses concise but informative
- Maintain context throughout the conversation`;

export async function POST(request: NextRequest) {
  try {
    // Parse and validate request
    const body = await request.json();
    const { messages } = body;

    if (!messages || !Array.isArray(messages)) {
      return NextResponse.json(
        { error: 'Invalid messages format' },
        { status: 400 }
      );
    }

    // Validate message format
    const validMessages = messages.filter((msg: ChatMessage) => 
      msg.content && 
      msg.content.trim().length > 0 && 
      ['user', 'assistant', 'system'].includes(msg.role)
    );

    if (validMessages.length === 0) {
      return NextResponse.json(
        { error: 'No valid messages provided' },
        { status: 400 }
      );
    }

    // Prepare messages for OpenAI
    const openaiMessages = [
      { role: 'system' as const, content: SYSTEM_PROMPT },
      ...validMessages.map((msg: ChatMessage) => ({
        role: msg.role as 'user' | 'assistant',
        content: msg.content,
      })),
    ];

    // Call OpenAI API
    const startTime = Date.now();
    const completion = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: openaiMessages,
      max_tokens: 1000,
      temperature: 0.7,
      presence_penalty: 0.1,
      frequency_penalty: 0.1,
    });

    const endTime = Date.now();
    const latency = endTime - startTime;

    // Extract response
    const assistantMessage = completion.choices[0]?.message?.content;

    if (!assistantMessage) {
      throw new Error('No response from OpenAI');
    }

    // Return response with metadata
    return NextResponse.json({
      message: assistantMessage,
      metadata: {
        model: completion.model,
        tokens: completion.usage?.total_tokens || 0,
        latency,
        timestamp: new Date().toISOString(),
      },
    });

  } catch (error) {
    console.error('Chat API error:', error);

    // Handle different types of errors
    if (error instanceof Error) {
      if (error.message.includes('rate limit')) {
        return NextResponse.json(
          { error: 'Rate limit exceeded. Please try again later.' },
          { status: 429 }
        );
      }

      if (error.message.includes('insufficient_quota')) {
        return NextResponse.json(
          { error: 'API quota exceeded. Please contact support.' },
          { status: 503 }
        );
      }
    }

    return NextResponse.json(
      { error: 'Failed to process your message. Please try again.' },
      { status: 500 }
    );
  }
}

// lib/openai-config.ts
export const OPENAI_CONFIG = {
  models: {
    'gpt-4': {
      maxTokens: 8192,
      costPer1KTokens: 0.03,
      description: 'Most capable model, best for complex tasks',
    },
    'gpt-3.5-turbo': {
      maxTokens: 4096,
      costPer1KTokens: 0.002,
      description: 'Fast and efficient for most conversations',
    },
  },
  defaultParams: {
    temperature: 0.7,
    max_tokens: 1000,
    presence_penalty: 0.1,
    frequency_penalty: 0.1,
  },
  systemPrompts: {
    helpful: `You are a helpful AI assistant...`,
    creative: `You are a creative AI assistant...`,
    analytical: `You are an analytical AI assistant...`,
  },
} as const;

// lib/token-counter.ts
export function estimateTokenCount(text: string): number {
  // Rough estimation: 1 token ≈ 4 characters for English text
  return Math.ceil(text.length / 4);
}

export function validateTokenLimit(messages: ChatMessage[], maxTokens: number): boolean {
  const totalTokens = messages.reduce((sum, msg) => 
    sum + estimateTokenCount(msg.content), 0
  );
  return totalTokens <= maxTokens;
}

export function truncateConversation(messages: ChatMessage[], maxTokens: number): ChatMessage[] {
  let tokenCount = 0;
  const truncated: ChatMessage[] = [];
  
  // Keep recent messages within token limit
  for (let i = messages.length - 1; i >= 0; i--) {
    const msgTokens = estimateTokenCount(messages[i].content);
    if (tokenCount + msgTokens > maxTokens) break;
    
    tokenCount += msgTokens;
    truncated.unshift(messages[i]);
  }
  
  return truncated;
}
            

// hooks/useChat.ts - Custom hook for chat functionality
import { useState, useCallback, useEffect } from 'react';
import { ChatMessage, ChatConfig } from '@/types/chat';

export function useChat(config: ChatConfig = {}) {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isConnected, setIsConnected] = useState(true);

  // Load conversation from localStorage on mount
  useEffect(() => {
    const saved = localStorage.getItem('chatbot-conversation');
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        setMessages(parsed);
      } catch (err) {
        console.error('Failed to load conversation:', err);
      }
    }
  }, []);

  // Save conversation to localStorage when messages change
  useEffect(() => {
    if (messages.length > 0) {
      localStorage.setItem('chatbot-conversation', JSON.stringify(messages));
    }
  }, [messages]);

  const sendMessage = useCallback(async (content: string) => {
    if (!content.trim() || isLoading) return;

    const userMessage: ChatMessage = {
      id: crypto.randomUUID(),
      role: 'user',
      content: content.trim(),
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/chat/stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [...messages, userMessage],
          config,
        }),
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();

      if (!reader) {
        throw new Error('No response stream available');
      }

      let assistantMessage: ChatMessage = {
        id: crypto.randomUUID(),
        role: 'assistant',
        content: '',
        timestamp: new Date(),
      };

      setMessages(prev => [...prev, assistantMessage]);

      // Read streaming response
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') continue;

            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices[0]?.delta?.content;
              
              if (content) {
                assistantMessage.content += content;
                setMessages(prev => 
                  prev.map(msg => 
                    msg.id === assistantMessage.id 
                      ? { ...msg, content: assistantMessage.content }
                      : msg
                  )
                );
              }
            } catch (err) {
              console.error('Failed to parse stream data:', err);
            }
          }
        }
      }

    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error occurred');
      console.error('Chat error:', err);
    } finally {
      setIsLoading(false);
    }
  }, [messages, isLoading, config]);

  const clearConversation = useCallback(() => {
    setMessages([]);
    setError(null);
    localStorage.removeItem('chatbot-conversation');
  }, []);

  const regenerateLastResponse = useCallback(async () => {
    if (messages.length < 2) return;
    
    // Remove last assistant message and regenerate
    const messagesWithoutLast = messages.slice(0, -1);
    const lastUserMessage = messagesWithoutLast[messagesWithoutLast.length - 1];
    
    if (lastUserMessage?.role === 'user') {
      setMessages(messagesWithoutLast);
      await sendMessage(lastUserMessage.content);
    }
  }, [messages, sendMessage]);

  return {
    messages,
    isLoading,
    error,
    isConnected,
    sendMessage,
    clearConversation,
    regenerateLastResponse,
  };
}

// components/chat/StreamingMessage.tsx
import React, { useEffect, useState } from 'react';

interface StreamingMessageProps {
  content: string;
  isComplete: boolean;
}

export function StreamingMessage({ content, isComplete }: StreamingMessageProps) {
  const [displayedContent, setDisplayedContent] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (isComplete) {
      setDisplayedContent(content);
      return;
    }

    // Simulate typing effect for streaming
    const timer = setInterval(() => {
      if (currentIndex < content.length) {
        setDisplayedContent(content.slice(0, currentIndex + 1));
        setCurrentIndex(prev => prev + 1);
      }
    }, 20);

    return () => clearInterval(timer);
  }, [content, isComplete, currentIndex]);

  return (
    <div className="relative">
      <p className="whitespace-pre-wrap">{displayedContent}</p>
      {!isComplete && (
        <span className="inline-block w-2 h-4 bg-blue-500 animate-pulse ml-1" />
      )}
    </div>
  );
}

// lib/personality-configs.ts
export const PERSONALITY_CONFIGS = {
  helpful: {
    name: 'Helpful Assistant',
    systemPrompt: `You are a helpful AI assistant focused on providing accurate, useful information and assistance. You should be friendly, professional, and always try to be as helpful as possible.`,
    temperature: 0.7,
    emoji: '🤝',
  },
  creative: {
    name: 'Creative Companion',
    systemPrompt: `You are a creative AI assistant who loves to think outside the box. You should be imaginative, inspiring, and help users explore creative solutions and ideas.`,
    temperature: 0.9,
    emoji: '🎨',
  },
  analytical: {
    name: 'Analytical Expert',
    systemPrompt: `You are an analytical AI assistant focused on logical reasoning, data analysis, and systematic problem-solving. You should be precise, methodical, and thorough in your responses.`,
    temperature: 0.3,
    emoji: '🔍',
  },
} as const;
            

// __tests__/api/chat.test.ts
import { POST } from '@/app/api/chat/route';
import { NextRequest } from 'next/server';

// Mock OpenAI
jest.mock('openai', () => ({
  default: jest.fn().mockImplementation(() => ({
    chat: {
      completions: {
        create: jest.fn().mockResolvedValue({
          choices: [{ message: { content: 'Test response' } }],
          usage: { total_tokens: 50 },
          model: 'gpt-3.5-turbo',
        }),
      },
    },
  })),
}));

describe('/api/chat', () => {
  it('should return a successful response for valid input', async () => {
    const request = new NextRequest('http://localhost:3000/api/chat', {
      method: 'POST',
      body: JSON.stringify({
        messages: [
          { role: 'user', content: 'Hello, world!', id: '1', timestamp: new Date() }
        ],
      }),
    });

    const response = await POST(request);
    const data = await response.json();

    expect(response.status).toBe(200);
    expect(data.message).toBe('Test response');
    expect(data.metadata).toBeDefined();
  });

  it('should handle invalid input gracefully', async () => {
    const request = new NextRequest('http://localhost:3000/api/chat', {
      method: 'POST',
      body: JSON.stringify({ messages: 'invalid' }),
    });

    const response = await POST(request);
    expect(response.status).toBe(400);
  });
});

// __tests__/components/ChatContainer.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { ChatContainer } from '@/components/chat/ChatContainer';

// Mock fetch
global.fetch = jest.fn();

describe('ChatContainer', () => {
  beforeEach(() => {
    (fetch as jest.Mock).mockClear();
  });

  it('should render chat interface correctly', () => {
    render(<ChatContainer />);
    
    expect(screen.getByPlaceholderText(/type your message/i)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /send/i })).toBeInTheDocument();
  });

  it('should send message and display response', async () => {
    (fetch as jest.Mock).mockResolvedValueOnce({
      ok: true,
      json: async () => ({
        message: 'Hello! How can I help you?',
        metadata: { tokens: 10 },
      }),
    });

    render(<ChatContainer />);
    
    const input = screen.getByRole('textbox');
    const sendButton = screen.getByRole('button', { name: /send/i });

    fireEvent.change(input, { target: { value: 'Hello' } });
    fireEvent.click(sendButton);

    await waitFor(() => {
      expect(screen.getByText('Hello')).toBeInTheDocument();
      expect(screen.getByText('Hello! How can I help you?')).toBeInTheDocument();
    });
  });
});

// next.config.js - Production configuration
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable static optimization
  output: 'standalone',
  
  // Security headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
          {
            key: 'Content-Security-Policy',
            value: `
              default-src 'self';
              script-src 'self' 'unsafe-eval' 'unsafe-inline';
              style-src 'self' 'unsafe-inline';
              img-src 'self' data: https:;
              font-src 'self';
              connect-src 'self' https://api.openai.com;
            `.replace(/\s+/g, ' ').trim(),
          },
        ],
      },
    ];
  },

  // Environment variables validation
  env: {
    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
  },

  // Bundle analyzer for optimization
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: false,
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

// lib/monitoring.ts
export class ChatbotMonitoring {
  static async logConversation(messages: ChatMessage[], metadata: any) {
    // Log to analytics service (e.g., Google Analytics, Mixpanel)
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('event', 'chat_message', {
        message_count: messages.length,
        model_used: metadata.model,
        tokens_used: metadata.tokens,
        response_time: metadata.latency,
      });
    }
  }

  static async trackError(error: Error, context: string) {
    // Log to error tracking service (e.g., Sentry)
    console.error(`[${context}] Error:`, error);
    
    // Send to monitoring service
    if (process.env.NODE_ENV === 'production') {
      // Sentry.captureException(error, { tags: { context } });
    }
  }

  static async trackPerformance(metric: string, value: number) {
    // Track performance metrics
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('event', 'timing_complete', {
        name: metric,
        value: Math.round(value),
      });
    }
  }
}