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

Introduction

In this tutorial, you will study really to merge DigitalOcean GenAI platform into our exertion projects. You will usage an existing demo HR Management application built from the previous article tutorial of building minimal HR exertion pinch Refine Framework and deploy it to DigitalOcean App Platform. You tin get it up and moving by pursuing the tutorial.

At the extremity of this tutorial, you’ll person an HR Management exertion that includes a chatbot you tin usage to query the employee’s time off information. The instruction from this tutorial will guideline you successful integrating the DigitalOcean GenAI level 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 task folder, and instal the exertion limitations with:

Start the exertion pinch the npm tally dev bid and unfastened http://localhost:5173 successful the browser to spot the app. Now, you are fresh to merge the DigitalOcean GenAI Chatbot into our minimal HR application.

Step 2 — Creating and Adding the DigitalOcean GenAI Chatbot to Our Application

Log successful to the DigitalOcean Cloud Panel successful the near sidebar, past click the GenAI Platform tab. The GenAI dashboard page will look for illustration this:

Under the Agent tab of this page, click connected the Create Agent button, which will unfastened a page for you to configure our agent. Setting up the supplier page looks for illustration this:

Configuring our supplier involves:

• Giving the Agent name. Here, we utilized the default name.
• Giving our Agent instructions that tells it what you want it to do and really it should do it. Here, we usage this instruction; Act arsenic hr clip disconnected agent.
• Selecting a model. We will usage the default exemplary that has been selected.
• Adding knowledge bases. We won’t adhd that now. We will create a knowledge guidelines and connect it to our exemplary later.
• Selecting a task and adding tags. Here, we usage the default, first project, and nary tags were added.

Once you person configured the agent, you tin click the Create Agent fastener beneath the page to create and deploy our supplier for us. This will unfastened a caller page that looks for illustration this:

Once the supplier is created, you tin commencement querying for your desired information. Below is simply a query astir getting the labor time off days, but the consequence is very generic and doesn’t correspond pinch the accusation successful this application. This is wherever the knowledge guidelines comes in.

Step 3 — Creating Knowledge Base And Attaching to Our Agent

In this step, you will create a knowledge guidelines and connect it to the agent.

What is simply a knowledge Base

A knowledge guidelines is simply a repository of vector embeddings from our information that the supplier tin reference to reply domain-specific questions. Currently, Knowledge bases support text-based data, specified arsenic accusation successful .doc, .csv, .txt, and .json files. And that intends the information astir labor we want our supplier to mention to should beryllium successful immoderate of these formats.

Prerequisite to create a knowledge base

• The information for the supplier to mention to.
• A DigitalOcean Spaces bucket that hosts the data.

Preparing our data

This is simply a minimal application, and it has information astir 3 labor that we want the supplier to thief america get their time off days. Below is what the information looks like:

Let’s create a csv file from the information and upload it to DigitalOcean Spaces bucket. First, you will request to create a bucket, and you tin do truthful by:

• Clicking Create successful the apical right, and past Spaces from the power panel,
• Optionally, alteration the Spaces CDN astatine nary other cost.
• Choose a name, a information halfway region, and the record listing permissions of our Space.
• Click Create a Space. This takes you to the guidelines of our caller Space.

Once you decorativeness creating the bucket, you tin upload the CSV record you created from the information to this bucket. To upload the file:

• You tin adhd files by dragging and dropping from the Files tab of our bucket. To usage the record action instrumentality instead, click Upload Files.
• After you person selected our files for upload, take their permissions. By default, they are group to Private.
• Click Upload File.

Note: Please retrieve the bucket’s name; it will greatly thief america create the knowledge base.

Creating the Knowledge Base

From the power panel, click GenAI Platform successful the near sidebar, past click the Knowledge bases tab, and the Create Knowledge Base button. This will unfastened a page for illustration beneath for america to configure our knowledge base.

Configuring our knowledge involves:

• Giving the Knowledge guidelines name. Here, we tin usage hr-off-time-knowledge-base.
• Selecting our spaces bucket, which contains the information for referencing. Remember the sanction of the spaces bucket we created and prime that one.
• Choosing wherever our knowledge guidelines should live. We tin usage the existing OpenSearch database aliases create a caller one.
• Selecting Embedding Model: An embedding exemplary converts our information into vector embeddings, which are past stored successful our OpenSearch database cluster. Use the Embeddings Model dropdown paper to prime our model.
• Reviewing Pricing: Review the estimated costs of our knowledge guidelines per token count. For reference, each token is comprised of astir 4 characters. At scale, 100 tokens astir adjacent 75 words of text. Estimates presume a Latin alphabet dataset. - - Using non-Latin characters, emojis, aliases binary information whitethorn consequence successful much tokens.
• Finally, choosing the task to adhd the knowledge guidelines to and immoderate tags we want to use. Here we tin usage the default project.

We are now fresh to click the Create Knowledge Base button. Provisioning knowledge bases typically takes 5 minutes aliases more.

Attaching the Knowledge Base and Testing our Agent

Under the Overview tab of our agent, the 2nd measurement of getting started helps america to connect knowledge bases to our agent. In this step, you tin hunt for the sanction of our knowledge base, hr-off-time-knowledge-base successful the prime box. Select that and save. It will return a fewer minutes to update our supplier to bespeak our astir caller changes.

After the changes, you tin inquire our supplier astir labor and their time off days. Below is an illustration of specified a query.

Step 4 — Adding a GenAI chatbot to our HR App

From the DigitalOcean Cloud Panel, nether GenAI Platform > Select Agent > Go to Endpoint Tab. The GenAI dashboard page will look for illustration this erstwhile the Endpoint readiness is group to Playground from the Endpoint Details section.

Click Edit adjacent to the Playground to alteration the readiness to Public. This changes the page to see the chatbot script. The page should beryllium for illustration below:

We already person this chatbot book successful our application. Copy your book and update the index.html record pinch yours.

The chatbot characteristic should now beryllium unrecorded successful the app and tin beryllium utilized to query for accusation arsenic we did successful the power sheet previously. Commit the changes to your GitHub repository, and the DigitalOcean App platform will automatically rebuild its pipeline truthful that the changes bespeak successful your application.

Conclusion

You person successfully integrated the chatbot into your HR exertion by pursuing the steps successful this tutorial. This tutorial is simply a awesome guideline for leveraging the DigitalOcean GenAI platform into your web-based projects.