Building a Simple Chatbot With Python or Bubble

I demonstrate two ways to build a simple chatbot using the OpenAI API: a Python notebook with Gradio and a no-code interface in Bubble. This is a historical tutorial using the API and libraries available at the time; current interfaces, model names and SDK syntax may differ.

For the Python example I use an OpenAI API key and a Google account for Colab. I create a notebook and install the OpenAI and Gradio libraries. Colab runs notebook cells and makes it easy to experiment without setting up a local Python environment.

The example imports the libraries and configures API access, then defines a function that sends the user’s prompt to the chat-completion endpoint. The demonstrated model is GPT-3.5 Turbo. API credentials should be kept secret rather than embedded in shared notebooks or client-side code.

The request contains a messages array with a user role and the entered text. I explain that a system message can provide general instructions for the assistant, while the user message contains the prompt. The response contains choices, from which the example extracts the returned message text.

I create a Gradio interface around the function with text input and output, then launch it in Colab. A test prompt asking for a joke returns a response. This is a simple prompt-and-response demonstration; the video does not build a persistent conversation history.

The second approach uses Bubble. I create an app, install its API Connector plugin and configure a private authorization header, a JSON content type and a POST action for the chat-completion endpoint. Credentials need to stay private and server-side when an app is shared.

The request body specifies the model and a user message, with a dynamic value for the prompt. I initialize the call using an example prompt so Bubble can inspect the response structure. This tutorial uses the endpoint and settings shown in the video, which may require updates with newer versions.

In Bubble’s design view I add a multiline input, a submit button and a text element to display the answer. The goal is a functional interface: the appearance can be customized later.

The button workflow calls the API action and supplies the input field’s value. A second workflow step stores the first returned message’s content in a custom state on the response element. The display element is then bound to that state.

In preview, I submit a prompt asking for a name and receive responses. A longer answer is initially clipped, so I enlarge the text element and test again. Both approaches demonstrate how a user interface can send a prompt and display the API response.