Customizable AI Chatbot - Build Your Own Conversational AI in Minutes ⏰

A fully customizable AI chatbot built with modern web technologies. This project is designed to let you tailor every aspect of your chatbot, from its appearance and messaging to the underlying AI integrations. With support for advanced technologies such as Next.js, Tailwind CSS, RAG (Retrieval-Augmented Generation), Pinecone, and multiple AI APIs (OpenAI, Fireworks AI, Anthropic AI), this solution makes deploying your own conversational AI a breeze.

Are you ready to build your own AI chatbot in minutes? Let's get started! 🚀

---

Table of Contents

• Introduction
• Features
• Technologies Used
• Getting Started
  • Fork and Clone
  • Service Accounts Setup
  • Environment Variables Setup
  • Local Development Setup
• Deployment Instructions
  • Deploy on Vercel
• Pinecone & RAG Setup
• Customization
  • UI Customization
  • Identity Customization
  • Intention Customization
• Usage
  • Use Cases
• Testing
• GitHub Actions CI/CD Pipeline
  • GitHub Actions Configuration
  • Customizing the CI/CD Pipeline
• Contributing
• Author
• License
• Additional Resources

Tip

For quickstart, you can ignore the detailed instructions and jump straight to the Getting Started, Deployment Instructions, Pinecone & RAG Setup, and Customization sections.

---

Introduction

This project is a Customizable AI Chatbot that allows you to easily modify and deploy a conversational AI assistant. It is designed to answer a wide range of questions—including those about its creator, Son (David) Nguyen, as well as general inquiries—by integrating multiple AI APIs. The chatbot leverages RAG (Retrieval-Augmented Generation) to provide more accurate responses by managing document vectors with Pinecone.

The solution is built on Next.js for a robust React-based frontend, styled with Tailwind CSS for responsive design, and enriched with animations from Framer Motion. It integrates powerful AI engines such as OpenAI, Fireworks AI, and Anthropic AI to handle diverse conversational tasks.

Demo Chatbot: https://customizable-ai-chatbot.vercel.app 🌐.

Note

The demo might not work when I've run out of OpenAI credits. If you notice that, please kindly notify me via email or GitHub issues and I'll try to fix it as soon as possible. Thank you for your understanding! 🙏

User Interface

The chatbot interface is designed to be modern and user-friendly, with a clean layout and smooth animations. Users can interact with the chatbot by typing messages and receiving responses in real time. The chatbot's identity and appearance can be fully customized to match your preferences.

Architecture Overview

A very high-level overview of the architecture is shown below:

Feel free to use this customizable AI chatbot for your own projects. Some use cases include personal assistants, FAQ bots, research assistants, and more. The possibilities are endless! 🚀

---

Features

• Dynamic Chat Interface: Modern, responsive UI with smooth animations.
  • Enhanced with Streaming: The app spits out chatbot responses as they are generated, providing a more interactive experience.
• Advanced AI Integration: Connects to multiple AI APIs (OpenAI, Fireworks AI, Anthropic AI) to generate rich, context-aware responses.
• RAG & Pinecone: Upserts document vectors into a Pinecone index for accurate retrieval and augmented generation.
  • RAG Loader: Comes with a tool to upload documents to Pinecone for RAG, ensuring even beginners can set up the RAG system.
  • Source Citation: Displays the source of the document for full transparency.
• Easy Customization: Modify chatbot appearance and behavior through configuration files.
• Rapid Deployment: Seamless integration with Vercel for fast hosting.
• Extensible: Additional similar technologies can be integrated as needed (shield icons above showcase major integrations).
• Local Storage: Persists chat history and settings across sessions, even after page refresh or reload!
• Responsive Design: Works on desktop, tablet, and mobile devices.
• Clear Chat History: Option to clear chat history and start fresh.

---

Technologies Used

This project leverages an array of cutting-edge technologies:

• Next.js – The React framework for production.
  • This framework is used for building both the frontend UI and the backend API routes for handling requests.
• Tailwind CSS – Utility-first CSS framework for fast UI development.
• RAG (Retrieval-Augmented Generation) – Enhances responses with document context.
• Pinecone – Vector database for managing and querying document embeddings.
• OpenAI API – For natural language processing and generation.
• Fireworks AI API – Additional AI capabilities.
• Anthropic AI API – Advanced conversational AI.
• Framer Motion – For smooth animations.
• Vercel – For easy deployment and hosting.

