streamlit

Streamlit Skill

Comprehensive assistance with Streamlit development, generated from official documentation covering 317 pages of content including API reference, tutorials, deployment guides, and best practices.

When to Use This Skill

This skill should be triggered when:

• Building web apps with Python for data science, ML/AI, or analytics
• Creating dashboards with interactive visualizations and real-time data
• Developing data apps that need rapid prototyping and deployment
• Implementing widgets like buttons, sliders, file uploaders, or chat interfaces
• Working with charts using built-in charting or custom visualizations
• Deploying apps to Streamlit Community Cloud or other platforms
• Testing Streamlit apps with the app testing framework
• Configuring Streamlit apps with themes, secrets, or custom settings
• Building multi-page apps with navigation and routing
• Integrating authentication with OpenID Connect providers

Key Concepts

Core Architecture

Script-based execution: Streamlit apps run as Python scripts that rerun from top to bottom on every user interaction. This makes development simple but requires understanding state management.

Session State: Persistent data storage across reruns using st.session_state. Essential for maintaining user data, form inputs, and application state.

Caching: Use @st.cache_data for data operations and @st.cache_resource for expensive resources like ML models or database connections.

App Structure

Magic commands: Write variables or strings standalone to display them automatically (when magicEnabled is True).

Widget callbacks: Functions that run when widget values change, useful for complex interactions and state updates.

Fragments: Isolated portions of your app that can rerun independently with @st.fragment, improving performance for partial updates.

Quick Reference

Example 1: Hello World & Basic Display

import streamlit as st

# Simple text display
st.title("My First Streamlit App")
st.header("Welcome to Data Science")
st.write("Hello, World!")

# Magic command (displays automatically)
"This is magic!"

# Display data
import pandas as pd
df = pd.DataFrame({'A': [1, 2, 3], 'B': [4, 5, 6]})
st.dataframe(df)

Example 2: Interactive Widgets & Session State

import streamlit as st

# Initialize session state
if 'count' not in st.session_state:
    st.session_state.count = 0

# Button with callback
def increment():
    st.session_state.count += 1

st.button('Increment', on_click=increment)
st.write(f'Count: {st.session_state.count}')

# Various input widgets
name = st.text_input("Enter your name")
age = st.slider("Select age", 0, 100, 25)
option = st.selectbox("Choose option", ['A', 'B', 'C'])
uploaded_file = st.file_uploader("Upload CSV")

Example 3: Charts & Visualizations

import streamlit as st
import pandas as pd
import numpy as np

# Sample data
data = pd.DataFrame({
    'date': pd.date_range('2024-01-01', periods=30),
    'values': np.random.randn(30).cumsum()
})

# Built-in charts
st.line_chart(data.set_index('date'))
st.area_chart(data.set_index('date'))
st.bar_chart(data.set_index('date'))

# Map visualization
map_data = pd.DataFrame({
    'lat': [37.76, 37.77, 37.78],
    'lon': [-122.4, -122.41, -122.42]
})
st.map(map_data)

Example 4: Layouts & Containers

import streamlit as st

# Columns
col1, col2, col3 = st.columns(3)
with col1:
    st.header("Column 1")
    st.write("Content here")
with col2:
    st.header("Column 2")
    st.button("Click me")
with col3:
    st.header("Column 3")
    st.checkbox("Check me")

# Sidebar
with st.sidebar:
    st.header("Sidebar")
    filter_val = st.slider("Filter", 0, 100)

# Tabs
tab1, tab2 = st.tabs(["Data", "Charts"])
with tab1:
    st.write("Your data here")
with tab2:
    st.line_chart([1, 2, 3, 4, 5])

# Expander
with st.expander("Click to expand"):
    st.write("Hidden content revealed!")

Example 5: Forms & User Input

import streamlit as st

# Form prevents rerun on every input change
with st.form("my_form"):
    st.write("User Registration")
    name = st.text_input("Name")
    email = st.text_input("Email")
    age = st.number_input("Age", min_value=0, max_value=120)

    # Form submit button
    submitted = st.form_submit_button("Submit")
    if submitted:
        st.success(f"Welcome {name}!")
        st.session_state.user_data = {
            'name': name,
            'email': email,
            'age': age
        }

Example 6: Caching for Performance

import streamlit as st
import pandas as pd
import time

# Cache data loading (recomputes when inputs change)
@st.cache_data
def load_data(file_path):
    time.sleep(2)  # Simulate expensive operation
    return pd.read_csv(file_path)

