building-streamlit-chat-ui

Build Streamlit chat UIs with st.chat_message and st.chat_input.

Updated Aug 29, 2025
One-click install
npx skills add https://github.com/DDTully/dotfiles --skill building-streamlit-chat-ui-ddtully
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-chat-ui
Source: https://github.com/DDTully/dotfiles/tree/main/skills/.agent_skills/developing-with-streamlit/skills/building-streamlit-chat-ui
Command: npx skills add https://github.com/DDTully/dotfiles --skill building-streamlit-chat-ui-ddtully

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlit-based chat interfaces provide ready-made patterns for managing chat messages, inputs, and streaming responses, reducing boilerplate when creating conversational UIs and chatbots.

Core Features & Use Cases

  • Chat rendering with st.chat_message for user and assistant roles.
  • Input handling with st.chat_input and session state to maintain message history.
  • Streaming responses with st.write_stream to display token-by-token outputs.
  • Use cases include building chatbots, AI assistants, and conversational UIs inside Streamlit apps.

Quick Start

Initialize a messages list in session_state, render messages with st.chat_message, and handle new input with st.chat_input to start a Streamlit chat UI.

Frequently Asked Questions about building-streamlit-chat-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a chatbot UI with streaming responses in Streamlit?▼

You can build a Streamlit chatbot UI by using st.chat_message for rendering roles and st.write_stream to display token-by-token streaming responses for conversational interfaces.

How does session state work for managing chat message history in Streamlit?▼

Session state in Streamlit stores a messages list to maintain chat history across interactions, ensuring st.chat_input updates and preserves the conversational context for AI assistants.

What is the best way to render user and assistant messages in a Streamlit chat interface?▼

The best way to render messages in a Streamlit chat interface is using st.chat_message, which provides distinct visual avatars for user and assistant roles based on your session state history.

Can I use st.chat_input and st.write_stream together for real-time LLM output?▼

Yes, you can use st.chat_input to capture user prompts and st.write_stream to render real-time LLM output token-by-token within st.chat_message blocks for streaming chatbot interfaces.

Why does my Streamlit chat interface lose message history on rerun?▼

Streamlit chat interfaces lose message history on rerun when the messages list is not initialized and persisted in session state, causing the conversational context to clear on new inputs.

Do I need any external dependencies to create a conversational UI in Streamlit?▼

No external dependencies are required to create a conversational UI in Streamlit, as st.chat_message, st.chat_input, and st.write_stream provide native chatbot interface patterns without extra components.