ChadGPT

Your low-key AI agent for the new era!
View Project »

Report Bug • Request Feature

ChadGPT is a full-stack GPT implementation built with Next.js 13, featuring a custom AI persona that delivers direct, confident responses. It streams answers in real-time from OpenAI's API, automatically syncs your chat history across devices with Firebase, and includes Google OAuth authentication. The interface supports full markdown rendering with syntax-highlighted code blocks, while Upstash Redis rate limiting prevents API abuse.

The diagram below illustrates the high-level architecture of the ChadGPT application.

graph TD
    User[User] --> Frontend[Next.js Frontend<br/>App Router];
    Frontend -- "Authentication" --> Auth[NextAuth.js<br/>Google OAuth];
    Frontend -- "API Requests" --> API[Next.js API Routes];
    API -- "Rate Limiting" --> Redis[Upstash Redis];
    API -- "AI Chat" --> OpenAI[OpenAI API<br/>Streaming];
    API -- "Store/Retrieve Messages" --> Firestore[Cloud Firestore];
    Frontend -- "Real-time Updates" --> Firestore;

    style Frontend fill:#F5F5F5,color:#000,stroke:#333,stroke-width:2px;
    style Auth fill:#4285F4,color:#fff,stroke:#333,stroke-width:2px;
    style API fill:#000,color:#fff,stroke:#333,stroke-width:2px;
    style Redis fill:#00E9A3,color:#000,stroke:#333,stroke-width:2px;
    style OpenAI fill:#74AA9C,color:#000,stroke:#333,stroke-width:2px;
    style Firestore fill:#FFA611,color:#000,stroke:#333,stroke-width:2px;

Follow these steps to set up and run ChadGPT on your local machine.

This application requires:

• Node.js v20.14.0+
• A Firebase account (free tier is sufficient)
• A Google Cloud Console account for OAuth credentials
• An OpenAI account for API keys
• An Upstash Redis account (free tier is sufficient)

Clone the repository to your local machine:

git clone https://github.com/nabarvn/chadgpt.git
cd chadgpt

Install all required dependencies:

npm install

Create a Firebase project and configure the following:

1. Enable Firestore Database preferably in test mode to avoid writing security rules
2. Register a web app and note the config values (apiKey, authDomain, projectId, etc.)
3. Generate Admin SDK credentials from Service Accounts (download the JSON)

See the Firebase Console and Firestore documentation.

Create OAuth 2.0 credentials in Google Cloud Console:

• Set authorized redirect URI: http://localhost:3000/api/auth/callback/google
• Copy the Client ID and Client Secret

Refer to the OAuth 2.0 documentation if needed.

Generate an API key from the OpenAI Platform.

Create a Redis database in Upstash Console and copy the REST URL and token.

Create a local environment file by copying the example:

cp .env.example .env

For development, set NEXTAUTH_URL to your localhost URL.

To generate a secure NEXTAUTH_SECRET:

openssl rand -base64 32

Start the development server:

npm run dev

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

• TypeScript - Type-safe JavaScript
• Next.js 13 - React framework with App Router
• React 18 - JavaScript library for building UI

• Tailwind CSS - Utility-first CSS framework
• Tailwind Typography - Beautiful typographic defaults
• Headless UI - Unstyled, accessible UI components
• Heroicons - Beautiful hand-crafted SVG icons
• next-themes - Dark mode support

• NextAuth.js - Authentication for Next.js
• Google OAuth Provider - Secure Google sign-in

• Cloud Firestore - NoSQL cloud database
• Firebase Admin SDK - Server-side Firebase operations
• react-firebase-hooks - React hooks for Firebase

• OpenAI API - GPT language models
• Vercel AI SDK - Streaming AI responses

• Upstash Redis - Serverless Redis
• @upstash/ratelimit - Rate limiting library

• React Markdown - Markdown component for React
• remark-gfm - GitHub Flavored Markdown support
• rehype-highlight - Syntax highlighting for code blocks

• SWR - React hooks for data fetching
• React Hot Toast - Notifications

• react-device-detect - Device detection
• react-scrollable-feed - Auto-scrolling chat
• react-textarea-autosize - Auto-growing textarea
• react-copy-to-clipboard - Copy code functionality

• Real-time AI Response Streaming - Watch AI responses appear as they're generated
• Persistent Chat History - All conversations automatically saved and synced across devices
• Full Markdown Rendering - Rich text formatting with code syntax highlighting
• Rate Limiting Protection - Built-in API protection with Redis-backed rate limiting
• Responsive Design - Seamless experience on desktop, tablet, and mobile devices
• Dark/Light Theme - Toggle between themes to suit your preference
• Code Block Copy - One-click copy functionality for code snippets