progress
BROWSE CHAPTERS
Setting Up the Project
In this chapter, we'll guide you through setting up the TypeScript AI Chatbot project. This process includes cloning the project repository, installing necessary dependencies, and preparing your development environment. Follow these steps to ensure a smooth setup.
Cloning the Repository
First, you need to clone the repository containing the project's code. Open your terminal and run the following command:
Setting Up Credentials
The chatbot uses the OpenAI API, which requires API credentials. You need to create a credential.js
file in the root directory with your OpenAI API key and the assistant ID. Follow these steps:
- Copy the
credential.example.js
file and rename the copy tocredential.js
. -
Open
credential.js
and set your OpenAI API key and assistant ID:jsx export const OPEN_AI_API_KEY = "YOUR_OPEN_AI_API_KEY"; export const ASSISTANT_ID = "YOUR_ASSISTANT_ID";
ReplaceYOUR_OPEN_AI_API_KEY
andYOUR_ASSISTANT_ID
with your actual OpenAI API key and assistant ID, respectively.
- You can find your OpenAI API key and assistant ID in the interface of your OpenAI account. If you don't have an account yet, you can create one here.
- The API key can be found in the API keys page of your account.
- You can find the assistant ID in the assistant's page here. Navigate to your assistant and copy the id from under the assistant's name, it will look like this: "asst_I5U3ic2gLfMuIK4D2LDwdxH0".
Installing DFX
The DFINITY Canister SDK (DFX) is a toolkit for building and deploying applications on the Internet Computer. We will be using DFX to deploy the chatbot on the Internet Computer Protocol. Follow the instructions here to install DFX on your machine. Make sure to install the latest version of DFX, currently 0.15.*
.
Once the installation is complete, run the following command to verify that DFX is installed correctly:
Installing Dependencies
Once DFX is installed, install the dependencies for the chatbot canister. Make sure you are in the root directory of the project and run the following command:
Running the Chatbot Locally
Now that the project is set up, you can run the chatbot locally. Before we do that, we need to start the local Internet Computer replica. Run the following command to start the replica:
We are using the --clean
flag to ensure that the replica is started with a clean state. This is useful when you have previously deployed canisters to the local network and want to start fresh.
Once the replica is running, open a new terminal window, make sure you are in the root directory of the project, and run the following command:
This command deploys both the frontend and backend canisters to your local network. However, you could also deploy the canisters separately.
After the deployment is complete, you should see an output similar to this:
You can now access the chatbot at the URL of the frontend canister. In this case, the URL is http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
but it may be different for you. Copy the URL and paste it in your browser to access the chatbot.
Testing the Chatbot
Now that the chatbot is running locally, you can test it. First, you need to log in to the chatbot using the Internet Identity. Click on the Login
button and follow the instructions to log in. You may need to create a new Internet Identity, but since we are running it locally, this is goes very quickly.
Once you are logged in, you can start chatting with the assistant. Depending on your assistant's configuration, you may need to ask a specific question to get a response. For example, if your assistant is configured to answer questions about cooking, you can ask it How do I make a pizza?
. The assistant will then respond with an answer.
Next Chapter
Exploring the Code