Tutorial

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

Published on December 10, 2024
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 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.

Prerequisites

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:

Create Agent

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:

Configure Agent

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:

Deploying Agent

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.

Querying Agent

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

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:

HR Time off Data

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.

Note: Please remember the bucket’s name; it will greatly help us create the knowledge base.

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.

Configure 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.

Querying Agent After Attaching Knowledge Base

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.

Playground

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:

Public

We already have this chatbot script in our application. Copy your script and update the index.html file with yours.

Public

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.

Continue building with DigitalOcean GenAI Platform.

About the authors
Default avatar

DevRel Contractor at DigitalOcean


Default avatar

Sr Technical Writer

Sr. Technical Writer@ DigitalOcean | Medium Top Writers(AI & ChatGPT) | 2M+ monthly views & 34K Subscribers | Ex Cloud Consultant @ AMEX | Ex SRE(DevOps) @ NUTANIX


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.