New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Building Streamlit Chat UI

by iusztinpaul in iusztinpaul/designing-real-world-ai-agents-workshop

Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

Apache-2.0Auto-check passedAI & LLM Engineering

Install Building Streamlit Chat UI

skills CLI
$ npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill building-streamlit-chat-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install iusztinpaul/designing-real-world-ai-agents-workshop building-streamlit-chat-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/developing-with-streamlit/skills/building-streamlit-chat-ui .claude/skills/building-streamlit-chat-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
building-streamlit-chat-ui
GitHub stars
512
Token cost
~1.4k tokens
SKILL.md length
213 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
Apache-2.0

At a glance

Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

  • Creating conversational UIs
  • SKILL.md covers Basic chat structure, Streaming responses, Chat message avatars and Suggestion chips, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve LLM API integration

What it does

Building Streamlit Chat UI is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Building chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chatmessage, st.chatinput, message history, and streaming responses.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in AI & LLM Engineering, covering LLM API integration, Chatbots and conversational support and Transcription. It works with Streamlit. The repository describes itself as: Hands-on workshop: Build a multi-agent AI system from scratch — Deep Research Agent + Writing Workflow served as MCP servers. Includes code, slides, and video. The licence is Apache-2.0.

When your agent uses it

  • Creating conversational UIs
  • Tasks that involve LLM API integration
  • Tasks that involve Chatbots and conversational support

Example prompts

  • “/building-streamlit-chat-ui”

Requirements

  • Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit ea4f6e9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are python).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.streamlit.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Building Streamlit Chat UI loads about 1.4k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 213 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from iusztinpaul/designing-real-world-ai-agents-workshop at commit ea4f6e9, republished under its Apache-2.0 licence (© iusztinpaul). 213 words, ~1,401 tokens.