Each of these technologies is represented with a shield icon at the top of this README for quick visual reference.

---

Getting Started

Fork and Clone

1. Fork the Repository:
   Click the Fork button in the top-right corner of the GitHub page to create your own copy of this repository.

2. Clone Your Fork:
   Open your terminal and run: (Replace your-username with your GitHub username)

   git clone https://github.com/hoangsonww/Customizable-AI-Chatbot.git
   cd Customizable-AI-Chatbot

Service Accounts Setup

Caution

IMPORTANT: Before starting the project, you need to set up accounts with the following services to obtain API keys. This is crucial for the chatbot to function correctly:

1. OpenAI API Key:
   Sign up at OpenAI and create an API key. Be sure that your account balance is at least $5 to avoid any issues.
2. Fireworks AI API Key:
   Sign up at Fireworks AI and create an API key.
3. Anthropic AI API Key:
   Sign up at Anthropic AI and create an API key.
4. Pinecone API Key:
   Sign up at Pinecone and create an API key. Make sure to create a new index in your Pinecone account.
5. RAG by Ringel:
   Visit RAG by Ringel and create an account. This tool will help you upload documents to Pinecone for RAG. Make sure to create a new project and enter your Pinecone API key and index name (exactly as you created it in Pinecone) in the project settings.

Environment Variables Setup

Create a .env file in the root directory of your project and add the following keys:

OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
FIREWORKS_API_KEY=your_fireworks_api_key
PINECONE_API_KEY=your_pinecone_api_key

Replace the placeholder values with your actual API keys. Refer to the .env.template file for more information.

Local Development Setup

1. Install Dependencies:
   Ensure you have Node.js installed. Then, install the project dependencies by running:

   npm install

   or, if you prefer Yarn:

   yarn install

2. Run the Development Server:
   Start the local development server with:

   npm run dev

   Your application will be available at http://localhost:3000.

Important

Before running the project, ensure that you have set up the environment variables correctly in the .env file. The application will not work without these keys.

---

Deployment Instructions

Deploy on Vercel

1. Create a Vercel Account:
   Visit Vercel and sign up for an account if you haven't already.

2. Connect Your Git Repository:

   • Log in to Vercel and click on New Project.
   • Select your forked repository from your GitHub account.
   • Follow the prompts to connect your Git repository with Vercel.

3. Configure Environment Variables:
   In your Vercel project settings, add the same environment variables from your .env file:

   • OPENAI_API_KEY
   • ANTHROPIC_API_KEY
   • FIREWORKS_API_KEY
   • PINECONE_API_KEY

4. Deploy the Project:
   Click Deploy. Vercel will build and deploy your project automatically. Your chatbot will then be live on a Vercel-provided URL.

---

Pinecone & RAG Setup

1. Pinecone Account & Index:

   • Visit Pinecone and create an account.
   • Once logged in, create a new index. Make sure to remember the exact index name.

2. RAG Setup:

   • Go to RAG by Ringel.
     • Credits: Dr. Ringel at UNC-Chapel Hill for providing this tool.
   • Create an account and start a new project.
   • Add your Pinecone API key in the project settings.
   • When prompted, enter the Pinecone index name exactly as you created it in Pinecone.

Important

Note: The index name should be my-ai by default, but you can change it to whatever you prefer. Just make sure to change it in configurations/pinecone.ts as well.

• Set the source URL to a single space (if there isn’t an applicable URL).
• Leave all other settings unchanged.

3. Document Preparation:

   • Convert your documents to Markdown or TXT format if necessary.
   • Use the RAG by Ringel interface to upload your documents to Pinecone. This will create document vectors for retrieval.
     • Credits to Dr. Ringel at UNC-Chapel Hill for providing this tool!
   • The documents should be any relevant text data that you want the chatbot to reference during interactions.
   • An example document could be a list of FAQs or a collection of articles about you, so that the chatbot can provide accurate responses about you.
   • RAG will use these documents to upsert Pinecone vectors, ensuring accurate retrieval during chat interactions.

Important

Be sure that your Pinecone index and RAG project are correctly set up and linked to your chatbot. This will ensure that the chatbot can provide accurate and context-aware responses.

---

Customization

This project is highly customizable. Below are the main configuration files that you can modify:

UI Customization

File: configuration/ui.ts
Customize the chatbot's UI text and settings:

