
In this tutorial, we will explore how to integrate the DigitalOcean GenAI platform into a minimal HR web application. We’ll begin by utilizing an existing demo HR Management app created in a previous article that demonstrates building a minimal HR application using the Refine Framework. By the end of this tutorial, you will have an HR Management application equipped with a chatbot to query employee leave information.
Prerequisites
- A DigitalOcean Cloud account.
- The minimal HR demo project.
- Access to the DigitalOcean GenAI platform.
Step 1 — Setting Up the Project
Start by cloning the project and navigating to the project folder. Install the application dependencies using:
npm install
Run the application with npm run dev
and open http://localhost:5173
in your browser to see the app. You are now ready to integrate the DigitalOcean GenAI Chatbot into your HR application.
Step 2 — Creating and Adding the DigitalOcean GenAI Chatbot
Log in to the DigitalOcean Cloud Panel and navigate to the GenAI Platform tab. Click on the Create Agent button to set up your agent. Here, you will need to provide:
- An agent name.
- Instructions for your agent, such as "Act as hr time off agent."
- Select a model (default is usually sufficient).
- You may choose to skip adding knowledge bases for now; we will attach one later.
Once configured, click Create Agent to deploy it. You can now begin querying for information. Initially, you may get general responses, which will be refined with a knowledge base later.
Step 3 — Creating a Knowledge Base and Attaching It to Our Agent
Next, we will create a knowledge base for the agent to use. A knowledge base is a collection of data that the agent can reference to respond to domain-specific questions, typically in formats like .doc, .csv, .txt, or .json.
Prerequisites to create a knowledge base:
- Data for the agent to refer to.
- A DigitalOcean Spaces bucket to host the data.
Preparing our dataFor this minimal application, we will have data about three employees for the chatbot to access regarding leave days. Create a CSV file with this data and upload it into a newly created Spaces bucket by following these steps:
- Click on Create in the top right, then Spaces.
- Name your bucket, select a data center region, and set file listing permissions.
- After creating your bucket, upload your CSV file.
Creating the Knowledge BaseIn the GenAI Platform, under the Knowledge bases tab, click Create Knowledge Base. You will need to fill out:
- A name for the knowledge base, e.g.,
hr-off-time-knowledge-base
. - Select the previously created spaces bucket.
- Review pricing for the knowledge base per token count.
- Choose a project and any desired tags.
After reviewing the settings, click Create Knowledge Base. Provisioning may take several minutes.
Attaching the Knowledge Base and Testing Our AgentAfter the knowledge base is created, go back to the agent’s overview tab and attach the newly created knowledge base. Testing your agent by asking about employee leave days should yield more accurate and context-aware responses after this update.
Step 4 — Adding a GenAI Chatbot to Our HR App
Back in the DigitalOcean Cloud Panel, navigate to the endpoint settings for your agent and set its availability to Public. This will provide you with a script to add to your application. Update your index.html
file with the generated chatbot script.
After committing these changes to your GitHub repository, the DigitalOcean App Platform will automatically build and reflect these changes in your application.
Conclusion
You have now successfully integrated a chatbot into your HR application using the DigitalOcean GenAI platform. This tutorial provides a foundational approach to leveraging AI capabilities in web-based applications.
Continue to build and enhance your projects with the potential of the DigitalOcean GenAI Platform.
Welcome to DediRock, your trusted partner in high-performance hosting solutions. At DediRock, we specialize in providing dedicated servers, VPS hosting, and cloud services tailored to meet the unique needs of businesses and individuals alike. Our mission is to deliver reliable, scalable, and secure hosting solutions that empower our clients to achieve their digital goals. With a commitment to exceptional customer support, cutting-edge technology, and robust infrastructure, DediRock stands out as a leader in the hosting industry. Join us and experience the difference that dedicated service and unwavering reliability can make for your online presence. Launch our website.