AI Chat Assistant

A modern, responsive chat application built with React, TypeScript, and OpenAI's GPT-3.5-turbo API. This application provides a clean interface for conversing with AI, featuring markdown rendering, conversation history persistence, and a polished user experience.

Features

• Real-time AI Conversations: Powered by OpenAI's GPT-3.5-turbo model
• Markdown Support: Rich text rendering with support for:
  • Code blocks with syntax highlighting
  • Lists (ordered and unordered)
  • Bold, italic, and combined formatting
  • Blockquotes and links
  • Headings
• Conversation Context: Maintains last 10 messages for contextual responses
• Persistent Chat History: Automatically saves conversations to localStorage
• Smart Timestamps: Displays time for today's messages, full date for older ones
• Loading States: Animated typing indicator while AI responds
• Error Handling: Clear error messages for API issues
• Clear History: One-click button to reset conversation
• Responsive Design: Clean, modern UI with shadcn/ui components

Tech Stack

• Frontend Framework: React 19
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (New York style)
• Markdown: react-markdown with GitHub Flavored Markdown
• AI API: OpenAI GPT-3.5-turbo

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• OpenAI API key (Get one here) - Optional for demo mode

Setup Instructions

Quick Start (Demo Mode)

Want to try the app immediately without an API key? Just run:

npm install
npm run dev

The app will run in demo mode with mock responses that showcase all features including markdown rendering.

Full Setup (Real AI Responses)

1. Clone the Repository

git clone <your-repo-url>
cd ai-chat

2. Install Dependencies

npm install

3. Configure Environment Variables (Optional)

To use real OpenAI responses instead of demo mode:

Create a .env file in the root directory:

cp .env.example .env

Open .env and add your OpenAI API key:

VITE_OPENAI_API_KEY=your_openai_api_key_here

Important: Never commit your .env file. It's already included in .gitignore.

4. Run the Development Server

npm run dev

The application will be available at http://localhost:5173

• With API key: Real AI responses from OpenAI GPT-3.5-turbo
• Without API key: Demo mode with mock responses (check browser console for confirmation)

5. Build for Production

npm run build

The production-ready files will be in the dist directory.

6. Preview Production Build

npm run preview

Project Structure

ai-chat/
├── src/
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   ├── ChatContainer.tsx
│   │   ├── ChatHistory.tsx
│   │   ├── ChatInput.tsx
│   │   ├── ChatMessage.tsx
│   │   └── TypingIndicator.tsx
│   ├── hooks/
│   │   └── useChat.ts       # Main chat state management
│   ├── lib/
│   │   ├── api.ts           # OpenAI API integration
│   │   ├── types.ts         # TypeScript interfaces
│   │   └── utils.ts         # Utility functions
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .env.example
├── package.json
└── README.md

Usage

1. Start a Conversation: Type your message in the input field at the bottom
2. Send Message: Press Enter or click the send button
3. View Responses: AI responses appear with markdown formatting
4. Clear History: Click the "Clear" button in the header to reset the conversation
5. Persistent Storage: Your chat history is automatically saved and restored on page reload

API Configuration

The application uses OpenAI's GPT-3.5-turbo model with the following configuration:

• Model: gpt-3.5-turbo
• Temperature: 0.7 (balanced creativity)
• Max Tokens: 500 per response
• Context Window: Last 10 messages

You can modify these settings in src/lib/api.ts.

Key Features Explained

Markdown Rendering

AI responses support full markdown syntax, making code examples and formatted text easy to read.

Conversation Context

The app maintains the last 10 messages in conversation history, allowing the AI to understand context and provide more relevant responses.

Error Handling

• Missing API key: Clear instructions to add one
• API errors: Displays error messages from OpenAI
• Network issues: Graceful fallback with retry capability

Local Storage

Chat history is automatically saved to your browser's localStorage and restored when you return.

Troubleshooting

"API key not found" Error

Make sure you've created a .env file with VITE_OPENAI_API_KEY=your_key_here and restarted the dev server.

"Exceeded quota" Error

Check your OpenAI account billing at https://platform.openai.com/account/billing. You may need to add credits.

Changes to .env Not Reflecting

Vite requires a server restart to pick up environment variable changes. Stop the dev server (Ctrl+C) and run npm run dev again.

Acknowledgments

• UI components from shadcn/ui
• Icons from Lucide React
• Markdown rendering by react-markdown