AI Chat App Template

Launch your own ChatGPT-style app in under 1 hour using a full-stack template

Check demo

If you are a visitor from India get the template using this link with pricing in INR

What’s Inside?

• Full-Stack Next.js 14 Template – Pre-built chat app, no coding required
• Supports Multiple AI Models – GPT-4, Gemini, Claude, Mistral & more
• OAuth Authentication – Google, GitHub & social logins ready
• Firebase Firestore Integration – Auto-sync chat history securely
• Markdown & Code Blocks Support – AI output formats beautifully
• Modern UI Inspired by ChatGPT & Notion – Clean, minimal, mobile-friendly
• Dark & Light Mode – Theme switching out of the box
• One-Click Deployment – Works with Vercel for instant hosting
• Vercel AI SDK Pre-Configured – Just add your API key & start chatting
• Easy Customization – Tailwind CSS & React components for quick styling

🔥 Why Choose This Template?

🚀 Instantly Launch AI-Powered Chat Apps – No setup required, just plug in your API key!
⚡ Pixel-Perfect UI – Clean, modern design inspired by ChatGPT & Notion
📱 100% Mobile-Optimized – Works seamlessly on phones, tablets & desktops
🔐 Enterprise-Grade Security – OAuth login, Firebase rules, and server-side authentication
📈 Scale-Ready – Built with Next.js 14, Firebase, and the Vercel AI SDK🛠️ Key Features

✅ Seamless User Authentication

🔑 1-Click Login – Supports Google, GitHub & Social Login
🔄 Auto-Sync Chat History – Messages are saved securely with Firebase

🧠 AI Model Flexibility

🤖 GPT-4, Gemini, Claude & More – Easily swap between AI models
⚙️ Custom AI Model Support – Integrate your own AI with just a few lines of code

✨ Chat Functionality You’ll Love

💬 Copy, Delete & Retry Messages – Just like ChatGPT, but under your brand
📝 Markdown & Code Blocks Support – AI output supports tables, links & syntax highlighting

🌟 Who is This For?

✅ Startups & Indie Hackers – Ship AI features in days, not months
✅ Devs Tired of Rebuilding the Same Features – Save 80+ hours of work
✅ Non-Tech Founders – Get a production-ready AI app without hiring a team

🎨 Built with the Best Tech

⚡ Next.js 14 + App Router – Blazing fast performance & easy server actions
🎨 Tailwind CSS – Customize themes, fonts, and colors
🛠️ Redux Toolkit – State management
💾 Firebase for Authentication & Hosting & Database – No extra cost for small apps
💡 Vercel AI SDK Pre-Configured – Just add your API key & go!

🌟 Perfect For:

• Startups wanting AI features FAST 🚤
• Devs tired of coding auth/logic from scratch 😴
• Founders who want to save $10k+ on dev costs 💸

❓ Frequently Asked Questions (FAQ)

How do I set up this template?

• Clone the repo, install dependencies, add your API key, and deploy to Vercel. It takes under 5 minutes!

Can I use this for commercial projects?

• Yes! You can build & sell AI-powered apps with this template. No restrictions.

Does it support multiple AI models?

• Yes! Easily switch between GPT-4, Gemini, Claude, Mistral, and custom models.

How does this compare to OpenAI’s ChatGPT UI?

• Our template is faster, customizable, and 100% yours – no limits or branding!

Readme instructions

Read the readme instructions on how to use the template and what is this template

# AI Chat App Template

## Introduction

This project is a chat application built with Next.js, utilizing Firebase for authentication and Firestore for data storage. The application allows users to create and manage chat sessions, interact with an AI assistant, and maintain a history of their conversations.

## Installation

To set up the project locally, follow these steps:

1. **Clone the Repository**:

   ```bash
   git clone https://github.com/yourusername/your-repo-name.git
   cd your-repo-name
   ```

2. **Install Dependencies**:
   Make sure you have Node.js installed. Then, run:

   ```bash
   npm install
   ```

3. **Set Up Environment Variables**:
   Create a `.env` file in the root of your project and add your API keys and other environment variables:

   ```plaintext
   NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key
   NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id

   NEXT_PUBLIC_ANTHROPIC_API_KEY=your_anthropic_api_key
   NEXT_PUBLIC_GOOGLE_API_KEY=your_google_api_key
   NEXT_PUBLIC_MISTRAL_API_KEY=your_mistral_api_key
   ```

4. **Run the Development Server**:
   Start the application with:
   ```bash
   npm run dev
   ```
   Your application will be available at `http://localhost:3000`.

## API Keys

- **LLM API Keys**: These keys are required to interact with various LLM APIs. Make sure to keep them secure and do not expose them in your client-side code. Use environment variables to manage sensitive information:

  ```plaintext
  NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key # Get from https://platform.openai.com/api-keys
  NEXT_PUBLIC_ANTHROPIC_API_KEY=your_anthropic_api_key # Get from https://console.anthropic.com/
  NEXT_PUBLIC_GOOGLE_API_KEY=your_google_api_key # Get from https://makersuite.google.com/app/apikey
  NEXT_PUBLIC_MISTRAL_API_KEY=your_mistral_api_key # Get from https://console.mistral.ai/
  ```

