How to Build a Streamlit App in Positron

Hi everyone, my name is Isabella Velazquez and today we'll be walking through how to create a Streamlit app in Positron, Positron's next generation data science IDE. I will walk you through setting up your project and your Python environment in Positron, how to build your app with the help of the integrated viewer, how to get assistance from large language models through Positron Assistant, and finally how to deploy and share your apps with others. So with that, let's get started.

Setting up the project and environment

Here we have Positron open. If you do not have Positron and Python installed, we have recommended instructions linked in the description below. You have the option of opening an existing folder or creating a new one. In this case, I'm going to click New from Git. Then I'm going to paste the Git repository URL of our project. You can choose your desired directory and then click OK.

What this does is it clones the GitHub repository and then opens up the folder where the files live. On the left hand side, you can see the activity bar and you can see the project files in the file explorer, which you can view and open. Let's open up original-app.py, which is a project that we'll be working on today.

Because we're working in Python, let's now set up our environment. There are various different ways of doing this, but for today's example, we're going to be using UV, which is an extremely fast package and project manager written in Rust. I'm going to open up my terminal. You can see the console on the left and then terminal on the right. Clicking on Terminal opens up a new terminal and then I can run the snippet to create the virtual environment, uv-map.

Now I have a new virtual environment and notice the notification that asks, we notice a new environment has been created. Do you want to select it for the workspace folder? Going to hit yes. Now both the console and the new terminals will reflect the new project specific virtual environment. Next, I'm going to install all of the project dependencies by returning to my terminal and then typing source.vimp.bin.activate. And now I'm going to install them by running uv pip install-r requirements.txt. If you noticed, all of the packages installed super quickly and now we're ready to start building.

Exploring the app code

This code is actually for a Streamlit app that I created several years ago when I was very new to Streamlit. This is an example using trauma hospital analytics from the US and it visualizes hospital locations and analyzes geographic accessibility based on Kyle Walker's tutorial. Let's look at the different sections.

The initial lines of code import necessary libraries such as pandas and numpy, matplotlib and seaborn, geopandas, and of course, Streamlit. The next part configures the Streamlit page and also adds a title and a caption. The next section handles the user input and data retrieval. ST sidebar creates a sidebar on the web page for user controls. ST select box creates a drop-down menu in the sidebar which allows the user to select one of three states, California, Arizona, or Wisconsin, and the selected value is stored in the state variable.

Cache data is a Streamlit caching decorator. It tells Streamlit to run the function below only once for a given set of inputs and that the function is called again with the same inputs of retrieve the cache result instead of rerunning the function which saves time. Set data uses Pygris to download census track data for the selected state. Load data reads a GeoJSON file named trauma.GeoJSON which contains the trauma hospital locations. It then filters this data to include only the hospital in the selected data frame and returns the filtered geo data frame.

Finally, this part of the code structures the app's layout and performs the core geospatial analysis. ST columns divides the main content area into two columns and then with column defines the content to be placed in each column. In the first column, the display is an interactive map using the trauma geo data frame showing the locations of the trauma hospitals. In the second column, there is a table with specific columns of the raw trauma hospital data and then also a bar chart of the histogram data visualizing the distribution and minimum distances from the census tracks to trauma centers.

Exploring data in Positron's data explorer

Let's say we want to take a closer look at the data that we're actually visualizing in the dashboard. We could open it up here in the file explorer, but this is a JSON file and a bit difficult to read. Let's instead open up our console and then here I'm going to type in import geopandas as GP and then trauma equals GP.feed file trauma.geojson. Doing this populates the data in Positron's data explorer.

If I open it up, I can get a closer look at what's contained within the geojson file. I can see the names of the individual variables. If I click on this arrow, I can see the specific details or values of those variables. For example, here are the names of the various hospitals. We have other information like their address and telephone number. We also have some quantitative data. For example, population and I can click on here to get a closer look at what that looks like.

I can take a quick look, sort ascending, see that there's some negative values, so those need to be cleaned up, sort descending. I can also check out this viewer and see the general distribution of those values as well. Let's say I want to add a filter and I want it to say, because it's population, be greater than zero. Then I can take a closer look at the population without those negative 999 numbers, which presumably are missing or meant to be discarded in some way. Also be aware that this isn't going to change your data. It's meant to be an ephemeral view for you to get to know your data before you get started on your work.

It's meant to be an ephemeral view for you to get to know your data before you get started on your work.

Running the app and enabling live reloading

Now we have everything we need to run our Streamlit app. In the original-app.py file, I can click the play button to see a preview in Positron's viewer pane. I can interact with the app directly in the viewer pane. Or I can click the pop-up button to open it in my default browser.

From here, we can see the different components that we just talked about. On the left-hand side is our sidebar with our filters. And then in the main body of the dashboard, we have a title, a caption, a container with two columns, one containing an interactive map and another containing a table. And then a second container that contains the histogram with the minimum distance to trauma center from the tracked centroid.

Now let's go back to Positron. You can enable live reloading by saving the script after making an edit. So let's say in the title, I'm going to add 2025. Hit save. Now you'll notice that the dashboard gives me an option to rerun and to always rerun. Saying always rerun enables automatically rerunning for the session. I'm just going to hit rerun for now.

