Ask-GPT - AI Chatbot

Build this project step by step with a detailed tutorial on Code Spirit YouTube.

📋 Table of Contents

1. 🎬 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🚀 Quick Start

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Code Spirit.

⚙️ Tech Stack

• Next.js 15
• React 19 RC
• Typescript
• TailwindCSS
• shadcn/ui
• Firebase
• xAI grok-beta

🎬 Introduction

In this tutorial, we’ll build an AI chatbot from scratch using Next.js 15, React 19 RC, and xAI’s grok-beta model. This project features a sleek UI with tailwindcss and shadcn/ui components, theme toggling with next-themes, and real-time chat history stored in Firebase Firestore. We’ll also set up secure authentication with next-auth. By the end of the tutorial, you’ll have a modern, fully functional chatbot.

🔋 Features

👉 AI-Powered Responses: Using xAI's Grok-beta model, generate accurate, context-aware responses, bringing a real-time conversational AI experience.

👉 Real-time Chat History: View and manage all previous chats with timestamps, powered by Firebase Firestore for persistent storage.

👉 Auth.js Authentication with GitHub: Secure user authentication using GitHub as the provider, allowing for user-specific chat storage and personalization.

👉 Dark/Light Theme Toggle: Theme toggling functionality with next-themes, providing a customizable dark/light mode UI for a better user experience

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/code-spirit-369/ask-gpt.git
cd ask-gpt

Installation

Install the project dependencies using npm:

bun install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

AUTH_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

XAI_API_KEY=

FIREBASE_SERVICE_ACCOUNT_KEY=

Get your xAI API key from xAI.

Running the Project

bun dev

Open http://localhost:3000 in your browser to view the project.