用 Streamlit 10 分钟做出可分享的 Agent 对话 Web 应用（零前端）

你用 Python 把 Agent 逻辑跑通了，结果只能自己在终端里玩，想发给同事看还得让他配环境。Streamlit 的魔法在于：你只写 Python，它自动给你生成带输入框、聊天气泡、按钮的网页，还能一键托管成公网链接。做 Agent 原型 / 内部小工具，几乎没有更快的路。

📊 本教程适合：会一点 Python、不想碰前端、想快速把 Agent 变成「能给别人用的网页」的人。不需要任何 HTML/CSS/JS 基础。

先搞懂：Streamlit 是什么？

一句话：它是一个「Python 脚本 = 网页」的框架。你每调用一次 st.xxx()，它就往页面上加一个控件；脚本从上到下执行，状态由 Streamlit 帮你管。做聊天界面，核心就三个函数：st.chat_message（一条气泡）、st.chat_input（底部输入框）、st.session_state（跨轮记忆）。

它适合「内部工具 / 原型 / 演示」，不是高并发生产站点。要做成正式产品请后续迁到 React 等方案（见本中心 AG-UI 教程）。先用它把想法 10 分钟跑起来。

Step 1：安装与环境

1 装好两个包

pip install streamlit openai
# 把你的模型 API Key 放进环境变量
export OPENAI_API_KEY="sk-..."

💡 没有 OpenAI Key 也能学：把 base_url 指向本地 vLLM（见本中心 vLLM 教程）或任意 OpenAI 兼容服务即可，代码一行不用改。

Step 2：最小聊天界面

2 十行代码出聊天框

import streamlit as st
from openai import OpenAI

client = OpenAI()

if prompt := st.chat_input("说点什么…"):
    st.chat_message("user").write(prompt)
    with st.chat_message("assistant"):
        resp = client.chat.completions.create(
            model="gpt-4o-mini",
            messages=[{"role": "user", "content": prompt}],
        )
        st.write(resp.choices[0].message.content)

保存为 app.py，运行 streamlit run app.py，浏览器自动打开就能聊了。

Step 3：接上 Agent 客户端

3 指向你的 Agent 后端

把 OpenAI() 的 base_url 指向你的 Agent（本地 vLLM 或云端）：

client = OpenAI(
    base_url="http://localhost:8000/v1",  # 或云端 Agent 地址
    api_key="EMPTY",
)

🚀 这样你的网页就成了一个「Agent 前端」——后端换成任何 OpenAI 兼容的 Agent 服务都行，前端代码不变。

Step 4：加会话记忆

4 让 Agent 记住上文

用 st.session_state 存历史消息，每轮把整段对话发给模型：

if "msgs" not in st.session_state:
    st.session_state.msgs = []
for m in st.session_state.msgs:
    st.chat_message(m["role"]).write(m["content"])

if prompt := st.chat_input("…"):
    st.session_state.msgs.append({"role":"user","content":prompt})
    # ...调用模型时 messages=st.session_state.msgs...
    st.session_state.msgs.append({"role":"assistant","content":reply})

注意上下文长度。对话久了会超出模型窗口，可只保留最近 N 条，或接个记忆模块。别把无限增长的列表全塞进去。

Step 5 & 6：展示工具过程与部署

5 把「思考/工具」摊开给用户看

如果后端支持流式或 tool_calls，用 stream=True 逐字显示，并在调用工具时 st.status("正在查天气…") 给个进度提示，体验立刻专业起来。

第 6 步一键部署：把代码推到 GitHub，打开 streamlit.io/cloud 选仓库，设好 OPENAI_API_KEY 等 secret，点 Deploy——几分钟拿到公网链接，发给谁都能用。

🎉 恭喜！你从零做出第一个可分享的 Agent Web 应用。接下来想做更精致的可交互界面，可以进阶到本中心的 AG-UI / React 方案。

常见问题速查

现象	大概率原因 & 解决
页面不更新 / 状态乱	忘了用 st.session_state 存状态；每次交互脚本会重跑
报 401 / 403	API Key 没设对，或 base_url 与 key 不匹配
对话越聊越慢	历史没截断，token 累积，保留最近 N 条即可
部署后连不上模型	云端没配 secret；或本地地址 localhost 在云端不存在

📚 更多教程 📰 智能体资讯

← 返回教程中心