Streamlit
Stakeholders need to try retrieval before you build FastAPI + React. A Streamlit chat that shows source chunks sells the pipeline and catches bad retrieval early. It is not a production web stack.
Streamlit is the PowerPoint of AI prototypes: paste Python, get a shareable UI in an afternoon.
Visual Workflows
Start here — scroll inside each diagram frame to explore, then use + / − to zoom up to 200% if needed.
Overview
Scroll inside the frame to explore · use + / − to zoom up to 200%
Scroll inside the frame to explore · use + / − to zoom up to 200%
Demo loop
Scroll inside the frame to explore · use + / − to zoom up to 200%
Script reruns top to bottom. History lives in session_state.
Show your work
Scroll inside the frame to explore · use + / − to zoom up to 200%
A RAG demo without sources is just a chatbot.
Key Takeaways
- 1.Streamlit turns a Python script into a clickable RAG demo — chat input, message history, sidebar knobs — without writing a frontend. The script reruns top-to-bottom on every interaction.
- 2.Put chat history in st.session_state or it resets. Use st.chat_input / st.chat_message for the transcript, st.sidebar for k and model, st.expander for retrieved chunks.
- 3.Pair with Chroma + an LLM. For production: FastAPI, auth, and a real UI.
- 4.Streamlit is the demo layer of this phase.
Real Example
Scenario
A 60-line app: upload a PDF, index it, chat against it, and expand 'Sources' under each answer so reviewers see which pages were used.
What you would do
In RAG Engineering, apply Streamlit to this scenario: A 60-line app: upload a PDF, index it, chat against it, and expand 'Sources' under each answer so reviewers see which pages were used. Identify the inputs, run the technique, validate the output, and note one thing you would monitor in production.
Practice Task
Open the Code Walkthrough below and run it locally. Change one parameter related to Streamlit (e.g. model, temperature, top_k, or tool name), observe the difference in output, and write 2–3 sentences explaining what changed.
Code Walkthrough
Highlighted lines show where Streamlit happens in the code.
1import streamlit as st # import dependencies2from openai import OpenAI # import dependencies3
4client = OpenAI() # create API client5st.title("Handbook RAG demo")6if "messages" not in st.session_state:7 st.session_state.messages = []8for msg in st.session_state.messages:9 st.chat_message(msg["role"]).write(msg["content"])10if prompt := st.chat_input("Ask the handbook"):11 st.session_state.messages.append({"role": "user", "content": prompt})12 reply = client.chat.completions.create( # call the API13 model="gpt-4o-mini",14 messages=st.session_state.messages,15 temperature=0,16 )17 answer = reply.choices[0].message.content18 st.session_state.messages.append({"role": "assistant", "content": answer})19 st.chat_message("assistant").write(answer)Commands
Commands to Remember
pip install streamlit && streamlit run app.pyst.session_state.messages = [] # conversation memoryst.chat_input('Ask the handbook')Prototype in Streamlit; production UI is FastAPI + a real frontend
Cheat Sheet
Quick recap
quick ref- •streamlit run app.py
- •session_state holds history
- •Show retrieved chunks in an expander
- •Prototype only — FastAPI later
Common Mistakes
- ✕Shipping Streamlit as the production app
- ✕Forgetting session_state — chat wipes every click
- ✕Hiding sources — then nobody can debug retrieval