How to Integrate DigitalOcean GenAI Platform into a Minimal HR Web App

Introduction

In this tutorial, you will learn how to integrate DigitalOcean GenAI platform into your web applications. You will use an existing demo HR Management application built from our previous article on building minimal HR web application with Refine Framework and deploy it to DigitalOcean App Platform. You can get it up and running by following the above tutorial.

At the end of this tutorial, you’ll have an HR Management application with a chatbot 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.

Prerequisites

• A DigitalOcean Cloud account.
• The minimal HR demo project.
• Access to DigitalOcean GenAI platform.

Step 1 — Setting Up the Project

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.

Step 2 — Creating and Adding the DigitalOcean GenAI Chatbot to Our 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:

• Giving the Agent name. Here, we used the default name.
• Giving our 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.
• Selecting a model. We will use the default model that has been selected.
• Adding knowledge bases. We won’t add that now. We will create a knowledge base and attach it to our model later.
• Selecting a project and adding tags. Here, we use the default, 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.

Step 3 — Creating Knowledge Base And Attaching to Our Agent

In this step, you will create a knowledge base and attach it to the agent.

What is a knowledge Base

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.

Prerequisite to create a knowledge base

• The data for the agent to refer to.
• A DigitalOcean Spaces bucket that hosts the data.

Preparing our data

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:

• Clicking Create in the top right, and then Spaces from the control panel,
• Optionally, enable the Spaces CDN at no extra cost.
• Choose a name, a data center region, and the file listing permissions of our Space.
• Click Create a Space. This takes you to the root of our new Space.

Once you finish creating the bucket, you can upload the CSV file you created from the data to this bucket. To upload the file:

• You can add files by dragging and dropping from the Files tab of our bucket. To use the file selection tool instead, click Upload Files.
• After you have selected our files for upload, choose their permissions. By default, they are set to Private.
• Click Upload File.

Creating 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:

• Giving the Knowledge base name. Here, we can use hr-off-time-knowledge-base.
• Selecting our spaces bucket, which contains the data for referencing. Remember the name of the spaces bucket we created and select that one.
• Choosing where our knowledge base should live. We can use the existing OpenSearch database or create a new one.
• Selecting Embedding Model: An embedding model converts our data into vector embeddings, which are then stored in our OpenSearch database cluster. Use the Embeddings Model dropdown menu to select our model.
• Reviewing Pricing: Review the estimated cost of our knowledge base per token count. For reference, each token is comprised of around four characters. At scale, 100 tokens roughly equal 75 words of text. Estimates assume a Latin alphabet dataset. - - Using non-Latin characters, emojis, or binary data may result in more tokens.
• Finally, choosing the project to add the knowledge base to and any tags we want to use. Here we can use the default project.

We are now ready to click the Create Knowledge Base button. Provisioning knowledge bases typically takes five minutes or more.

Attaching the Knowledge Base and Testing our Agent

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.

Step 4 — Adding a GenAI chatbot to our HR App

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.

Conclusion

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.