Because one neat thing about Positron is that you can configure instantaneous updates anytime you open this folder. The way to do this is to configure your streamlet config.toml file. To do this, I can open up my terminal. From here, we can open up a new terminal. I'm going to create a new folder by typing make directory-p.streamlet and then create a file by running nano.streamlet.config.toml. Here I'm going to add my settings, square braces, server, and then in a new line, run on save equals true. I'm on a Mac, so to save, I'm going to hit Control-O, Tab, and then Control-X to exit.

If you notice, in the file explorer, we have a new folder called .streamlet. I'm going to open it up. Here's my config.toml file. Next I'm going to open up the command palette by running Command-Shift-P, then reload window. This actually applies to new settings. And then I can rerun my app by hitting the play button. Let's say I want to remove the year. When I hit save, the changes are automatically applied. As you can imagine, this is very helpful if you want to iterate on your dashboard and quickly see the changes without having to reload every single time.

Using Positron Assistant to improve the app

As I mentioned, I created this dashboard a few years ago, and there are a lot of improvements to the features and functionalities that we can make. Nowadays, we can do that with the help of large language models, or LLMs. Positron Assistant is a preview feature in Positron and provides LLM integration for chat with Anthropic and inline completions with GitHub Copilot. You can configure it by following the Positron Assistant documentation.

Once you have it configured, you can open it from the activity bar like I just did, and Positron Assistant automatically detects app.py and other relevant environment variables. There are various ways of using Positron Assistant. You can use agent mode if you want Positron Assistant to determine the steps needed for your request and carry them out on your behalf. It can execute code, create and modify files, and identify next steps based on the results of the previous steps. For edit mode, you can make code changes with the model's help. The model will suggest code changes based on your prompts, and then you can apply those changes to your code.

I like ask mode. I use this mode to ask questions, get help with debugging, or request code generation. And this is the default mode when you open the chat. Since I've reloaded Positron since the time that we read in the GeoJSON file, I want to make sure that I do that again. That way, it is populated in my variables pane, which Positron Assistant can read.

I want a quick overview of key metrics for each state. So I can ask Positron Assistant, can you add a row of metrics to the dashboard using ST metric? I want number of hospitals, number of helipads, and number of level one trauma centers. They should be filtered by what is chosen in ST filter. I hit enter. You can see Positron Assistant is working. First, it's examining the trauma data set to understand what columns are available. It can see the structure of the trauma data set, and it can create the metrics I requested, number of hospitals, helipads, and level one trauma centers. And then it lets me know, here's the code to add these metrics to your dashboard.

With all of the code for the Streamlit app, then it also lets me know what exactly we are adding, the metrics row, the total hospitals, and hospitals with helipad, and that it will be filtered by the state that is selected. And I can see where exactly it says add metrics row. In this case, if I want to, I have a few options. I can run in the console just to see what exactly this code entails. I also can apply in the editor. If I want to, I can insert at the cursor. If I click somewhere on my script, I can also copy, or I can insert it into a new file.

This time, Positron Assistant gave me the full app that I asked for. Let's insert it into a new file. I'll have to save it as something, so let's say app2. Let's go back to our file explorer and open up app2.py. Click play. I can pop it out to make it easier to see. Here we go. Here is my updated dashboard, and I can see there is a new row with my three metrics that I requested, total hospitals, total hospitals with helipads, and level one trauma centers. I can filter, and I can see that the numbers have updated.

And from here, I can keep chatting with Positron Assistant to continue making the dashboard more customized, more complex, based on my stakeholders' needs. And because it is AI, it varies slightly every single time you ask it questions. In the end, the app that I created is the one stored in app.py, which if I run it, you can take a look. This is what it looks like.

It has these rows of metrics. One thing that Positron Assistant helped me with was adding all of the states, so I don't have to filter by just three. It was very easy to create the vector with all of the information that I need. It also helped me add this export data option, so that if folks are interested in either the complete version of the data or summary report, they can download it here. In terms of the main dashboard, in addition to the metrics rows, Positron Assistant also helped me create a nicer looking table that can actually be searched, as well as a nicer looking histogram where I can see the number of census tracts, also the mean and medium to kind of compare them.

Deploying to Posit Connect

Once your Streamlit app is ready, you'll want to share it with your team or your manager or whoever is interested. There are many ways of deploying Streamlit apps, but I'm going to show you how to deploy to Posit Connect, which is our enterprise publishing platform, from Positron directly through the Posit Publisher. Please note, I already have Posit Connect configured for deployment, but that consisted of the Posit Connect URL, the name, and the API key.

Once you have the deployment configured, you can hit the Posit Publisher button. Then it's going to ask you for the title of your content. I'm going to stay with Streamlit Example. I'm going to publish it to the demo server. It's going to create a configuration file. On the left, you can see the Posit Publisher home with the project files and other information about the deployment. I'm also going to add the GeoJSON file so that it makes sure to read in the data to actually display the app. Then I'm going to hit Deploy Your Project.

Now it's restoring my environment, rebuilding everything so that I can publish to Posit Connect. It lets me know that deployment was successful. Now we have our deployed Streamlit app. It looks just like it did in the preview. I can use the filters. Then I can go to my settings. I can share to anybody with no login required, to all users with a login required, or specific users. I can add a custom URL like HospitalStreamlitApp and save. That's a URL that I would share with others if they want to check it out. If I want to see what it actually looks like when I share it with someone, I can click Open Solo.

With that, I hope that this video gave a nice overview of different features that you can use within Positron when you develop your next Streamlit app. Check out positron.posit.co for instructions and the download link. I'm really excited to see what you create. Thanks.