ChatGPT is eye-catching and has been a hot topic since its release. As a chatbot with a broad knowledge base, it is not limited to having daily-life conversations, but answering questions from various fields. The published model is good at handling text completion, text summarization, machine translation, and so on. You can also fine-tune it with field-specific data to improve its accuracy and performance according to your requirements.

The open-source low-code platform Openblocks supports you getting connected to ChatGPT to enrich the functionality of your app. This tutorial guides you through the steps to build an online chat bot with OpenAI models on Openblocks.

Prerequisites

Make sure you have registered an OpenAI account and an Openblocks account.

Step 1: Design the interface of the chat room

Go to Openblocks homepage and create a new app. You can easily design the look of your app by dragging and dropping components onto the canvas. In this example, I use three Text components, two Text Area components, and one Button component.

Step 2: Query AI models

You have two ways to connect to OpenAI models in your app, either creating a query directly in the app, or creating a new data source first. Note that the second method allows you to reuse OpenAI as a data source in multiple apps.

Connect to OpenAI models

1. In the query editor, click + New.

2. Click + New data source.

3. Select APIs > OpenAI.

4. Enter the required fields.

Log in your OpenAI account, click your profile and go to Manage account, then you can find your API Keys under the USER tab.

Query OpenAI models

In the query editor, click + New and then select the data source you have connected to. Set "Completions" as the category. At this stage, although the values of model and prompt still need update, you can run the query by clicking ▶ Run to check whether it works.

If you prefer to use a certain model, then you set its name as the value of model in Body. If you would like your user to select one, you can add a Select component and reference its value via selectComponent.value.

Step 3: Make your chat room responsive

Now you have all the basics needed for the chatting room. Before getting them linked to each other, let's first figure out how it is supposed to work. In order to display the chatting history, we need all user requests and AI responses. Here, I use a Temporary state for each, and the initial value of both is an empty string. The same setting also applies to the temporary state for retaining chatting history. Let's list the steps of a complete interaction with the OpenAI model and bind the components by adding proper actions and events:

1. The user inputs a prompt message.

2. The user clicks the button sendMsg. This click passes the user prompt to query askOpenAI and triggers it to run. At this step, we also store the user prompt in the corresponding temporary state. To pass value from user input to the query, we replace the value of "prompt" in Body with {{userInput.value}}.

3. After a successful run of query askOpenAI, we store its response in the corresponding temporary state, as well as updating the value of the temporary state that stores the chatting history after appropriate formatting, that is, adding Q: before all user prompts and A: before OpenAI responses.

Start chatting with OpenAI models in a self-constructed chat room!

What's next?

Openblocks is an open-source low-code platform where you can find 50+ built-in components. It also offers excellent documentation to discuss technical details, present practical tutorials, and provide all the information you need know for building an app. On Openblocks, you can get connected to most databases and any API within clicks, design custom components, share apps with colleagues or customers, and more.

Start your first app now and feel free to reach the vibrant community on Discord if you encounter any issue or would like to share an idea!