Building an AI Chatbot

Code Playground is only enabled on larger screen sizes.

Building an AI chatbot is one of the best ways to master the core concepts in AI development. You will have a chance to familiarize with response streaming, prompt engineering, and other related concepts.

And that is what we are going to do in the next few lessons.

To begin with, we'll make a plan for our chatbot project, so that you have a big picture of what we need to build.

We'll use React.js for frontend, Express.js for backend, and use SQLite as the database, as well as Prisma as the database ORM.

Design the frontend

First of all, let's design our frontend.

This is a typical design for AI chatbot that I'm sure you're already familiar with.

We have the sidebar on the left, and inside, we have a button to create a new conversation, and a list of conversations.

When a conversation is selected, the messages will be displayed, with the user message on the right, and AI responses on the left.

And at the bottom, there needs to be an input box and a Send button. The user can type a prompt, and send to the LLM.

Backend structure

As for the backend, things are a bit more complicated. You will have to set up a few APIs to:

Create a new conversation
List all conversations
Delete a conversation
Add a new message in a conversation
Get messages in a conversation

And when adding a new message, the backend also need to talk to the OpenAI API to:

Send user message to the LLM
Get the LLM response and send to the user

Of course, these are just some basic features that an AI chatbot should have, we can also implement some extra functions such as user management with personalized experience, response streaming, file and image processing, and more.

We'll go over them later in this chapter.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox