Supercharge Your Streamlit App with OpenAI Assistants API

Table of Contents

1. Introduction
2. Recreating the OpenAI Assistant Demo
3. Building the Python Web App
4. Adding OpenAI Muscles to the App
5. Predefined Functions in the Assistant
6. Controlling the Streamlit App
7. Initializing the App and Session State
8. Interacting with the App through Chat Input
9. Updating the Map Session State
10. Connecting the OpenAI Assistant
11. Implementing the OpenAI Assistant Workflow

Recreating the OpenAI Assistant Demo

In this article, we will discuss the process of recreating the OpenAI Assistant Demo in Python. The OpenAI Assistant Demo showcases how the user can ask the assistant to mark the top tourist spots in Paris and the assistant updates the map in real-time. We will go step by step to Create a Python web app using Streamlit and integrate OpenAI's Assistant API to control the app. We will explore predefined functions, session state management, and the OpenAI Assistant workflow.

Building the Python Web App

First, we will start by creating a new Python app script using Streamlit. We will display the app in a browser tab by running the streamlit run app.py command. The script will contain a title, columns for text and a Plotly Express map, and a chat input widget. These elements form the basic structure of our app.

Adding OpenAI Muscles to the App

To add OpenAI functionality to our app, we need to obtain the OpenAI API Key and store it in a secrets file. We also need to obtain a Mapbox API key for displaying maps. It is important to keep these keys private and add the secrets file to the .gitignore to prevent accidental exposure.

Predefined Functions in the Assistant

To enable the assistant to perform specific actions, we create predefined functions and provide a description, typing, and explanation of each argument using a JSON schema. These functions define the capabilities of the assistant and allow it to generate and send the required code.

Controlling the Streamlit App

Before allowing the assistant to control our Streamlit app, we need to establish an entry point for it. We can do this by initializing global variables in the Streamlit session state and preparing references to OpenAI objects such as the assistant, messages thread, and Current run. We can display the session state using the Streamlit Sidebar Context Manager for debugging purposes.

Interacting with the App through Chat Input

We enable user interaction by using a chat input widget. Whenever text is submitted, a callback function is triggered that adds the user's message to the assistant's message thread. The assistant is then asked to generate an answer Based on the full conversation. We monitor the progress of the run and retrieve the generated answer once it is complete.

Updating the Map Session State

To update the map session state, we create an update_map function that takes Latitude, longitude, and zoom level as arguments. This function ensures that the map is properly updated based on user input. We also create a dictionary that maps the STRING update_map to the update_map function.

Connecting the OpenAI Assistant

To connect the OpenAI assistant to our app, we create an OpenAI client using the API key from the secrets file. We establish a link to the remote assistant and store its reference in the session state. This allows us to control the app from a single point by updating the session state.

Implementing the OpenAI Assistant Workflow

The OpenAI Assistant workflow involves three levels of abstraction: the assistant object, the message thread, and the run. We define instructions, predefined calls, and retrieve knowledge from the assistant object. The message thread contains the user messages, and the run generates an answer based on the conversation. We monitor the run and retrieve the full conversation once it is complete.

In the next section, we will dive deeper into each step and implement the OpenAI Assistant Demo in Python.

Introduction

As a developer enthusiast, I was intrigued by the OpenAI Assistant Demo showcased at the OpenAI dev day. The demo showcased a user asking the assistant to mark the top tourist spots in Paris, and the assistant would update the map in real-time. This black magic left me Wondering how GPT-4 generates and runs Javascript code to update the map. To understand this fascinating feature, I decided to recreate the demo in Python using the OpenAI Assistant API.

But before diving into the implementation details, I needed to clarify a few things. Does GPT-4 actually generate code to control a Streamlit map? Or is it not as magic as it seems? To find the answers, I started by creating a Python Web App using Streamlit.

Recreating the OpenAI Assistant Demo with Python Web App

To recreate the OpenAI Assistant Demo, I began by creating a new Python script called app.py in my favorite editor. Using Streamlit, I ran the streamlit run app.py command to display my app in a browser tab. The script consisted of a title, two columns (one for text and one for a Plotly Express map), and a chat input widget.

Next, I added OpenAI muscles to my app. I obtained my OpenAI API key from the API keys page and added it to a .streamlit/secrets.toml file. I also obtained a Mapbox API key for displaying maps and added it to the same file. Ensuring the secrecy of these keys, I added the secrets file to my .gitignore to prevent accidental exposure on GitHub.

With the app structure in place, I moved on to adding OpenAI functionality. I created predefined functions in the OpenAI assistant page, specifying their names, descriptions, typings, and explanations of arguments in a JSON schema. This allowed GPT-4 to generate and send code based on these predefined functions.

Why would I use predefined functions instead of letting GPT-4 generate code directly? Although GPT-4 is impressive, I wouldn't entirely trust it to run code without validating it. By defining these functions, I had more control and could ensure the generated code was reliable and safe to run.

The skeleton of my app was complete, and it was time to add the OpenAI Assistant to the mix. I grabbed my OpenAI API key from the secrets file, created an OpenAI client, and linked it to the remote assistant. The OpenAI Assistant workflow involved three levels of abstraction: the assistant object, the message thread, and the run. I configured the assistant object with instructions, predefined calls, and files. The message thread stored the user messages, and the run was responsible for generating an answer based on the conversation.

In the next section, I will dive deeper into the implementation details, discussing each step in detail and highlighting important considerations and challenges along the way.

(Note: The highlighted headings above indicate the main sections and subheadings within the article. The actual headings in the article may differ slightly based on the flow of the content.)