Skip to main content

OpenAI

The OpenAI prefab is a great starting point for creating your own ChatBots based on the ChatGPI API. This prefab includes a few cloud functions and logic components that can get you started quickly. Here is a quick guide on how to use the prefab to build a very simple chat bot.

To be able to follow this guide properly we recommend that you are well versed in a few Noodl concepts already.

  • Cloud Data. You know how to set up cloud services and work with cloud data, start here.
  • Cloud Functions, how to create logic that run in the cloud, take a look here.

Make sure you have a cloud service active for your project. Next you need an account and API key for OpenAI.

Setup

Start by cloning the prefab into your project, you can read more about how prefabs work here. After the prefab is cloned into your project you will see a bunch of warnings. Don't worry we will sort these out next.

First you need to find and add the OpenAI API Key to your cloud services backend. Launch the cloud services dashboard for your project and find your way to the Config tab, here you will need to create a new config parameter called OpenAIAPIKey (case sensitive) where you need to put the API Key from your OpenAI Account. Then create the config in your cloud service, and make sure that access is restricted to Master Key Only. This will keep the API key safe in your cloud service.

Next you need to create two record classes in your cloud services, you can learn more about that here. You need these two classes and properties (make sure you use the exact names, case sensitive):

  • OpenAIChat Create this class and add a single property, a pointer to the _User class and call it User.
  • OpenAIChatMessages Create this class and add three properties, two strings Role and Content, and a pointer to the OpenAIChat class you just created and call it Chat.

Completing these tasks should remove all warnings from your project and we can start building the first basic chat.

A basic chat

Let's take a look at a basic chat. With the setup above in place we can move to the frontend component of the prefab. It includes a very basic chat frontend that you can put into your project as a starting point.

note

The cloud functions of the prefab require the user to be logged in so for this very basic example we are expecting there to be a user with username test and password test. Either create a user with those credentials in your backend, or if you already have users in your app you can modify the example below.

You can find it in the OpenAI folder it's called Basic Chat. Drag it into your app and lets review how it works below. Here is it's content.

  1. When the parent group node is mounted (shown on screen) we log in with the test user (look at the note above). Once we have credentials we call the first cloud function OpenAI/Create New Chat. We will review it in more detail below but this creates a new chat record, OpenAIChat, for us and some initial messages.

  2. When a new chat has been succesfully created we use the Id of the new chat to query all messages using the Query Records set to the OpenAIChatMessages record class. We user a filter to only get the messages from the new chat, and we sort them in the right order. These are the properties of the query records node:

  1. The returned chat messages are then fed into a Repeater that displays a list item for each chat message. This is what the simple chat frontend looks like:

  1. Finally when the submit button is clicked the cloud function OpenAI/Send Message is called with the content of the text input and the the Id of the chat record. When the function has completed, the messages are queried again and displayed in the list. Try it out!

Create new chat​

Lets review some of the cloud functions so you can customize and build your own AI driven chat bot applications. There are two cloud functions used here, OpenAI/Create New Chat and OpenAI/Send Message. The first function creates a new chat object and is actually mostly Noodl cloud data operations:

  1. When the function is started it first creates a new chat record OpenAIChat this is the parent record that we use to keep track of all messages.

  2. Next it creates the system message. That is the first message of the chat and it tells the chat bot how it should behave. You can provide your own message by changing the String node. All messages are records of type OpenAIChatMessages and we provide the newly created chat Id when creating the system message.

  1. Then we create a second message which is what we want the AI assistants first welcome message to be. You can edit the message by editing the properties of the Create New Record node. All messages have a Role and a Content property. The role can be one of system, assistant, user and the content contains the content of the message.

  1. Now we have the system message and the first message in place we can respond from the function. We make sure to send the Chat Id back so we can use this later in the frontend when sending new messages.

Send message​

The second cloud function is OpenAI/Send Message and this is where we send new messages to the OpenAI API and store the response. The first part of the function looks like this:

  1. First we receive the content from the request and we create a new OpenAIChatMessages record with the new content, this time we set the role to user. Making sure we set the Chat pointer to the Chat Id supplied with the request.

  2. Next we query all messages we have up until this point, using a query records node and the Chat Id we got with the request. These will be fed into the OpenAI API.

  1. Here we feed the chat message into the logic component Chat Completion that comes with the prefab. What this logic component does is that it asks OpenAI for the next message that should follow given the provided chat history.

  2. When it succeeds we create a new OpenAIChatMessages record, this time with the role assistant and the content from the response we receive from OpenAI.

  3. Now the function completed and the frontend updates by again fetching all messages in the chat.

Improvements​

This prefab is meant to give you a starting point for building AI applications based on the OpenAI chat API. Here are a few pointers for how you can improve it.

  • Somtimes the Chat Completion calls can take long and Noodl cloud functions have a timeout at 25s, but actually the keep running until completion and the message will be added to the database when completed. It can be an idea that if you get a timeout on the frontend to keep polling the database for a few seconds.

  • You can also just return the latest message an add it to the list on the frontend, so you don't have to re-query the entire list every time a new message is added.

  • There is also a logic component called Completion that uses the prompt completion API that OpenAI provides.