How to Integrate DigitalOcean GenAI Platform into an Existing Web Application with DigitalOcean Cloud Functions

Introduction

In this tutorial, you will learn how to integrate DigitalOcean GenAI platform into existing web applications. To do so, you will build on top of an existing demo application built from a Jamstack application development guide. This existing demo project is a static HTML that renders content by invoking DigitalOcean Serverless Functions written in Node.js to retrieve content from a MongoDB database.

At the end of this tutorial, you’ll have a static web application with a chatbot feature to query information about various coffee content rendered by the app. The lesson from this tutorial will guide leveraging the DigitalOcean Cloud Functions to integrate the DigitalOcean GenAI platform into any web-based application.

Prerequisites

To complete this project, you need:

• A DigitalOcean cloud account.
• The Coffee Demo Application. To get the codebase for the demo application, you can fork this repository into a GitHub account and then clone it to our local machine or you can follow this guide to learn how to create such demo project and deploy it to DigitalOcean App Platform
• Access to DigitalOcean GenAI platform.
• The latest version of doctl installed on your system to use the DigitalOcean CLI commands.
• The latest version of the npm installed on your system.

Step 1 — Setting Up the Project

By forking and cloning from the demo application’s codebase from GitHub, you will notice you have two branches; The main branch, that has the complete code with the GenAI integration and the Setup branch, with the starting code that you will build on top in this tutorial to integrate the chatbot feature. The commands below will help us to clone the project to our local environment, navigate to the root of the project, switch to the Setup branch and install the application dependencies:

git clone https://github.com/digitalocean/Jamstack-DigitalOcean-Coffee-App.git
cd Jamstack-DigitalOcean-Coffee-App 
git checkout Setup

Open the project in a text editor or an IDE, and the project structure should look like this:

If you forked and cloned the demo application from the GitHub repository, make sure to create a DigitalOcean-managed Mongodb database and add the sample data needed for this application to render the content. This part of the guide should help us do that. Once you have created the database, you can configure our application’s environment variable for the database access by creating a .env file in the app’s directory and copying our database connection string to set that up in the .env file. This part of the guide can help you configure the environment variables.

After configuring the environment variables, you are in a good position to see what the application looks like. Let’s start by opening the index.html file in the web directory in a browser. And it should look like this:

Step 2 — Creating DigitalOcean GenAI Chatbot

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 us to configure our agent. Setting up the agent page looks like this:

Configuring our agent involves:

• Giving the Agent name. Here, you used the default name.
• Giving our Agent instructions that tell it what you want it to do and how it should do it. Here, you use this instruction; Act as a coffee machine that gives many details about various coffees, prices, and their details.
• Selecting a model. you will use the default model that has been selected.
• Adding knowledge bases. You won’t add that now. You will create a knowledge base and attach it to our model later.
• Selecting a project and adding tags. Here, you 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 query our desired information. Below is a query about French Roast Coffee Price and its effect on my body, but the response is very generic and doesn’t match the information in this application. For our agent to give accurate information about this application to our users, you will need to expose those details to the agent. This is where Cloud Functions comes in. The DigitalOcean GenAI platform has a resource feature that allows us to attach a function to the agent to give out the right information

Step 3 - Creating Cloud Functions and Attaching to Our Agent

Next, you need to add another Node.js function to the application that connects to the MongoDB database cluster and retrieves single data about the individual coffees.

To add the function to our app, in the special directory called packages from the app’s root directory, let’s create a new folder, getCoffee in the folder named cloud. For Node.js project, you need to initialize the getCoffee directory, so let’s navigate there from our terminal and run the command below:

npm init -y

You are creating the package.json file that Node.js uses to track the project’s dependencies and attributes. With the -y flag, the initialization process is shortened by skipping several user input prompts that are not required to complete this tutorial. Because the function will need to interact with the MongoDB database, let’s install a package that will help us do that by running:

npm install --package-lock-only mongodb

Here you have used the --package-lock-only flag to update the package.json file with the dependency the function needs without installing the dependency itself. This is because functions can be deployed and tested from the cloud, you do not need to install the modules locally.

After updating the function’s dependencies, create a file called index.js in the getCoffee directory. This file contains our function’s code.

In the text editor, paste the following code into the index.js file:

const { MongoClient } = require('mongodb');

async function main(args) {

    const uri = process.env['DATABASE_URL'];
    let client = new MongoClient(uri);

    try {
        let name = args.name;
        await client.connect();
        const inventory = await client.db("do-coffee").collection("available-coffees").findOne({name})
        console.log(inventory);
        return {
            "body": inventory
        };
    } catch (e) {
        console.error(e);
        return {
            "body": { "error": "There was a problem retrieving data - " + e.message },
            "statusCode": 400
        };
    } finally {
        await client.close();
    }
}

exports.main = main; 

You can see from the code that this function looks up the database records to find a match of a coffee based on the given coffee name. Now that you have created our function, let’s update the YAML specification file named project.yml in the root folder of the application to reflect the changes in the functions created. The project.yml file is a manifest that lists each function in the app’s packages directory and makes the service aware of any environment variables. An updated project.yml file with the new function should look like this:

Once you have added the function, and updated the project.yml file, you can now deploy the new function. To do so, you can test to see if you are connected to our function namespace by running the command from the root of our project:

doctl serverless connect

On a successful connection, you can now deploy the function by running the following command from the app’s root directory:

doctl serverless deploy .

A successful deployment returns output that looks like this:

You can test how the function works through our DigitalOcean cloud panel. Navigate through the Functions tab in the left sidebar of the DigitalOcean cloud panel to select the cloud/getCoffee function. Under the Source tab, you will add the below Test Parameter

You can now click the Run button to execute the function and below should be response.

Now that you have a working function, you can go ahead to use this in our agent.

Attaching the Function and Testing our Agent

Under the Resources of our agent, you can attach our function to the agent here. Look for Add function route. And once you click on that, a new page should be opened which looks like this:

Configuring our function route involves:

• Selecting a namespace of the function.
• Selecting our function: Here choose the cloud/getCoffee function.
• Giving function instructions. Call this function when a coffee details are asked for should be fine
• Givnig function route name.
• Defining input schema. This involves the parameter passed to the function and you can add the schema below.

{
  "name": {
    "type": "string",
    "required": true,
    "description": "name of coffee"
  }
}

• Defining output schema. This involves the response details when the function is called. You can add this schema for that:

{
  "_id": {
    "type": "string",
    "description": "Id of the coffee item"
  },
  "pic": {
    "type": "string",
    "description": "A picture of coffee item"
  },
  "name": {
    "type": "string",
    "description": "Name of coffee item"
  },
  "price": {
    "type": "string",
    "description": "Price of the coffee item"
  },
  "description": {
    "type": "string",
    "description": "Description of the coffee item"
  }
}

Now, you can save the changes. It will take a few minutes for the agent to successfully attach our function and reflect our changes.

After the changes, you can ask our agent about the various coffees you have, and it will give us almost accurate information. Below is an example of such a query.

Step 4 — Adding a GenAI chatbot to our Jamstack Application

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:

You already have this chatbot script in our application. Copy the script and update the index.html code; just add the chatbot script right after the last script tag.

The chatbot feature should now be live in the application and can be used to query for information as you did in the cloud 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 our application.

Conclusion

You have successfully integrated the chatbot into an existing web application by leveraging on DigitalOcean Serverless Functions. And following this step-by-step guide, you can integrate the DigitalOcean GenAI platform into our web-based projects.