保留正文与补采附件。源页面当前未重新核验；具体限制见交付清单。

Revisit consent button We value your privacy We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies. Customise Reject All Accept All Customise Consent Preferences We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below. The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... Show more NecessaryAlways Active Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

Functional Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

Analytics Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

Performance Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Advertisement Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.

Uncategorised Other uncategorised cookies are those that are being analysed and have not been classified into a category as yet. No cookies to display. Reject All Save My Preferences Accept All Toggle SearchToggle Mobile Navigation Publish AI, ML & data-science insights to a global community of data professionals. Sign inSubmit an Article LatestEditor's PicksNewsletterShipAI

Write For TDS LinkedInXToggle Search Agentic AI

Building a Streamlit UI for My LangGraph AI Agent

Building a production-ready web interface for a stateful LangGraph agent Soner Yıldırım August 8, 20266 min read Photo by Towfiqu barbhuiya on Unsplash Photo by Towfiqu barbhuiya on Unsplash In my previous article, I walked through how I built a LangGraph-based AI agent to automate a 15-minute customer service booking session. The agent handles the entire booking process like a real customer service representative. It's a LangGraph-based agent that orchestrates the following operations:

In the first version of the agent, I did not focus much on the UI/UX part. I just built a Python CLI to test the functionality of the agent. The customer service agent ran entirely in the terminal. The CLI worked well for testing but it was not the best way to demonstrate a customer-facing booking experience. The full source code of this project is available on GitHub at customer-service-agent. Feel free to clone the repo and test it yourself. In this article, we will build a clean, interactive Streamlit UI on top of the existing LangGraph agent. A quick note on the terminology: Throughout this article, I use agent and graph interchangeably. In LangGraph, the agent architecture is defined and executed as a compiled state graph object so they essentially mean the same thing in this article. Learn this step by step with the interactive AI Agents roadmap.

User interface for the agent

In terms of implementation, Streamlit is not very different from a Python CLI. Both serve as a wrapper for the LangGraph agent. Streamlit is, of course, much more user friendly and looks more appealing. The CLI interface collected input, invoked the graph, and printed the response. The Streamlit page will do the same but it will also render structured information extracted from the graph state such as current booking details, price quote, and acceptance buttons. The architecture still lies in the same application. Streamlit only presents the state to the user and sends user actions back to the agent.

Streamlit page

Since we're using poetry for dependency management, we can install streamlit using: python

poetry add streamlit

This updates both pyproject.toml and poetry.lock files. Then we create a new file streamlit_app.py . We start by importing the graph builder, models, and observibility utilities. python

from __future__ import annotations

import os
from datetime import datetime
from typing import Any
from uuid import uuid4

import streamlit as st
from dotenv import load_dotenv
from langchain_core.messages import AIMessage, HumanMessage
from langchain_openai import ChatOpenAI

from customer_service_agent.graph import build_graph
from customer_service_agent.models import (
    AgentState,
    BookingDetails,
    TimeOption,
)
from customer_service_agent.observability import (
    create_langfuse_handler,
    flush_langfuse,
    graph_config,
)

The agent graph does not include any Streamlit-specific logic. This separation is important because it allows us to run the graph from a CLI, an API, WhatsApp, or another frontend later. The graph expects an Agent State to be initialized ( graph = StateGraph(AgentState) ) so we add the following in streamlit_app.py : python

INITIAL_STATE: AgentState = {
    "messages": [],
    "booking_details": BookingDetails(),
    "calculated_price": None,
    "time_options": [],
    "selected_slot": None,
    "status": "gathering_info",
}

After the first turn (i.e. first customer message), LangGraph’s checkpointer retains the state. Streamlit reruns the entire Python script whenever user interacts with a widget (e.g. sends a chat message, clicks a button, selects an appointment) so we cannot use local variables. To preserve the conversation across Streamlit runs, we need to use session_state . We can initialize the session as follows: python

def initialize_session() -> None:
    if "graph" in st.session_state:
        return

    llm = ChatOpenAI(
        model=os.getenv("OPENAI_MODEL", "gpt-4o-mini"),
        temperature=0,
    )

    handler = create_langfuse_handler()

    st.session_state.graph = build_graph(llm)
    st.session_state.handler = handler
    st.session_state.config = graph_config(
        str(uuid4()),
        handler,
    )
    st.session_state.agent_state = INITIAL_STATE.copy()
    st.session_state.started = False

The function first checks if the graph has already been created for this browser session (if "graph" in st.session_state ). Without this check, every Streamlit rerun would replace the graph. The graph_config function generates a UUID to be used as thread_id , which is required by LangGraph to identify a conversation. If a new UUID were generated on every Streamlit rerun, LangGraph would see every message as belonging to a new conversation. We also have the Langfuse tracing integration inside this function. The handler is saved so that the subsequent graph calls can use the same tracing configuration. Then, we have the _invoke function for handling user input. python

def _invoke(customer_text: str) -> None:
    """Submit one customer turn to the graph and retain its latest state."""
    graph_input: dict[str, Any] = {"messages": [HumanMessage(content=customer_text)]}
    if not st.session_state.started:
        graph_input.update(INITIAL_STATE)
        graph_input["messages"] = [HumanMessage(content=customer_text)]
        st.session_state.started = True

    try:
        result = st.session_state.graph.invoke(graph_input, config=st.session_state.config)
        st.session_state.agent_state = result
        flush_langfuse(st.session_state.handler)
    except Exception:
        st.session_state.started = bool(st.session_state.agent_state.get("messages"))
        st.error("The assistant could not process that request. Please try again.")

