In this tutorial, you will learn how to integrate DigitalOcean GenAI platform into our application projects. You will use an existing demo HR Management application built from the previous article tutorial of building minimal HR application with Refine Framework and deploy it to DigitalOcean App Platform. You can get it up and running by following the tutorial.
At the end of this tutorial, you’ll have an HR Management application that includes a chatbot you can use to query the employee’s leave information. The lesson from this tutorial will guide you in integrating the DigitalOcean GenAI platform into your web-based applications.
Clone the project, navigate to the project folder, and install the application dependencies with:
npm install
Start the application with the npm run dev
command and open http://localhost:5173
in the browser to see the app. Now, you are ready to integrate the DigitalOcean GenAI Chatbot into our minimal HR application.
Log in to the DigitalOcean Cloud Panel in the left sidebar, then click the GenAI Platform tab. The GenAI dashboard page will look like this:
Under the Agent tab of this page, click on the Create Agent button, which will open a page for you to configure our agent. Setting up the agent page looks like this:
Configuring our agent involves:
Agent name
. Here, we used the default name.Agent instructions
that tells it what you want it to do and how it should do it. Here, we use this instruction; Act as hr time off agent
.first project
, and no tags were added.Once you have configured the agent, you can click the Create Agent button below the page to create and deploy our agent for us. This will open a new page that looks like this:
Once the agent is created, you can start querying for your desired information. Below is a query about getting the employees leave days,
but the response is very generic and doesn’t correspond with the information in this application. This is where the knowledge base comes in.
In this step, you will create a knowledge base and attach it to the agent.
A knowledge base is a repository of vector embeddings from our data that the agent can reference to answer domain-specific questions. Currently, Knowledge bases support text-based data, such as information in .doc, .csv, .txt, and .json files. And that means the data about employees we want our agent to refer to should be in any of these formats.
This is a minimal application, and it has data about 3 employees that we want the agent to help us get their leave days. Below is what the data looks like:
Let’s create a csv file from the data and upload it to DigitalOcean Spaces bucket. First, you will need to create a bucket, and you can do so by:
Once you finish creating the bucket, you can upload the CSV file you created from the data to this bucket. To upload the file:
Note: Please remember the bucket’s name; it will greatly help us create the knowledge base.
From the control panel, click GenAI Platform in the left sidebar, then click the Knowledge bases tab, and the Create Knowledge Base button. This will open a page like below for us to configure our knowledge base.
Configuring our knowledge involves:
Knowledge base name
. Here, we can use hr-off-time-knowledge-base
.We are now ready to click the Create Knowledge Base button. Provisioning knowledge bases typically takes five minutes or more.
Under the Overview tab of our agent, the second step of getting started helps us to attach knowledge bases to our agent. In this step, you can search for the name of our knowledge base, hr-off-time-knowledge-base
in the select box. Select that and save. It will take a few minutes to update our agent to reflect our most recent changes.
After the changes, you can ask our agent about employees and their leave days. Below is an example of such a query.
From the DigitalOcean Cloud Panel, under GenAI Platform > Select Agent > Go to Endpoint Tab. The GenAI dashboard page will look like this when the Endpoint availability is set to Playground
from the Endpoint Details
section.
Click Edit next to the Playground to change the availability to Public. This changes the page to include the chatbot script. The page should be like below:
We already have this chatbot script in our application. Copy your script and update the index.html
file with yours.
The chatbot feature should now be live in the app and can be used to query for information as we did in the control panel previously. Commit the changes to your GitHub repository, and the DigitalOcean App platform will automatically rebuild its pipeline so that the changes reflect in your application.
You have successfully integrated the chatbot into your HR application by following the steps in this tutorial. This tutorial is a great guide for leveraging the DigitalOcean GenAI platform into your web-based projects.
Continue building with DigitalOcean GenAI Platform.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!