import { AI_NAME, OWNER_NAME } from "@/configuration/identity";

export const CHAT_HEADER: string = `[CHAT HEADER]`;
export const MESSAGE_PLACEHOLDER: string = `[MESSAGE PLACEHOLDER]`;
export const FOOTER_MESSAGE: string = `[FOOTER MESSAGE]`;
export const CLEAR_BUTTON_TEXT: string = `[CLEAR BUTTON TEXT]`;
export const PAGE_TITLE: string = `[PAGE TITLE]`;
export const PAGE_DESCRIPTION: string = `Chat with ${AI_NAME}, ${OWNER_NAME}'s AI assistant.`;

export const EMPTY_CITATION_MESSAGE: string = "Unspecified source";

Adjust the placeholder text as needed to match your desired user interface.

Identity Customization

File: configuration/identity.ts
Set up the chatbot’s identity and the owner's details:

export const OWNER_NAME: string = `Son (David) Nguyen`;
export const OWNER_DESCRIPTION: string = `A results-driven software engineer with expertise in data analytics, full-stack development, and technical consulting.`;

export const AI_NAME: string = `Lumina`;
export const AI_TONE: string = `Friendly and Professional`;
export const AI_ROLE: string = `AI Personal Assistant for Son (David) Nguyen`;

Modify these values if you wish to change the chatbot’s persona or its association.

Intention Customization

For advanced customization of the chatbot’s behavior and system instructions, please review and modify the intention.ts file. This file contains core instructions that define the chatbot’s responses and operational logic. Adjust the system prompt and behavior settings to better align with your desired use case.

Environment Configuration

File: .env
Ensure that your .env file in the root directory contains the following keys:

OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
FIREWORKS_API_KEY=your_fireworks_api_key
PINECONE_API_KEY=your_pinecone_api_key

Replace each placeholder with the respective API key provided by the service.

Chatbot Avatar Customization

This is optional, but you can customize the chatbot's avatar by replacing the image file in the public directory. The default avatar is located at public/ai-logo.png. You can replace it with your own image file, ensuring that the new file has the same name and format.

Additionally, you can customize the web app's favicon by replacing the file at app/favicon.ico. This will change the icon that appears in the browser tab when users visit your chatbot.

Tip

The recommended image size for the avatar is 512x512 pixels, and the recommended size for the favicon is 32x32 pixels. An image with a transparent background is preferred for both.

That's it! You have now successfully customized your AI chatbot to match your preferences. Feel free to explore additional customization options as needed.

---

Usage

Once deployed, your AI chatbot will be available for interaction. Users can engage with the bot through the chat interface, and any updates made to the configuration files will reflect on the next deployment or rebuild. The chatbot is designed to handle questions related to its creator, Son (David) Nguyen, as well as general inquiries about various topics.

Key interactions include:

• Conversational AI: Answering questions with context from Pinecone and RAG.
• Custom Responses: Leveraging multiple AI APIs for tailored answers.
• Dynamic Configuration: Instant changes via editing ui.ts, identity.ts, and intention.ts.

Alternatively, you can deploy your AI locally for testing and development purposes. The chatbot will be accessible at http://localhost:3000 once the development server is running.

The instructions for running the development server are detailed in the Local Development Setup section above.

Use Cases

This AI chatbot can be used for a variety of purposes, including:

• Personal AI Assistant: Providing information about the creator, Son (David) Nguyen.
• FAQ Chatbot: Answering common questions about a specific topic.
• Research Assistant: Retrieving and summarizing information from documents.
• Educational Tool: Teaching users about a particular subject or field.
• Documentation Bot: Providing help and guidance on a product or service.
• Customer Support: Assisting users with inquiries and troubleshooting.
• Interactive Chatbot: Engaging users in conversation and entertainment.
• AI Showcase: Demonstrating the capabilities of modern conversational AI.

And many more! The chatbot is highly adaptable and can be tailored to suit a wide range of use cases.

---

Makefile and Shell Scripts

This project includes a Makefile and several shell scripts to streamline development tasks. These scripts automate common tasks such as starting the development server, running tests, and deploying the application.

Makefile

The Makefile provides a simple interface for running commands. Here are some common targets:

1. setup:
   Installs dependencies and sets up the project environment.

   make setup

2. dev:
   Starts the development server.

   make dev

3. test:
   Runs the test suite.

   make test