This function sends the customer action to the LangGraph agent and saves the resulting state for the Streamlit interface. The customer action can be a chat input or a button click (e.g. "Accept quote"). The customer’s message is converted into a LangChain HumanMessage. The messages uses LangGraph’s add_messages reducer so new messages are added to the existing conversation instead of replacing it. For the first message, we initialize the graph using the INITIAL_STATE defined earlier with empty booking details, scheduling options, price, and the initial status. Then, whenever we receive a new custom action, we invoke the graph and update its state with the result. This is where the LLM calls happen: python

result = st.session_state.graph.invoke(graph_input, config=st.session_state.config)
st.session_state.agent_state = result

This runs the customer message through the graph. The returned graph state (i.e. results ) is stored in Streamlit’s session so that the page can render the latest details of messages, booking summary, price, appointment options, and status. Finally, we have some render functions (_render...() ) defined in streamlit_app.py to convert the current LangGraph state into visible Streamlit components. python

def _render_messages(state: AgentState) -> None:
    if not state.get("messages"):
        with st.chat_message("assistant"):
            st.write(
                "Hi! I can help you book house or couch cleaning. "
                "Tell me what you need, including the size and service address."
            )
        return

    for message in state["messages"]:
        if isinstance(message, HumanMessage):
            role = "user"
        elif isinstance(message, AIMessage):
            role = "assistant"
        else:
            continue
        with st.chat_message(role):
            st.write(str(message.content))

For example, the _render_messages function displays the conversation history as Streamlit chat bubbles. It receives the conversation through the latest LangGraph state using state["messages"] . If the conversation has no messages yet, the function shows an initial greeting.

Let's see how it works

We've gone over the streamlit_app.py to learn how the page is structured. It's time to see it in action: We can test it locally using the following command: bash

poetry run streamlit run customer_service_agent/streamlit_app.py

It will open up a page at http://localhost:8501/ . The page looks like this: In order to test the agent, we need an OPENAI_API_KEY. It'll cost you a few cents to test. Here is a chat example: I did not give the address and the agent asked for it as we'd expect. Let's try the same but providing the address in the first message: Since I have the address in the first message, the agent did not ask for it. I accepted the quote and the agent gave me three options to choose and then completed the booking: There is a lot more we can do on the interface to make it more user friendly. But we now have a version that runs smoothly and with a nice and clean user interface. I'm planning to improve the agent and add more functionality such as WhatsApp integration. It may even turned out to be a product that I can sell to some local businesses. Stay tuned for what's coming and thank you for reading!

Register Now to Continue Reading

Unlock Towards Data Science with a Free Account

All articles on Towards Data Science are available to registered users. Create a free account today to access this article and thousands more. Register for freeSign in to your account

Written By

Soner Yıldırım

See all from Soner Yıldırım Agentic AiArtificial IntelligenceLanggraphPythonStreamlit Share This Article

Towards Data Science is a community publication. Submit your insights to reach our global audience and earn through the TDS Author Payment Program. Write for TDS

Related Articles

Creating a Gradient Descent Animation in Python

Programming How to plot the trajectory of a point over a complex surface Luis Medina November 11, 20230 min read

TensorFlow vs Keras: A Comparison

Artificial Intelligence Looking at the nuts and bolts of two machine learning libraries Mike Wolfe July 16, 20217 min read

Where Does an AI’s Personality Actually Come From?

Agentic AI They aren’t designed, you can’t help perceiving one anyway, and that makes them an engineering problem almost no one is solving. Slava Polonski, PhD July 9, 202615 min read

Hands-On with Agents SDK: Safeguarding Input and Output with Guardrails

Agentic AI A practical exploration of how guardrails safeguard multi-agent systems in Python using OpenAI Agents SDK, Streamlit, and Pydantic Iqbal Rahmadhan September 6, 202516 min read

Can AI Solve Failures in Your Supply Chain?

Agentic AI When your warehouse and transportation teams blame each other for late deliveries, who's right? We can ask an agent connected to the data settle the debate. Samir Saci February 18, 202614 min read

How to Apply Agentic Coding to Solve Problems

Agentic AI Learn how to efficiently solve problems with coding agents Eivind Kjosbakken January 31, 20266 min read

Why Every AI Coding Assistant Needs a Memory Layer

Agentic AI A practical guide to context engineering for AI coding assistants Chanin Nantasenamat April 11, 20269 min read

Agentic AI in Finance: Opportunities and Challenges for Indonesia

Agentic AI Exploring the business value, regulatory challenges, and human impact of Agentic AI adoption across Indonesia's finance sector. Iqbal Rahmadhan October 22, 202510 min read

Knowledge Graphs in Natural Language Processing @ ACL 2020

Artificial Intelligence This post commemorates the first anniversary of the series where we examine advancements in NLP and Graph ML powered by knowledge graphs... Michael Galkin July 10, 202018 min read

Your home for data science and AI. The world's leading publication for data science, data analytics, data engineering, machine learning, and artificial intelligence professionals. Subscribe to Our NewsletterWrite For TDS•About•Advertise•Privacy Policy•Terms of Use © Insight Media Group, LLC 2026•The New Stack•roadmap.sh•Creator Network

Recommended Articles

Close