Download SKILL.mdSave it as .claude/skills/building-streamlit-chat-ui/SKILL.md (or your agent's skills folder).
name
building-streamlit-chat-ui
description
Building chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chat_message, st.chat_input, message history, and streaming responses.
license
Apache-2.0

Streamlit chat interfaces

Build conversational UIs with Streamlit's chat elements.

Basic chat structure

python
import streamlit as st

if "messages" not in st.session_state:
    st.session_state.messages = []

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

# Handle new input
if prompt := st.chat_input("Ask a question"):
    st.session_state.messages.append({"role": "user", "content": prompt})

    with st.chat_message("user"):
        st.write(prompt)

    with st.chat_message("assistant"):
        response = get_response(prompt)  # Your LLM call
        st.write(response)

    st.session_state.messages.append({"role": "assistant", "content": response})

Streaming responses

Use st.write_stream for token-by-token display. Pass any generator that yields strings, including the OpenAI generator directly:

python
def get_streaming_response(prompt):
    # Replace with your LLM client (OpenAI, Anthropic, Cortex, etc.)
    for chunk in your_llm_client.stream(prompt):
        yield chunk

with st.chat_message("assistant"):
    response = st.write_stream(get_streaming_response(prompt))

st.session_state.messages.append({"role": "assistant", "content": response})

With OpenAI, you can pass the stream directly:

python
from openai import OpenAI

client = OpenAI()
with st.chat_message("assistant"):
    stream = client.chat.completions.create(
        model="gpt-4o",
        messages=st.session_state.messages,
        stream=True,
    )
    response = st.write_stream(stream)

Chat message avatars

Streamlit provides default avatars for "user" and "assistant" roles—only customize if you have a specific need. You can use icons or images:

python
# With icons
with st.chat_message("assistant", avatar=":material/robot:"):
    st.write(assistant_message)

# With images
with st.chat_message("user", avatar="https://example.com/avatar.png"):
    st.write(user_message)

Suggestion chips

Offer clickable suggestions before the first message. The pills disappear once the user sends a message, creating a clean onboarding experience:

python
SUGGESTIONS = {
    ":blue[:material/help:] What is Streamlit?": "Explain what Streamlit is",
    ":green[:material/code:] Show me an example": "Show a simple Streamlit example",
}

# Only show before first message - they disappear after
if not st.session_state.messages:
    selected = st.pills("Try asking:", list(SUGGESTIONS.keys()), label_visibility="collapsed")
    if selected:
        # Use the selection as the first prompt
        prompt = SUGGESTIONS[selected]
        st.session_state.messages.append({"role": "user", "content": prompt})
        st.rerun()

The if not st.session_state.messages check ensures the suggestions only appear on an empty chat. Once a message is added, the pills vanish and the conversation takes over.

File uploads

Enable file attachments with accept_file. When enabled, st.chat_input returns a dict-like object with text and files attributes:

python
prompt = st.chat_input(
    "Ask about an image",
    accept_file=True,
    file_type=["jpg", "jpeg", "png"],
)

if prompt:
    with st.chat_message("user"):
        if prompt.text:
            st.write(prompt.text)
        if prompt.files:
            st.image(prompt.files[0])

    # Send to vision model
    with st.chat_message("assistant"):
        response = analyze_image(prompt.files[0], prompt.text)
        st.write(response)

Use accept_file="multiple" to allow multiple files.

Audio input

Enable voice recording with accept_audio. The recorded audio is available as a WAV file:

python
prompt = st.chat_input("Say something", accept_audio=True)

if prompt:
    if prompt.audio:
        st.audio(prompt.audio)
    if prompt.text:
        st.write(prompt.text)
Dictation with speech-to-text

Convert audio to text and inject it back into the chat input:

python
prompt = st.chat_input("Say something", accept_audio=True, key="chat")

if prompt and prompt.audio:
    # Transcribe with Whisper or another STT model
    transcript = openai.audio.transcriptions.create(
        model="whisper-1",
        file=prompt.audio,
    )
    # Set the transcribed text as the next input
    st.session_state.chat = transcript.text
    st.rerun()

User feedback

Add thumbs up/down feedback to assistant messages. Also supports "stars" and "faces" ratings:

python
with st.chat_message("assistant"):
    st.markdown(response)
    feedback = st.feedback("thumbs")
    if feedback is not None:
        st.toast(f"Feedback received: {'👍' if feedback == 1 else '👎'}")

Clear chat

Add a button to reset the conversation:

python
def clear_chat():
    st.session_state.messages = []

st.button("Clear chat", on_click=clear_chat)
  • connecting-streamlit-to-snowflake: Database queries and Cortex chat example
  • optimizing-streamlit-performance: Caching strategies for LLM calls

References

© iusztinpaul, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/developing-with-streamlit/skills/building-streamlit-chat-ui of iusztinpaul/designing-real-world-ai-agents-workshop.

Open the folder on GitHubat commit ea4f6e9

Compare with similar skills

Building Streamlit Chat UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Building Streamlit Chat UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Building Streamlit Chat UI this skilliusztinpaul/designing-real-world-ai-agents-workshop512—~1.4kAutomated safety check: PassApache-2.0
Fastllm Gatewayazrtydxb/Fastllm-proxy108—~926Automated safety check: PassApache-2.0
Gemini Video Understandingeinverne/dotfiles121—~2.6kAutomated safety check: NotesMIT
Clade Architecture Variantsjeremylongshore/tons-of-skills-marketplace2.8k—~1.6kAutomated safety check: PassMIT
Azure AI Openai Dotnetmicrosoft/skills3.1k5 repos~3.4kAutomated safety check: PassMIT
Gemini Live API Devgoogle-gemini/gemini-skills4.3k—~4.6kAutomated safety check: PassApache-2.0

Similar skills

  • Fastllm Gateway

    azrtydxb/Fastllm-proxy

    Send inference requests through the FastLLM OpenAI-compatible gateway — chat completions, completions, embeddings, rerank, score, responses, moderations, audio speech and transcription, image…

    108 GitHub stars~926 tokensUpdated 5 days ago
    AI & LLM EngineeringAuto-check passed

  • Gemini Video Understanding

    einverne/dotfiles

    Analyze videos using Google's Gemini API - describe content, answer questions, transcribe audio with visual descriptions, reference timestamps, clip videos, and process YouTube URLs.

    121 GitHub stars~2.6k tokensUpdated 1 mo ago
    AI & LLM EngineeringAuto-check: notes

  • Clade Architecture Variants

    jeremylongshore/tons-of-skills-marketplace

    Build different types of Claude-powered applications — chatbots, RAG systems, Use when working with architecture-variants patterns.

    2.8k GitHub stars~1.6k tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed

  • Azure AI Openai Dotnet

    microsoft/skills

    Official

    Azure OpenAI SDK for .NET. An agent skill from microsoft/skills.

    3.1k GitHub starsUsed in 5 repos~3.4k tokens
    AI & LLM EngineeringAuto-check passed

  • Gemini Live API Dev

    google-gemini/gemini-skills

    Official

    A skill your agent uses when building real-time, bidirectional streaming applications with the Gemini Live API, or migrating legacy Live models (2.0/2.5/3.1) to Gemini 3.8 Live.

    4.3k GitHub stars~4.6k tokensUpdated 4 days ago
    Backend & APIsAuto-check passed

  • RAG Company Knowledge Assistant

    Hermes-brasil/hermes-brasil

    Portuguese guide to building a retrieval-augmented generation assistant over a company's documents, with embeddings, section-based chunking, retrieval and a client workflow.

    154 GitHub stars~1.1k tokensUpdated 5 days ago
    AI & LLM EngineeringAuto-check passed

More from iusztinpaul/designing-real-world-ai-agents-workshop

All 23 skills in this repo

  • Building Streamlit Custom Components V2

    iusztinpaul/designing-real-world-ai-agents-workshop

    Builds bidirectional Streamlit Custom Components v2 (CCv2) using st.components.v2.component.

    512 GitHub stars~2.8k tokensUpdated 4 mo ago
    Auto-check passed

  • Building Streamlit Dashboards

    iusztinpaul/designing-real-world-ai-agents-workshop

    Building dashboards in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    512 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Building Streamlit Multipage Apps

    iusztinpaul/designing-real-world-ai-agents-workshop

    Building multi-page Streamlit apps. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    512 GitHub stars~1.6k tokensUpdated 4 mo ago
    Auto-check passed

  • Choosing Streamlit Selection Widgets

    iusztinpaul/designing-real-world-ai-agents-workshop

    Choosing the right Streamlit selection widget. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    512 GitHub stars~1.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Connecting Streamlit To Snowflake

    iusztinpaul/designing-real-world-ai-agents-workshop

    Connecting Streamlit apps to Snowflake. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    512 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

  • Creating Streamlit Themes

    iusztinpaul/designing-real-world-ai-agents-workshop

    Creating and customizing Streamlit themes. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop.

    512 GitHub stars~3.7k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Building Streamlit Chat UI

What does Building Streamlit Chat UI do?

Building chat interfaces in Streamlit. An agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Building Streamlit Chat UI is an agent skill from iusztinpaul/designing-real-world-ai-agents-workshop. Building chat interfaces in Streamlit.

When should I use Building Streamlit Chat UI?

Building Streamlit Chat UI fits situations like: creating conversational UIs; tasks that involve LLM API integration; tasks that involve Chatbots and conversational support.

How do I install Building Streamlit Chat UI in Claude Code?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill building-streamlit-chat-ui -a claude-code`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/building-streamlit-chat-ui in iusztinpaul/designing-real-world-ai-agents-workshop) into .claude/skills/building-streamlit-chat-ui in your project. Claude Code loads it when a task matches its description.

How do I install Building Streamlit Chat UI in Codex?

Run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill building-streamlit-chat-ui -a codex`. Or copy the skill folder (.agents/skills/developing-with-streamlit/skills/building-streamlit-chat-ui in iusztinpaul/designing-real-world-ai-agents-workshop) into .agents/skills/building-streamlit-chat-ui in your project. Codex loads it when a task matches its description.

Can I use Building Streamlit Chat UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill building-streamlit-chat-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/building-streamlit-chat-ui, .gemini/skills/building-streamlit-chat-ui, .github/skills/building-streamlit-chat-ui and .opencode/skills/building-streamlit-chat-ui in your project.

What does Building Streamlit Chat UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Building Streamlit Chat UI is instructions for the agent only. Our summary lists: Python 3.

Does Building Streamlit Chat UI access the network?

SKILL.md names 1 domain. As links in the text: docs.streamlit.io. This is read from the text; nothing was executed.

Is Building Streamlit Chat UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Building Streamlit Chat UI use?

Building Streamlit Chat UI is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Building Streamlit Chat UI use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Building Streamlit Chat UI?

Skills that share tags, products or a category with Building Streamlit Chat UI: Fastllm Gateway (azrtydxb/Fastllm-proxy, 108 stars), Gemini Video Understanding (einverne/dotfiles, 121 stars), Clade Architecture Variants (jeremylongshore/tons-of-skills-marketplace, 2.8k stars) and Azure AI Openai Dotnet (microsoft/skills, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Building Streamlit Chat UI?

iusztinpaul (a GitHub user) maintains it in iusztinpaul/designing-real-world-ai-agents-workshop, which has 512 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on June 3, 2026.

Source: iusztinpaul/designing-real-world-ai-agents-workshop on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.