Lab 09 — Streamlit PoC UI (rapid prototyping)
Goal. Put a chat UI on the banking assistant in a few lines — the JD's "Streamlit or Flask for rapid PoC development". The point of these tools is speed: a demoable interface in an afternoon. The UI is a thin shell over a tested, UI-agnostic logic layer so the behavior (including the human-approval handshake for transfers) is verifiable without a browser.
Stack. Streamlit (and a Flask variant) over the Lab 07 capstone assistant.
Run it
pip install -r requirements.txt # streamlit + pytest
streamlit run streamlit_app.py # opens the chat UI in your browser
# or the Flask variant: pip install flask && python flask_app.py # http://localhost:5000
pytest -q # 6 tests on the logic layer (no browser needed)
Try: "How long to dispute a transaction?", "What's my balance?", "transfer 100 to AE_friend" (watch the Approve/Decline buttons appear), "ما هي رسوم الحساب الجاري؟", "Should I invest in stocks?" (refused).
Code tour
| File | Role |
|---|---|
| chat_logic.py | UI-agnostic ChatSession over the capstone; manages the transfer approval handshake. All behavior lives here (testable) |
| streamlit_app.py | thin Streamlit chat UI + approval buttons + example sidebar |
| flask_app.py | the Flask variant (same logic, minimal HTML) — the "or Flask" option |
| test_logic.py | tests the logic layer headlessly (grounded answer, balance, approve/decline, refusal) |
Why the logic is separate from the UI
UI frameworks are hard to unit-test, so all behavior lives in chat_logic.py and the UI files just render it. This is good practice generally — and it means the human-in-the-loop approval gate (the UI surfaces it as buttons) is covered by tests, not just clicked through. For production you keep the FastAPI service (Lab 05); Streamlit/Flask are for fast internal demos and PoCs, not the customer-facing API.
Talking point
"Streamlit/Flask are my rapid-PoC tools — I can demo an idea in an afternoon — but I keep all behavior in a tested logic layer and ship the production API on FastAPI. Notice the transfer flow surfaces an explicit approve/decline step: the UI reflects the same human-in-the-loop gate the agent enforces, so even the demo is honest about how money moves."