A modern, feature-rich AI chat application built with Next.js 15 that supports multiple AI providers including OpenAI, Anthropic Claude, Google Gemini, and Groq. The application provides a seamless chatting experience with file uploads, user management, and a beautiful, responsive interface.
- OpenAI: GPT-4o, GPT-4o Mini
- Anthropic: Claude Opus 4, Claude Sonnet 4
- Google: Gemini 2.5 Pro, Gemini 2.5 Flash
- Groq: DeepSeek R1, Llama 4 (Free models)
- Real-time streaming responses
- File upload support (images, PDFs, text files, code)
- Vision-capable models for image analysis
- Thinking models support
- Chat history and management
- Star/favorite chats
- Auto-generated chat titles
- NextAuth.js authentication
- User registration and login
- Secure API key management with encryption
- Profile and usage statistics
- Settings management
- Responsive design for all devices
- Dark/light mode support
- Beautiful animations and transitions
- Mobile-friendly sidebar
- Drag-and-drop file uploads
- Syntax highlighting for code blocks
- Markdown rendering with LaTeX support
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Database: PostgreSQL with Prisma ORM
- Authentication: NextAuth.js v5
- UI Components: Radix UI primitives
- File Uploads: UploadThing
- AI SDKs: OpenAI, Anthropic, Google AI, Groq
- Deployment: Vercel-ready
better-chat/
├── app/ # Next.js 15 app directory
│ ├── (main)/ # Main authenticated routes
│ │ ├── chat/ # Chat interface
│ │ └── settings/ # User settings
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── chats/ # Chat management
│ │ ├── keys/ # API key management
│ │ └── files/ # File upload handling
│ ├── auth/ # Authentication pages
│ └── globals.css # Global styles
├── components/ # React components
│ ├── chat/ # Chat-related components
│ ├── sidebar/ # Navigation sidebar
│ ├── settings/ # Settings components
│ ├── ui/ # Reusable UI components
│ └── shared/ # Shared components
├── contexts/ # React contexts
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
│ ├── ai/ # AI provider integrations
│ ├── services/ # Business logic services
│ ├── types/ # TypeScript type definitions
│ └── utils.ts # Utility functions
├── prisma/ # Database schema and migrations
├── public/ # Static assets
├── middleware.ts # Next.js middleware
└── package.json # Dependencies and scripts
- Node.js 18+ or Bun
- PostgreSQL database
- AI provider API keys (optional for free Groq models)
-
Clone the repository
git clone https://github.com/your-username/better-chat.git cd better-chat -
Install dependencies
npm install # or bun install -
Set up environment variables
cp .env.example .env.local
-
Configure your environment variables (see Environment Variables)
-
Set up the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev # or bun dev -
Open your browser Navigate to http://localhost:3000
Create a .env.local file in the root directory with the following variables:
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/better_chat"
DIRECT_URL="postgresql://username:password@localhost:5432/better_chat"
# NextAuth.js
NEXTAUTH_SECRET="your-nextauth-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"
# AI Provider API Keys (optional - Groq models are free)
OPENAI_API_KEY="your-openai-api-key"
ANTHROPIC_API_KEY="your-anthropic-api-key"
GOOGLE_AI_API_KEY="your-google-ai-api-key"
GROQ_API_KEY="your-groq-api-key"
# File Upload (UploadThing)
UPLOADTHING_SECRET="your-uploadthing-secret"
UPLOADTHING_APP_ID="your-uploadthing-app-id"
# Encryption Key for API Keys
ENCRYPTION_KEY="your-32-character-encryption-key"- OpenAI: OpenAI Platform
- Anthropic: Anthropic Console
- Google AI: Google AI Studio
- Groq: Groq Console
- UploadThing: UploadThing Dashboard
# Development
npm run dev # Start development server with Turbopack
bun dev # Start development server with Bun
# Production
npm run build # Build for production
npm run start # Start production server
# Database
npx prisma generate # Generate Prisma client
npx prisma db push # Push schema changes to database
npx prisma studio # Open Prisma Studio
# Linting
npm run lint # Run ESLint- Free Models: DeepSeek R1 and Llama 4 via Groq (no API key required)
- Premium Models: Access to latest OpenAI, Anthropic, and Google models
- Vision Support: Upload and analyze images with vision-capable models
- Thinking Models: Support for reasoning-capable models
- Supported Formats: Images (PNG, JPG, WebP), PDFs, text files, code files
- Drag & Drop: Intuitive file upload interface
- File Preview: Preview uploaded files before sending
- Context Integration: Files are automatically included in chat context
- Responsive Design: Works seamlessly on desktop, tablet, and mobile
- Dark/Light Mode: Automatic theme switching support
- Real-time Streaming: See AI responses as they're generated
- Chat Management: Organize, rename, star, and delete chats
- Usage Statistics: Track your API usage and costs
- Push your code to a Git repository
- Import your project to Vercel
- Add your environment variables in the Vercel dashboard
- Deploy automatically
The application can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- AWS Amplify
- DigitalOcean App Platform
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework for production
- Tailwind CSS - A utility-first CSS framework
- Radix UI - Low-level UI primitives
- Prisma - Next-generation ORM
- NextAuth.js - Complete open source authentication solution
If you have any questions or need help getting started, please open an issue on GitHub.
Made with ❤️ using Next.js and modern web technologies