- **Firebase Config**: These keys are required for Firebase authentication and Firestore. Get them from your Firebase Console (https://console.firebase.google.com/):
  ```plaintext
  NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
  NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
  NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
  NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
  NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
  NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
  ```

## Features

✅ AI Chat with OpenAI, Gemini, Claude, and Mistral
✅ Firebase Authentication (Google Login)
✅ Firestore for Chat Storage
✅ Markdown Support (Headings, Lists, Tables, Links)
✅ Speech-to-Text Input
✅ Dark/Light Mode Toggle
✅ Chat Sidebar with Session History
✅ Copy and Rerun Messages
✅ Fully Responsive

## Folder Structure

### 1. `pages/`

This directory contains the application's pages. Each file corresponds to a route in the application.

- **`index.js`**: The main landing page of the application.
- **`chat/[id].js`**: A dynamic route for individual chat sessions, where `[id]` corresponds to the chat ID.

### 2. `components/`

This folder contains reusable React components used throughout the application.

- **`Chat.jsx`**: The main chat interface component that handles displaying messages and user input.
- **`Message.jsx`**: A component for rendering individual messages in the chat.
- **`Navbar.jsx`**: The navigation bar component that includes user authentication options.
- **`Sidebar.jsx`**: The sidebar component for navigating between different chat sessions.

### 3. `modules/`

This directory contains modules that encapsulate specific functionalities or features of the application.

- **`Layout/`**: Contains the layout wrapper for the application, which includes the sidebar and navbar.
- **`Navbar/`**: Contains the navbar component and related functionalities.
- **`Sidebar/`**: Contains the sidebar component for chat navigation.

### 4. `redux/`

This folder contains Redux slices and store configuration for state management.

- **`slices/`**: Contains individual slices for managing different parts of the application state, such as authentication and chat data.

### 5. `lib/`

This directory contains utility functions and configurations.

- **`utils/`**: Contains utility functions for Firebase configuration and other helper functions.

### 6. `public/`

This folder is used for static assets such as images, icons, and other files that need to be served directly.

### 7. `styles/`

This directory contains global styles and CSS files for the application.

### 8. `README.md`

This file provides an overview of the project, installation instructions, and other relevant information.

## Deploy on Vercel

You can deploy this project easily on Vercel.

1. Create a Vercel account at [vercel.com](https://vercel.com).
2. Click New Project → Select your GitHub repository.
3. Set your Environment Variables in Vercel's dashboard.
4. Click Deploy – Your app will be live in a few minutes! 🎉

## Tech Stack

The application is built with the following technologies:

### Core Technologies

- **Next.js 13**: React framework for production-grade applications
- **React 18**: JavaScript library for building user interfaces
- **TypeScript**: Typed superset of JavaScript for enhanced development

### State Management & Authentication

- **Redux Toolkit**: State management with simplified Redux configuration
- **Firebase**: Authentication and backend services
- **js-cookie**: Client-side cookie handling

### Styling & UI

- **Tailwind CSS**: Utility-first CSS framework
- **Lucide React**: Icon library
- **React Icons**: Comprehensive icon library
- **React Toastify**: Toast notifications

### AI & API Integration

- **OpenAI**: AI model integration
- **Anthropic**: Claude AI integration
- **Mistral AI**: AI model integration

### Development Tools

- **ESLint**: JavaScript linting utility
- **Prettier**: Code formatter
- **PostCSS**: CSS transformation tool
- **Autoprefixer**: CSS vendor prefixing

This modern tech stack ensures a robust, scalable, and maintainable application with a focus on developer experience and code quality.

## License

By purchasing and using this AI Chat App Template, you agree to the following terms:

✅ Allowed
✔ You can use this template for personal and commercial projects.
✔ You can modify and customize the code to fit your specific needs.
✔ You can deploy this template for your own applications or products.

❌ Not Allowed
✘ You cannot resell, redistribute, or share this template as-is or in modified form.
✘ You cannot upload this template to public repositories (GitHub, GitLab, etc.) for free access.
✘ You cannot claim ownership or authorship of this template.

If you are interested in an extended license for multiple projects or resale rights, please contact [your email or website].

## Support

If you have any issues or need help, feel free to open an issue on GitHub or reach out via [email](mailto:shreyvijayvargiya26@gmail.com).

## Firebase Authentication Setup
To enable authentication methods such as Google, GitHub, and Email/Password in your Firebase project, follow these steps:

1. **Go to Firebase Console**:
   Navigate to your Firebase project in the [Firebase Console](https://console.firebase.google.com/).

2. **Select Authentication**:
   In the left sidebar, click on "Authentication" and then click on the "Get Started" button if you haven't already set it up.

3. **Add Sign-in Methods**:

   - Click on the "Sign-in method" tab.
   - You will see a list of sign-in providers. Click on the toggle to enable the following methods:

   ### Google

   - Click on "Google" and toggle the switch to enable it.
   - You may need to provide a project support email.
   - Click "Save".

   ### GitHub

   - Click on "GitHub" and toggle the switch to enable it.
   - You will need to provide your GitHub OAuth Client ID and Client Secret. To obtain these:
     - Go to [GitHub Developer Settings](https://github.com/settings/developers).
     - Click on "New OAuth App".
     - Fill in the required fields:
       - **Application Name**: Your app's name.
       - **Homepage URL**: Your app's URL (e.g., `http://localhost:3000` for local development).
       - **Authorization callback URL**: This should be your Firebase project's OAuth redirect URL (found in the Firebase console).
     - After creating the app, copy the Client ID and Client Secret and paste them into the Firebase console.
   - Click "Save".

   ### Email/Password

   - Click on "Email/Password" and toggle the switch to enable it.
   - Click "Save".

4. **Add Users** (Optional):

   - You can manually add users by clicking on the "Users" tab and then "Add user". Enter the email and password for the new user.

5. **Update Your Environment Variables**:
   Ensure that your `.env` file contains the necessary keys for Firebase authentication.

   ```plaintext
   NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   ```

Now your Firebase project is set up to use Google, GitHub, and Email/Password authentication methods!