Building a Professional AI Chatbot with React, TypeScript, and Groq AI API

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.1
• next: ^15.0.4
• react: ^19.0.0
• react-dom: ^19.0.0
• tailwindcss: ^3.4.16
• prisma: ^6.0.1
• eslint: ^9.16.0
• prettier: ^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:

👉 Live Demo

Feel free to visit the link, authenticate using your credentials, and start interacting with the chatbot!

Source Code.

Comments

[Ekemini Samuel]

Nice! Cool updates you made to Greg's Chatbot!