# Cache ML models/resources (persists across reruns)
@st.cache_resource
def load_model():
    from sklearn.ensemble import RandomForestClassifier
    model = RandomForestClassifier()
    # Load trained model...
    return model

# Use cached functions
data = load_data("data.csv")
model = load_model()
st.write(data)

Example 7: Chat Interface (LLM Apps)

import streamlit as st

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

# Display chat messages
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.write(message["content"])

# Chat input
if prompt := st.chat_input("What would you like to know?"):
    # Add user message
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.write(prompt)

    # Generate and display assistant response
    response = f"Echo: {prompt}"  # Replace with actual LLM call
    st.session_state.messages.append({"role": "assistant", "content": response})
    with st.chat_message("assistant"):
        st.write(response)

Example 8: App Testing with pytest

# app.py
import streamlit as st

st.session_state.beans = st.session_state.get("beans", 0)
st.title("Bean counter")
addend = st.number_input("Beans to add", 0, 10)
if st.button("Add"):
    st.session_state.beans += addend
st.markdown(f"Beans counted: {st.session_state.beans}")

# tests/test_app.py
from streamlit.testing.v1 import AppTest

def test_increment_and_add():
    """Test that incrementing and adding works"""
    at = AppTest.from_file("app.py").run()
    at.number_input[0].increment().run()
    at.button[0].click().run()
    assert at.markdown[0].value == "Beans counted: 1"

Example 9: User Authentication (OpenID Connect)

import streamlit as st

# Check authentication status
if not st.user.is_logged_in:
    if st.button("Log in"):
        st.login()
else:
    st.write(f"Hello, {st.user.name}!")
    st.write(f"Email: {st.user.email}")

    if st.button("Log out"):
        st.logout()

# Configuration in .streamlit/secrets.toml:
# [auth]
# redirect_uri = "http://localhost:8501/oauth2callback"
# cookie_secret = "your-secret-key"
# client_id = "your-client-id"
# client_secret = "your-client-secret"
# server_metadata_url = "https://accounts.google.com/.well-known/openid-configuration"

Example 10: Configuration & Theming

# .streamlit/config.toml

[theme]
primaryColor = "#F63366"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#262730"
font = "sans-serif"

[server]
port = 8501
enableCORS = false
maxUploadSize = 200

[client]
showErrorDetails = true
toolbarMode = "auto"

Reference Files

This skill includes comprehensive documentation organized into focused categories:

api.md (439KB, 187 pages)

Complete API reference covering all Streamlit commands:

• Display elements: st.write, st.markdown, st.title, st.header, st.text, st.code, st.latex
• Data display: st.dataframe, st.table, st.metric, st.json, st.data_editor
• Charts: st.line_chart, st.area_chart, st.bar_chart, st.map, st.plotly_chart, st.altair_chart
• Input widgets: st.button, st.checkbox, st.radio, st.selectbox, st.slider, st.text_input, st.file_uploader
• Media: st.image, st.audio, st.video, st.camera_input
• Layouts: st.columns, st.tabs, st.expander, st.container, st.sidebar
• Chat elements: st.chat_message, st.chat_input
• Status elements: st.progress, st.spinner, st.success, st.error, st.warning
• Control flow: st.stop, st.rerun, st.form, st.dialog, @st.fragment
• State: st.session_state, st.query_params
• Caching: @st.cache_data, @st.cache_resource
• Connections: st.connection, database integrations
• User auth: st.login, st.logout, st.user
• Configuration: st.set_page_config, config.toml options

tutorials.md (111KB, 57 pages)

Step-by-step guides and practical examples:

• Getting started tutorials: Creating your first app, multi-page apps
• LLM/Chat apps: Building conversational interfaces, chat response feedback
• Database connections: AWS S3, BigQuery, MongoDB, PostgreSQL, Snowflake, TigerGraph
• Data handling: Dataframe row selections, working with large datasets
• Execution flow: Fragments, forms, multipage navigation
• Authentication: Google, Microsoft OAuth integration
• Configuration: Theming, fonts, static file serving

concepts.md (103KB, 42 pages)

Deep dives into Streamlit architecture and advanced concepts:

• Architecture: How Streamlit runs, script execution model, app lifecycle
• Caching: @st.cache_data vs @st.cache_resource, cache invalidation
• Session State: Managing state across reruns, widget semantics
• Multi-page apps: Pages directory structure, navigation, dynamic routing
• Fragments: Partial reruns for performance optimization
• Forms: Batching user input to pr

---

Content truncated.