Building a Streamlit UI for My LangGraph AI Agent
The process of creating an interactive web interface for a LangGraph-based customer service agent.
1LangGraph-Based Customer Service Agent
In this project, a LangGraph-based AI agent was developed to automate a 15-minute customer service booking session. The initial version used a Python CLI (Command Line Interface) to test the agent's functionality. However, this method was not sufficient for delivering a customer-facing booking experience.
2Interactive Interface with Streamlit
In this article, a clean and interactive Streamlit interface was built on top of the existing LangGraph agent. Streamlit serves as a wrapper for the LangGraph agent, similar to a Python CLI, but offers a more user-friendly and visually appealing interface. The UI renders structured information extracted from the graph state, such as current booking details, price quotes, and acceptance buttons.
3Architecture and Implementation
The Streamlit interface presents the LangGraph agent's state to the user and sends user actions back to the agent. This architecture allows the agent to be run from a CLI, API, or another frontend. The streamlit_app.py file begins by importing the graph builder, models, and observability utilities.
4Initial State and Session Management
The LangGraph agent expects an AgentState object to be initialized. Streamlit reruns the entire Python script whenever a user interacts with a widget, so local variables cannot be used, and session state must be preserved. The initialize_session function checks if the graph has already been created for the browser session.
5Langfuse Tracing Integration
The Langfuse tracing integration ensures that subsequent graph calls use the same tracing configuration. This integration enhances the traceability of graph calls and simplifies the debugging process. The function generates a UUID for graph calls, which LangGraph uses to identify a conversation.
6User Input and Graph Invocation
The _invoke function sends the user action to the LangGraph agent and saves the resulting state. The user action can be a chat input or a button click. The user's message is converted into a LangChain HumanMessage and added to the existing conversation. For the first message, the graph is initialized with empty booking details, scheduling options, price, and the initial status.
7LLM Calls and State Updates
When a new user action is received, the graph is invoked, and the result state is updated. This process involves LLM (Large Language Model) calls. LangGraph retains the state and dynamically updates it based on user interactions, enabling a smoother and more efficient customer service process.
8Project Significance and Potential Impact
This project demonstrates the potential of using LangGraph and Streamlit to automate customer service processes and enhance user experience. An interactive web interface allows customers to manage booking processes more easily and quickly. Such solutions can increase customer satisfaction and improve operational efficiency.
Original article: Towards Data Science — LangGraph AI Ajanı için Streamlit Arayüzü Geliştirme