基于 Streamlit 构建 AutoGen AI Agent Web 应用

基于 Streamlit 构建 AutoGen AI Agent Web 应用

Streamlit 是一款专为 Python 设计的 Web 开发框架，特别适用于快速构建数据科学、机器学习及大模型应用的交互界面。本文将介绍如何将 AutoGen 的 Agent 交互能力集成到 Streamlit 中，实现在浏览器端展示 AI Agent 的对话与反馈。

环境准备

确保本地已安装 Python 环境。通过 pip 安装必要的依赖：

pip install streamlit autogen openai

项目结构

创建项目目录 autogen-streamlit，并在其中添加入口文件 app.py。

侧边栏配置

在 Streamlit 中，侧边栏常用于放置全局配置。我们需要在此处设置 OpenAI 的 API Key 和模型选择。

import streamlit as st

selected_model = None
selected_key = None

with st.sidebar:
    st.header("OpenAI Configuration")
    selected_model = st.selectbox("Model", ['gpt-3.5-turbo', 'gpt-4'], index=0)
    selected_key = st.text_input("API Key", type="password")

这里定义了 selected_model 和 selected_key 变量。st.selectbox 提供下拉菜单，st.text_input 用于输入密码形式的密钥。

主聊天界面

主区域需要模拟类似 ChatGPT 的聊天窗口。Streamlit 提供了 st.chat_input 来接收用户输入。

with st.container():
    user_input = st.chat_input("Type something...")
    if user_input:
        if not selected_key or not selected_model:
            st.warning('You must provide valid OpenAI API key and choose preferred model', icon="⚠️")
            st.stop()
        
        llm_config = {
            "request_timeout": 600,
            "config_list": [
                {
                    "model": selected_model,
                    "api_key": selected_key
                }
            ]
        }

当用户提交输入后，首先校验配置是否完整。若有效，则构建 llm_config 供 AutoGen 使用。

自定义 Agent 类

AutoGen 原生 Agent 不会自动将消息渲染到 Streamlit 界面上。我们需要继承 AssistantAgent 和 UserProxyAgent，重写 _process_received_message 方法，以便将消息以 Markdown 格式显示在聊天流中。

from autogen import AssistantAgent, UserProxyAgent

class TrackableAssistantAgent(AssistantAgent):
    def _process_received_message(self, message, sender, silent):
        with st.chat_message(sender.name):
            st.markdown(message)
        return super()._process_received_message(message, sender, silent)

class TrackableUserProxyAgent(UserProxyAgent):
    def _process_received_message(self, message, sender, silent):
        with st.chat_message(sender.name):
            st.markdown(message)
        return super()._process_received_message(message, sender, silent)

这两个类在调用基类逻辑前，先利用 st.chat_message 上下文管理器将消息渲染到页面。

实例化与异步执行

Streamlit 脚本每次交互都会重新运行，因此需要小心管理状态。对于 AutoGen 的异步会话，我们需要在 Streamlit 的事件循环中处理。

import asyncio

assistant = TrackableAssistantAgent(
    name="assistant", 
    llm_config=llm_config
)

user_proxy = TrackableUserProxyAgent(
    name="user", 
    human_input_mode="NEVER", 
    llm_config=llm_config
)

loop = asyncio.new_event_loop()
asyncio.set_event_loop(loop)

async def initiate_chat():
    await user_proxy.a_initiate_chat(
        assistant,
        message=user_input,
    )

loop.run_until_complete(initiate_chat())

注意：在实际生产环境中，直接操作事件循环可能不是最佳实践，建议结合 Streamlit 的 Session State 机制来管理 Agent 状态，避免重复初始化。

状态管理与优化

由于 Streamlit 的特性，每次用户交互（如点击按钮或输入文本）都会导致整个脚本重新运行。这意味着如果不在代码中保存状态，之前的对话历史将会丢失。为了解决这个问题，可以使用 st.session_state 来持久化对话记录。

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

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("Ask me anything..."):
    st.session_state.messages.append({"role": "user", "content": prompt})
    # 此处调用 Agent 逻辑并更新 session_state

此外，考虑到 LLM 响应可能较慢，建议在 UI 中添加加载指示器，提升用户体验。

运行与测试

保存代码后，在终端运行以下命令启动应用：

streamlit run app.py

浏览器打开指定地址后，即可在侧边栏配置 API，在主界面输入问题。例如询问'生成一个包含 12 个数字的斐波那契数列并计算总和'，Agent 将自动生成代码并执行结果。

总结

通过 Streamlit，我们快速搭建了 AutoGen AI 助理的 Web 应用。这种组合让 AutoGen 的 Chat Workflow 更加可视化，便于调试和演示。自定义 Agent 类解决了消息渲染问题，而异步处理确保了长任务不会阻塞界面。未来可进一步结合 Streamlit 的 Session State 实现多轮对话记忆功能，构建更复杂的智能体工作流。