4. deploy:
   Deploys the application to Vercel.

   make deploy

5. upsert:
   Upserts documents to Pinecone for RAG.

   make upsert

6. clean:
   Cleans up temporary files and caches.

   make clean

and many more! You can view the full list of targets by running make help.

Shell Scripts

The Makefile actually calls several shell scripts to perform specific tasks. Here are some of the key scripts:

1. scripts/dev.sh:
   Starts the development server. This script is called when you run make dev.

2. scripts/build.sh:
   Builds the application for production. This script is called when you run make build.

3. scripts/test.sh:
   Runs the test suite using Jest. This script is called when you run make test.

4. scripts/deploy.sh:
   Deploys the application to Vercel. This script is called when you run make deploy.

5. scripts/upsert-pinecone.sh:
   Upserts documents to Pinecone for RAG. This script is called when you run make upsert.

6. scripts/setup.sh:
   Installs dependencies and sets up the project environment. This script is called when you run make setup.

and many more! You can view the full list of scripts in the scripts directory.

---

Testing

To ensure the quality and reliability of the chatbot, this project includes unit tests using Jest. You can run the tests to verify that everything is functioning as expected.

Running Tests

To run the tests, execute the following command in your terminal:

npm run test

or, if you prefer Yarn:

yarn test

This will execute the test suite and provide feedback on the functionality of the chatbot. Make sure to write tests for any new features or changes you implement to maintain code quality.

---

GitHub Actions CI/CD Pipeline

This project includes a GitHub Actions CI/CD pipeline to automate testing and deployment. The pipeline is configured to run tests on every push and pull request, ensuring that the codebase remains stable.

GitHub Actions Configuration

The GitHub Actions workflow is defined in the .github/workflows/ci.yml file. It includes the following steps:

• Checkout Code: Clones the repository to the runner.
• Set Up Node.js: Installs the specified version of Node.js.
• Install Dependencies: Installs the project dependencies using npm or Yarn.
• Run Tests: Executes the test suite to ensure code quality.
• Deploy to Vercel: Automatically deploys the application to Vercel if the tests pass.
• Notify on Failure: Sends notifications if any step fails, ensuring that issues are addressed promptly.
• Cache Dependencies: Caches the node_modules directory to speed up subsequent builds.

This CI/CD pipeline helps maintain code quality and ensures that the chatbot is always in a deployable state.

Customizing the CI/CD Pipeline

After forking the repository, you may want to customize the CI/CD pipeline to suit your needs. You can modify the .github/workflows/ci.yml file to add or remove steps, change the Node.js version, or adjust the deployment settings.

Feel free to explore the GitHub Actions documentation for more information on how to customize workflows: GitHub Actions Documentation.

---

Contributing

Contributions to enhance this project are welcome. To contribute:

1. Fork the Repository: Create your own copy on GitHub.
2. Create a New Branch: Work on your feature or fix in a new branch.
3. Commit Changes: Follow the established coding standards.
4. Submit a Pull Request: Provide detailed information about your changes.
5. Documentation: Update README and inline comments as necessary.

---

Author

If you have any questions or feedback, feel free to reach out to me at:

• Son (David) Nguyen – GitHub
• Website: Personal Website
• LinkedIn: LinkedIn
• Personal Blog: David's Blog
• Personal AI Assistant: Lumina AI
• Email: Email

---

License

This project is licensed under the MIT License. Please review the license file for more details.

Warning

NOTE: This project is for educational purposes only. It is not intended for commercial use or distribution. Additionally, you must keep the footer credit intact to respect the original creator's work, regardless of any modifications you make to the codebase. The footer credit is a way to acknowledge the original creator and maintain transparency about the project's origins.

By using or contributing to this project, you agree to abide by the terms of the license.

---

Additional Resources

For more information on the technologies and APIs used in this project, check out the following resources:

• Next.js Documentation: Next.js Docs
• Tailwind CSS Documentation: Tailwind CSS Docs
• Pinecone Documentation: Pinecone Docs
• OpenAI API Documentation: OpenAI Docs
• Fireworks AI API Documentation: Fireworks AI
• Anthropic AI API Documentation: Anthropic AI
• Framer Motion Documentation: Framer Motion
• Vercel Documentation: Vercel Docs

---

Happy coding! 🚀 Thank you for using and contributing to this project.

⬆️ Back to Top