AirOps is one of our favorite frameworks with a user-friendly platform for creating AI agents. This application allows for easy integration with tools like the Ionic API, enabling users to build functional AI assistants without complex coding. It’s particularly known for its simple “what you see is what you get” editor and diverse customization options.The project’s objective is to create an interactive agent for holiday gift shopping assistance using various tools, including AirOps, itegration to an LLM (in this case GPT-3 Turbo), and Ionic API’s OpenAI Plugin.

Video tutorial

A video tutorial of this guide is embedded below and can also be found HERE

Starting the project

The project begins by accessing the AirOps template selection page and choosing the blank agent template. Initially, users are presented with a guide, but for simplicity, this guide will be skipped.

Click on Create New App

Step 1 screenshot

Click on Use Template

Step 2 screenshot

Configuring the Agent

In this phase, GPT-3 Turbo is selected as the model. The agent’s role and functionalities are defined through the system prompt setup, focusing on creating a granular configuration for precise task handling. The configuration interface will be displayed in an image.

Click on the “Configure” button in the Agent box

Step 3 screenshot

Agent configuration

The agent has many configuration options. The most important is the System message or System prompt window. You can be as granular as you would like but you should include some combination of a) what the agent should do and b) let it know how and when to use the Ionic API plugin:

You are a helpful assistant used to find holiday gifts. Use the Ionic API plugin to find the best gifts available.

Step 4 screenshot

Other configuration options include setting the temperature, specifying the opening remarks, tool visibility and memory settings, and giving specific training examples to improve output accuracy. When configured as desired click on “Save Changes”

Step 6 screenshot

Integrating Ionic

The next step is to integrate Ionic. This will be done via an OpenAI plugin. The Ionic integration is what empowers our agent to find and suggest gifts. We’ll go through a simple configuration process to align it with our needs:

Click OpenAI Plugin on the side bar menu to add into the visual editor

Step 7 screenshot

Ensure the OpenAI Plugin box is linked to the Agent box and click on the “Configure” bar when ready

Step 8 screenshot

In the “Manifest URL” enter the Ionic OpenAI plugin API. You can copy and paste from the section below:

Step 14 screenshot

Describe how the tool should be used. Feel free to experiment for an optimized output but something to the effect of the text below should be utilized:

Use this plugin to help find gifts or with shopping requests and workflows

Click on Save Changes

Step 17 screenshot

Testing and refinement

Perform a test to visualize the functionality and output. Our test scenario involves finding a gift for a three-year-old interested in school buses.

Click on Test All

Step 18 screenshot

Issue a query

In our case, “Can you help me find a gift for my nephew? He is 3 years old and loves school busses.”

Step 19 screenshot

Ionic will return results that match the query from a variety of vendors

Step 23 screenshot

Finalizing and Sharing

Save and publish the agent

Click on Save Draft

Step 24 screenshot

Name the agent

Step 25 screenshot

Publish App

Step 28 screenshot

The app is shareable via a URL

Step 29 screenshot

Intermediate features

Monitoring performance and logs

Bot logs and history are can be analyzed to understand the performance, and this aspect is represented in the History tab

Integrations options

Various integration options, like widgets and webhooks, are available, and these options are located in the Integration tab

Step 31 screenshot

Advanced: Attribution via Ionic API Key

With AirOps, it is best to use query param based authorization

Follow our Guide to using Ionic API Keys