Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-spirit-369/ask-gpt
Build an AI chatbot from scratch using Next.js 15, React 19 RC, and xAI’s grok-beta model.
https://github.com/code-spirit-369/ask-gpt
chatbot firebase-admin firestore grok-beta nextjs15 react19 shadcn-ui tailwindcss xai
Last synced: 20 days ago
JSON representation
Build an AI chatbot from scratch using Next.js 15, React 19 RC, and xAI’s grok-beta model.
- Host: GitHub
- URL: https://github.com/code-spirit-369/ask-gpt
- Owner: code-spirit-369
- Created: 2024-11-11T13:49:54.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-01T05:13:57.000Z (about 1 month ago)
- Last Synced: 2024-12-01T06:25:17.899Z (about 1 month ago)
- Topics: chatbot, firebase-admin, firestore, grok-beta, nextjs15, react19, shadcn-ui, tailwindcss, xai
- Language: TypeScript
- Homepage:
- Size: 417 KB
- Stars: 3
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ask-GPT - AI Chatbot
## 📋 Table of Contents
1. 🎬 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🚀 [Quick Start](#quick-start)
## 🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Code Spirit.
- Next.js 15
- React 19 RC
- Typescript
- TailwindCSS
- shadcn/ui
- Firebase
- xAI grok-beta
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
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/code-spirit-369/ask-gpt.git
cd ask-gpt
```
**Installation**
Install the project dependencies using npm:
```bash
bun install
```
**Set Up Environment Variables**
Create a new file named `.env.local` in the root of your project and add the following content:
```env
AUTH_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
XAI_API_KEY=
FIREBASE_SERVICE_ACCOUNT_KEY=
```
Get your xAI API key from [xAI](https://x.ai/).
**Running the Project**
```bash
bun dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.