On October 28, 2024, I wrote this very comprehensive article on building Your first AI chatbot using React, TypeScript and llamma3 via Groq AI API, so I decided to make the chatbot more advanced and professional.
Here’s what’s new in this version:
- Next.js: Replaced Vite with Next.js for better performance and server-side rendering.
- Tailwind CSS and Radix UI: Used Tailwind CSS for styling and Radix UI for accessible, customizable components instead of just Vanilla CSS
- Authentication: Integrated Auth0 for secure user authentication.
- Database Management: Used Prisma as the ORM to manage interactions with a PostgreSQL database.
- Syntax Highlighting: Added support for code snippets with react-syntax-highlighter.
- Analytics: Integrated Vercel Analytics and Speed Insights for performance monitoring.
Prerequisites
Before you begin, ensure you have met the following requirements:
- Node.js: Version 23.x or later.
- pnpm: Version 9.x or later.
- PostgreSQL: Ensure you have a PostgreSQL database running.
Installation
To install Greg's Chatbot, follow these steps:
1- Clone the repository:
git clone https://github.com/yourusername/gregs-chatbot.git
2- Navigate to the project directory:
cd gregs-chatbot
3- Install dependencies:
pnpm install
4- Generate your free Groq API key and Auth0 credentials, then add them to your .env.local file.
Add them like so:
GROQ_API_KEY=your_groq_api_key
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
AUTH0_ISSUER_BASE_URL=your_auth0_issuer_base_url
DATABASE_URL=your_postgresql_connection_string
5- Install and set up your Postgresql database.
6- Follow this Vercel guide to set up the Prisma ORM and connect it with your Postgres database
Usage
1- To start the development server, run:
pnpm run dev
2- To build the project for production, run:
pnpm run build
3- To start the production server, run:
pnpm start
Scripts
-
dev: Starts the development server with Turbopack. -
build: Builds the project for production. -
start: Starts the production server. -
lint: Runs ESLint to check for code quality issues. -
prepare: Sets up Husky for Git hooks. -
lint-staged: Runs linting on staged files. -
postinstall: Generates Prisma client after installation.
Dependencies
@ai-sdk/openai: ^1.0.7@ai-sdk/ui-utils: ^1.0.4@auth0/nextjs-auth0: ^3.5.0@prisma/client: ^6.0.1next: ^15.0.4react: ^19.0.0react-dom: ^19.0.0tailwindcss: ^3.4.16prisma: ^6.0.1eslint: ^9.16.0prettier: ^3.4.2
Contributing
If you want to contribute to Greg's Chatbot, please open a pull request on GitHub.
Try it out
You can check out the live demo of Greg's Chatbot deployed on Vercel:
Feel free to visit the link, authenticate using your credentials, and start interacting with the chatbot!
Top comments (1)
Nice! Cool updates you made to Greg's Chatbot!