Build an Interactive AI App UI with Streamlit in Minutes

1. 1
   Install Streamlit

   Install the Streamlit library using pip in your terminal. This command downloads and installs the package and its dependencies into your active Python environment.
2. 2
   Create Your App Script

   Create a new Python file (e.g., `app.py`). Import the library and add a title. Every Streamlit app starts with `import streamlit as st`. Functions like `st.title()` render directly to the web UI.
3. 3
   Run Your App

   In your terminal, navigate to the script's directory and run it using the `streamlit run` command. Streamlit starts a local web server and opens your app in a new browser tab. The app will auto-reload when you save changes to the script.
4. 4
   Add Interactive Widgets

   Make your app interactive. Use `st.text_input()` to create a text box and `st.button()` for a submit button. These functions return the user's input and the button's click state, respectively. Streamlit re-runs the script on each interaction.
5. 5
   Display Dynamic Output

   Use an `if` block to check if the button was clicked. If true, use `st.write()` or `st.success()` to display the processed input. This demonstrates Streamlit's reactive model: script re-runs update the UI based on widget state.

import streamlit as st
import time

# Set the page title and icon
st.set_page_config(page_title="Echo Bot", page_icon="🤖")

# Display the title of the app
st.title("🤖 Simple Echo Bot")

# Add a header
st.header("Streamlit Interactive Demo")

st.info("Enter text below and click the button to see it echoed back.")

# Get user input using a text input box.
# The first argument is the label, the second is a default value.
user_input = st.text_input("Your message:", "Hello, Streamlit!")

# Create a button. The code inside the if block runs when it's clicked.
if st.button("Echo it!"):
    if user_input:
        # Display a spinner while "processing"
        with st.spinner('Thinking...'):
            time.sleep(1) # Simulate a network or model delay

        # Use st.chat_message for a conversational look
        with st.chat_message("assistant"):
            st.write(f"Echo: {user_input}")
    else:
        # Show a warning if the user clicks the button with no input
        st.warning("Please enter some text first.")

# Add a sidebar for extra information (demonstrates layout features)
st.sidebar.header("About")
st.sidebar.write("""
This is a simple demo of Streamlit's core features, including widgets, state management, and reactive updates. 

Perfect for building quick AI/ML prototypes.
""")