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:

bash
git clone https://github.com/Jonath-z/assistant-deBot.git

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:

  1. Copy the credential.example.js file and rename the copy to credential.js.
  2. 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"; Replace YOUR_OPEN_AI_API_KEY and YOUR_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:

bash
dfx --version

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:

bash
npm install

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:

bash
dfx start --clean

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:

bash
dfx deploy

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:

bash
Frontend canister via browser dfinity_js_frontend: http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai
Backend canister via Candid interface dfinity_js_backend: http://127.0.0.1:4943/?canisterId=br5f7-7uaaa-aaaaa-qaaca-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
internet_identity: http://127.0.0.1:4943/?canisterId=br5f7-7uaaa-aaaaa-qaaca-cai&id=be2us-64aaa-aaaaa-qaabq-cai

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
ICP CHAT BOT

👋 Welcome! If you need assistance with any part of this tutorial, get stuck or have questions about the material, I'm here to help.