{
  "source_file": "0930",
  "source_platform": "Medium",
  "author": "Soner Yıldırım",
  "title_listed": "Building a Streamlit UI for My LangGraph AI Agent",
  "keywords": "",
  "domain": "大模型算法",
  "content_type": "深度技术解析",
  "is_paid_flag": "否",
  "url": "https://towardsdatascience.com/building-a-streamlit-ui-for-my-langgraph-ai-agent/",
  "publish_date": "2026-08-08",
  "corpus_stage": "",
  "notes": "",
  "id": "59317c1fa743",
  "collected_at": "2026-10-02T09:21:56",
  "title": "Building a Streamlit UI for My LangGraph AI Agent | Towards Data Science",
  "body_markdown": "![Revisit consent button](../images/body-df29beacd7496220cc94.svg)\nWe value your privacy\nWe 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.\nCustomise Reject All Accept All\nCustomise Consent Preferences ![](../images/body-2159bb67f3de8ad870eb.svg)\nWe use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.\nThe 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\nNecessaryAlways Active\nNecessary 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.\n  * Cookie\nBCTempID\n  * Duration\n10 minutes\n  * Description\nNo description available.\n\n\n  * Cookie\n__cf_bm\n  * Duration\n1 hour\n  * Description\nThis cookie, set by Cloudflare, is used to support Cloudflare Bot Management. \n\n\n  * Cookie\nAWSALBCORS\n  * Duration\n7 days\n  * Description\nAmazon Web Services set this cookie for load balancing.\n\n\n  * Cookie\n_cfuvid\n  * Duration\nsession\n  * Description\nCloudflare sets this cookie to track users across sessions to optimize user experience by maintaining session consistency and providing personalized services\n\n\n  * Cookie\nli_gc\n  * Duration\n6 months\n  * Description\nLinkedin set this cookie for storing visitor's consent regarding using cookies for non-essential purposes.\n\n\n  * Cookie\n__hssrc\n  * Duration\nsession\n  * Description\nThis cookie is set by Hubspot whenever it changes the session cookie. The __hssrc cookie set to 1 indicates that the user has restarted the browser, and if the cookie does not exist, it is assumed to be a new session.\n\n\n  * Cookie\n__hssc\n  * Duration\n1 hour\n  * Description\nHubSpot sets this cookie to keep track of sessions and to determine if HubSpot should increment the session number and timestamps in the __hstc cookie.\n\n\n  * Cookie\nwpEmojiSettingsSupports\n  * Duration\nsession\n  * Description\nWordPress sets this cookie when a user interacts with emojis on a WordPress site. It helps determine if the user's browser can display emojis properly.\n\n\n  * Cookie\nBCSessionID\n  * Duration\n1 year 1 month 4 days\n  * Description\nBlueconic sets this cookie as a unique identifier for the BlueConic profile.\n\n\n  * Cookie\n_octo\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nlogged_in\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\n__Secure-YEC\n  * Duration\npast\n  * Description\nYouTube sets this cookie to stores the user's video player preferences using embedded YouTube video\n\n\n  * Cookie\n__eoi\n  * Duration\n6 months\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nAWSALBTGCORS\n  * Duration\n7 days\n  * Description\nNo description available.\n\n\n  * Cookie\nlogin-status-p\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nAWSALBTG\n  * Duration\n7 days\n  * Description\nNo description available.\n\n\n  * Cookie\ncsrf_token\n  * Duration\nsession\n  * Description\nNo description available.\n\n\n  * Cookie\ntoken_v2\n  * Duration\n1 day\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nD\n  * Duration\n1 year\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nPHPSESSID\n  * Duration\nsession\n  * Description\nThis cookie is native to PHP applications. The cookie stores and identifies a user's unique session ID to manage user sessions on the website. The cookie is a session cookie and will be deleted when all the browser windows are closed.\n\n\n  * Cookie\nVISITOR_PRIVACY_METADATA\n  * Duration\n6 months\n  * Description\nYouTube sets this cookie to store the user's cookie consent state for the current domain. \n\n\n  * Cookie\ncookietest\n  * Duration\nsession\n  * Description\nThe cookietest cookie is typically used to determine whether the user's browser accepts cookies, essential for website functionality and user experience.\n\n\n  * Cookie\n__Host-airtable-session\n  * Duration\n1 year\n  * Description\nThis cookie is used to enable us to integrate the services of Airtable.\n\n\n  * Cookie\n__Host-airtable-session.sig\n  * Duration\n1 year\n  * Description\nThis cookie is used to enable us to integrate the services of Airtable.\n\n\n  * Cookie\nm\n  * Duration\n1 year 1 month 4 days\n  * Description\nStripe sets this cookie for fraud prevention purposes. It identifies the device used to access the website, allowing the website to be formatted accordingly.\n\n\n  * Cookie\nBIGipServer*\n  * Duration\nsession\n  * Description\nMarketo sets this cookie to collect information about the user's online activity and build a profile about their interests to provide advertisements relevant to the user. \n\n\n  * Cookie\n__cfruid\n  * Duration\nsession\n  * Description\nCloudflare sets this cookie to identify trusted web traffic.\n\n\n  * Cookie\n_GRECAPTCHA\n  * Duration\n6 months\n  * Description\nGoogle Recaptcha service sets this cookie to identify bots to protect the website against malicious spam attacks.\n\n\n  * Cookie\n__Secure-YNID\n  * Duration\n6 months\n  * Description\nGoogle cookie used to protect user security and prevent fraud, especially during the login process.\n\n\n  * Cookie\ncookieyes-consent\n  * Duration\n1 year\n  * Description\nCookieYes sets this cookie to remember users' consent preferences so that their preferences are respected on subsequent visits to this site. It does not collect or store any personal information about the site visitors.\n\n\nFunctional\nFunctional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.\n  * Cookie\nlidc\n  * Duration\n1 day\n  * Description\nLinkedIn sets the lidc cookie to facilitate data center selection.\n\n\n  * Cookie\nbrw\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nbrwConsent\n  * Duration\n5 minutes\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nWMF-Uniq\n  * Duration\n1 year\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nloom_anon_comment\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nloom_referral_video\n  * Duration\nsession\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nVISITOR_INFO1_LIVE\n  * Duration\n6 months\n  * Description\nA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.\n\n\n  * Cookie\nyt-remote-connected-devices\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to store the user's video preferences using embedded YouTube videos.\n\n\n  * Cookie\nytidb::LAST_RESULT_ENTRY_KEY\n  * Duration\nNever Expires\n  * Description\nThe cookie ytidb::LAST_RESULT_ENTRY_KEY is used by YouTube to store the last search result entry that was clicked by the user. This information is used to improve the user experience by providing more relevant search results in the future.\n\n\n  * Cookie\nyt-remote-device-id\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to store the user's video preferences using embedded YouTube videos.\n\n\n  * Cookie\nyt-remote-session-name\n  * Duration\nsession\n  * Description\nThe yt-remote-session-name cookie is used by YouTube to store the user's video player preferences using embedded YouTube video.\n\n\n  * Cookie\nyt-remote-fast-check-period\n  * Duration\nsession\n  * Description\nThe yt-remote-fast-check-period cookie is used by YouTube to store the user's video player preferences for embedded YouTube videos.\n\n\n  * Cookie\nyt-remote-session-app\n  * Duration\nsession\n  * Description\nThe yt-remote-session-app cookie is used by YouTube to store user preferences and information about the interface of the embedded YouTube video player.\n\n\n  * Cookie\nyt-remote-cast-available\n  * Duration\nsession\n  * Description\nThe yt-remote-cast-available cookie is used to store the user's preferences regarding whether casting is available on their YouTube video player.\n\n\n  * Cookie\nyt-remote-cast-installed\n  * Duration\nsession\n  * Description\nThe yt-remote-cast-installed cookie is used to store the user's video player preferences using embedded YouTube video.\n\n\n  * Cookie\ncp_session\n  * Duration\n3 months\n  * Description\nCodepen sets this cookie for Help systems found in the website.\n\n\n  * Cookie\nloid\n  * Duration\n1 year 1 month 4 days\n  * Description\nThis cookie is set by the Reddit. The cookie enables the sharing of content from the website onto the social media platform.\n\n\nAnalytics\nAnalytical 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.\n  * Cookie\n__hstc\n  * Duration\n6 months\n  * Description\nHubspot set this main cookie for tracking visitors. It contains the domain, initial timestamp (first visit), last timestamp (last visit), current timestamp (this visit), and session number (increments for each subsequent session).\n\n\n  * Cookie\nhubspotutk\n  * Duration\n6 months\n  * Description\nHubSpot sets this cookie to keep track of the visitors to the website. This cookie is passed to HubSpot on form submission and used when deduplicating contacts.\n\n\n  * Cookie\n_ga\n  * Duration\n1 year 1 month 4 days\n  * Description\nGoogle Analytics sets this cookie to calculate visitor, session and campaign data and track site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognise unique visitors.\n\n\n  * Cookie\n_ga_*\n  * Duration\n1 year 1 month 4 days\n  * Description\nGoogle Analytics sets this cookie to store and count page views.\n\n\n  * Cookie\n__Host-psifi.analyticsTrace\n  * Duration\n6 hours\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\n__Host-psifi.analyticsTraceV2\n  * Duration\n6 hours\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\n_gh_sess\n  * Duration\nsession\n  * Description\nGitHub sets this cookie for temporary application and framework state between pages like what step the user is on in a multiple step form.\n\n\n  * Cookie\nYSC\n  * Duration\nsession\n  * Description\nYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.\n\n\n  * Cookie\najs_anonymous_id\n  * Duration\n1 year\n  * Description\nThis cookie is set by Segment to count the number of people who visit a certain site by tracking if they have visited before.\n\n\n  * Cookie\nvuid\n  * Duration\n1 year 1 month 4 days\n  * Description\nVimeo installs this cookie to collect tracking information by setting a unique ID to embed videos on the website. \n\n\nPerformance\nPerformance 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.\n  * Cookie\nAWSALB\n  * Duration\n7 days\n  * Description\nAWSALB is an application load balancer cookie set by Amazon Web Services to map the session to the target.\n\n\n  * Cookie\nacq\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nacq.sig\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nptc\n  * Duration\n2 years\n  * Description\nNo description available.\n\n\nAdvertisement\nAdvertisement 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.\n  * Cookie\nmuc_ads\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to collect user behaviour and interaction data to optimize the website.\n\n\n  * Cookie\nguest_id_marketing\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor.\n\n\n  * Cookie\nguest_id_ads\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor.\n\n\n  * Cookie\npersonalization_id\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to integrate and share features for social media and also store information about how the user uses the website, for tracking and targeting.\n\n\n  * Cookie\nguest_id\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor. It registers if a user is signed in to the Twitter platform and collects information about ad preferences.\n\n\n  * Cookie\nbcookie\n  * Duration\n1 year\n  * Description\nLinkedIn sets this cookie from LinkedIn share buttons and ad tags to recognize browser IDs.\n\n\n  * Cookie\n__Secure-ROLLOUT_TOKEN\n  * Duration\n6 months\n  * Description\nYouTube sets this cookie to manage feature rollout and experimentation. It helps Google control which new features or interface changes are shown to users as part of testing and staged rollouts, ensuring consistent experience for a given user during an experiment.\n\n\n  * Cookie\nyt.innertube::nextId\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to register a unique ID to store data on what videos from YouTube the user has seen.\n\n\n  * Cookie\nyt.innertube::requests\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to register a unique ID to store data on what videos from YouTube the user has seen.\n\n\n  * Cookie\nsession_tracker\n  * Duration\nsession\n  * Description\nThis cookie is set by the Reddit. This cookie is used to identify trusted web traffic. It also helps in adverstising on the website.\n\n\n  * Cookie\nedgebucket\n  * Duration\nsession\n  * Description\nReddit sets this cookie to save the information about a log-on Reddit user, for the purpose of advertisement recommendations and updating the content.\n\n\n  * Cookie\ndid\n  * Duration\n1 year\n  * Description\nArbor sets this cookie to show targeted ads to site visitors.This cookie expires after 2 months or 1 year.\n\n\nUncategorised\nOther uncategorised cookies are those that are being analysed and have not been classified into a category as yet.\nNo cookies to display.\nReject All Save My Preferences Accept All\nToggle Search[](https://towardsdatascience.com/)Toggle Mobile Navigation\n[](https://towardsdatascience.com/)\nPublish AI, ML & data-science insights to a global community of data professionals.\nSign in[Submit an Article](https://write.insightmediagroup.io)\n[Latest](https://towardsdatascience.com/latest/)[Editor's Picks](https://towardsdatascience.com/tag/editors-pick/)[Newsletter](https://towardsdatascience.com/tag/the-variable/)[ShipAI](https://towardsdatascience.com/shipai/)\n* * *\n[Write For TDS](https://towardsdatascience.com/submissions/)\n[LinkedIn](https://www.linkedin.com/company/towards-data-science/)[X](https://x.com/TDataScience)Toggle Search\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\n# Building a Streamlit UI for My LangGraph AI Agent\nBuilding a production-ready web interface for a stateful LangGraph agent\n[Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\nAugust 8, 20266 min read\n![Photo by Towfiqu barbhuiya on Unsplash](../images/000.jpg)\n[Photo](https://unsplash.com/photos/person-in-blue-long-sleeve-shirt-sitting-beside-black-laptop-computer--9gPKrsbGmc) by Towfiqu barbhuiya on Unsplash\nIn my [previous article](https://towardsdatascience.com/i-replaced-a-15-minute-booking-process-with-a-langgraph-ai-agent/), I walked through how I built a LangGraph-based AI agent to automate a 15-minute customer service booking session.\nThe agent handles the entire booking process like a real customer service representative. It's a LangGraph-based agent that orchestrates the following operations:\n  * Responds to customer queries and understands their needs.\n  * Calculates the price for the service and informs the customer.\n  * Handles the customer’s acceptance or rejection.\n  * Proposes optimized time slots.\n  * Confirms and records the appointment.\n\n\nIn 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.\nThe 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.\nThe full source code of this project is available on GitHub at [customer-service-agent](https://github.com/SonerYldrm/customer-service-agent). Feel free to clone the repo and test it yourself.\nIn this article, we will build a clean, interactive Streamlit UI on top of the existing LangGraph agent.\nA 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.\nLearn this step by step with the interactive [AI Agents](https://roadmap.sh/ai-agents) roadmap.\n## User interface for the agent\nIn 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.\nThe 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.\nThe architecture still lies in the same application. Streamlit only presents the state to the user and sends user actions back to the agent.\n## Streamlit page\nSince we're using poetry for dependency management, we can install streamlit using:\npython\n\n```\npoetry add streamlit\n```\n\nThis updates both `pyproject.toml` and `poetry.lock` files. Then we create a new file `streamlit_app.py` .\nWe start by importing the graph builder, models, and observibility utilities.\npython\n\n```\nfrom __future__ import annotations\n\nimport os\nfrom datetime import datetime\nfrom typing import Any\nfrom uuid import uuid4\n\nimport streamlit as st\nfrom dotenv import load_dotenv\nfrom langchain_core.messages import AIMessage, HumanMessage\nfrom langchain_openai import ChatOpenAI\n\nfrom customer_service_agent.graph import build_graph\nfrom customer_service_agent.models import (\n    AgentState,\n    BookingDetails,\n    TimeOption,\n)\nfrom customer_service_agent.observability import (\n    create_langfuse_handler,\n    flush_langfuse,\n    graph_config,\n)\n```\n\nThe 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.\nThe graph expects an Agent State to be initialized ( `graph = StateGraph(AgentState)` ) so we add the following in `streamlit_app.py` :\npython\n\n```\nINITIAL_STATE: AgentState = {\n    \"messages\": [],\n    \"booking_details\": BookingDetails(),\n    \"calculated_price\": None,\n    \"time_options\": [],\n    \"selected_slot\": None,\n    \"status\": \"gathering_info\",\n}\n```\n\nAfter the first turn (i.e. first customer message), LangGraph’s checkpointer retains the state. \nStreamlit 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` .\nWe can initialize the session as follows:\npython\n\n```\ndef initialize_session() -> None:\n    if \"graph\" in st.session_state:\n        return\n\n    llm = ChatOpenAI(\n        model=os.getenv(\"OPENAI_MODEL\", \"gpt-4o-mini\"),\n        temperature=0,\n    )\n\n    handler = create_langfuse_handler()\n\n    st.session_state.graph = build_graph(llm)\n    st.session_state.handler = handler\n    st.session_state.config = graph_config(\n        str(uuid4()),\n        handler,\n    )\n    st.session_state.agent_state = INITIAL_STATE.copy()\n    st.session_state.started = False\n```\n\nThe 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.\nThe `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.\nWe 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.\nThen, we have the `_invoke` function for handling user input.\npython\n\n```\ndef _invoke(customer_text: str) -> None:\n    \"\"\"Submit one customer turn to the graph and retain its latest state.\"\"\"\n    graph_input: dict[str, Any] = {\"messages\": [HumanMessage(content=customer_text)]}\n    if not st.session_state.started:\n        graph_input.update(INITIAL_STATE)\n        graph_input[\"messages\"] = [HumanMessage(content=customer_text)]\n        st.session_state.started = True\n\n    try:\n        result = st.session_state.graph.invoke(graph_input, config=st.session_state.config)\n        st.session_state.agent_state = result\n        flush_langfuse(st.session_state.handler)\n    except Exception:\n        st.session_state.started = bool(st.session_state.agent_state.get(\"messages\"))\n        st.error(\"The assistant could not process that request. Please try again.\")\n```\n\nThis 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\").\nThe 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.\nFor the first message, we initialize the graph using the `INITIAL_STATE` defined earlier with empty booking details, scheduling options, price, and the initial status.\nThen, 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:\npython\n\n```\nresult = st.session_state.graph.invoke(graph_input, config=st.session_state.config)\nst.session_state.agent_state = result\n```\n\nThis 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.\nFinally, we have some render functions (`_render...()` ) defined in `streamlit_app.py` to convert the current LangGraph state into visible Streamlit components.\npython\n\n```\ndef _render_messages(state: AgentState) -> None:\n    if not state.get(\"messages\"):\n        with st.chat_message(\"assistant\"):\n            st.write(\n                \"Hi! I can help you book house or couch cleaning. \"\n                \"Tell me what you need, including the size and service address.\"\n            )\n        return\n\n    for message in state[\"messages\"]:\n        if isinstance(message, HumanMessage):\n            role = \"user\"\n        elif isinstance(message, AIMessage):\n            role = \"assistant\"\n        else:\n            continue\n        with st.chat_message(role):\n            st.write(str(message.content))\n```\n\nFor 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.\n## Let's see how it works\nWe've gone over the `streamlit_app.py` to learn how the page is structured. It's time to see it in action:\nWe can test it locally using the following command:\nbash\n\n```\npoetry run streamlit run customer_service_agent/streamlit_app.py\n```\n\nIt will open up a page at [`http://localhost:8501/`](http://localhost:8501/) . The page looks like this:\n![](../images/001.png)\nIn order to test the agent, we need an OPENAI_API_KEY. It'll cost you a few cents to test.\nHere is a chat example:\n![](../images/body-3e99816ce91c5e93a770.png)\nI 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:\n![](../images/body-fb23d34f0c41c29b27d3.png)\nSince 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:\n![](../images/body-f2319a7145eabdd5d697.png)\nThere 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.\nI'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.\nStay tuned for what's coming and thank you for reading!\n## Register Now to Continue Reading\n### Unlock Towards Data Science with a Free Account\nAll articles on Towards Data Science are available to registered users. Create a free account today to access this article and thousands more.\nRegister for freeSign in to your account\n* * *\n![](../images/body-11c1a04e02d8a14729da.png)\nWritten By\n## [Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\n[See all from Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\n[Agentic Ai](https://towardsdatascience.com/tag/agentic-ai/)[Artificial Intelligence](https://towardsdatascience.com/tag/artificial-intelligence/)[Langgraph](https://towardsdatascience.com/tag/langgraph/)[Python](https://towardsdatascience.com/tag/python/)[Streamlit](https://towardsdatascience.com/tag/streamlit/)\nShare This Article\n  * [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&title=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n  * [](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&title=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n  * [](https://x.com/share?url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&text=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n\n\nTowards Data Science is a community publication. Submit your insights to reach our global audience and earn through the TDS Author Payment Program.\n[Write for TDS](https://towardsdatascience.com/submissions/)\n## Related Articles\n  * [![](../images/002.jpg)](https://towardsdatascience.com/creating-a-gradient-descent-animation-in-python-3c4dcd20ca51/)\n## [Creating a Gradient Descent Animation in Python](https://towardsdatascience.com/creating-a-gradient-descent-animation-in-python-3c4dcd20ca51/)\n[Programming](https://towardsdatascience.com/category/programming/)\nHow to plot the trajectory of a point over a complex surface\n[Luis Medina](https://towardsdatascience.com/author/luisdamed/)\nNovember 11, 20230 min read\n  * [![](../images/003.jpg)](https://towardsdatascience.com/tensorflow-vs-keras-d51f2d68fdfc/)\n## [TensorFlow vs Keras: A Comparison](https://towardsdatascience.com/tensorflow-vs-keras-d51f2d68fdfc/)\n[Artificial Intelligence](https://towardsdatascience.com/category/artificial-intelligence/)\nLooking at the nuts and bolts of two machine learning libraries\n[Mike Wolfe](https://towardsdatascience.com/author/miketechgame/)\nJuly 16, 20217 min read\n  * [![](../images/004.jpg)](https://towardsdatascience.com/where-does-an-ais-personality-actually-come-from/)\n## [Where Does an AI’s Personality Actually Come From?](https://towardsdatascience.com/where-does-an-ais-personality-actually-come-from/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nThey aren’t designed, you can’t help perceiving one anyway, and that makes them an engineering problem almost no one is solving.\n[Slava Polonski, PhD](https://towardsdatascience.com/author/slavaxyz/)\nJuly 9, 202615 min read\n  * [![](../images/005.jpg)](https://towardsdatascience.com/hands-on-with-agents-sdk-safeguarding-input-and-output-with-guardrails/)\n## [Hands-On with Agents SDK: Safeguarding Input and Output with Guardrails](https://towardsdatascience.com/hands-on-with-agents-sdk-safeguarding-input-and-output-with-guardrails/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nA practical exploration of how guardrails safeguard multi-agent systems in Python using OpenAI Agents SDK, Streamlit, and Pydantic\n[Iqbal Rahmadhan](https://towardsdatascience.com/author/miqbalrp/)\nSeptember 6, 202516 min read\n  * [![](../images/006.jpg)](https://towardsdatascience.com/can-ai-solve-failures-in-your-supply-chain/)\n## [Can AI Solve Failures in Your Supply Chain?](https://towardsdatascience.com/can-ai-solve-failures-in-your-supply-chain/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nWhen 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.\n[Samir Saci](https://towardsdatascience.com/author/s-saci95/)\nFebruary 18, 202614 min read\n  * [![](../images/007.jpg)](https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/)\n## [How to Apply Agentic Coding to Solve Problems](https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nLearn how to efficiently solve problems with coding agents\n[Eivind Kjosbakken](https://towardsdatascience.com/author/oieivind/)\nJanuary 31, 20266 min read\n  * [![](../images/008.png)](https://towardsdatascience.com/why-every-ai-coding-assistant-needs-a-memory-layer/)\n## [Why Every AI Coding Assistant Needs a Memory Layer](https://towardsdatascience.com/why-every-ai-coding-assistant-needs-a-memory-layer/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nA practical guide to context engineering for AI coding assistants\n[Chanin Nantasenamat](https://towardsdatascience.com/author/data-professor/)\nApril 11, 20269 min read\n  * [![](../images/009.jpg)](https://towardsdatascience.com/agentic-ai-in-finance-opportunities-and-challenges-for-indonesia/)\n## [Agentic AI in Finance: Opportunities and Challenges for Indonesia](https://towardsdatascience.com/agentic-ai-in-finance-opportunities-and-challenges-for-indonesia/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nExploring the business value, regulatory challenges, and human impact of Agentic AI adoption across Indonesia's finance sector.\n[Iqbal Rahmadhan](https://towardsdatascience.com/author/miqbalrp/)\nOctober 22, 202510 min read\n  * [![](../images/010.jpeg)](https://towardsdatascience.com/knowledge-graphs-in-natural-language-processing-acl-2020-ebb1f0a6e0b1/)\n## [Knowledge Graphs in Natural Language Processing @ ACL 2020](https://towardsdatascience.com/knowledge-graphs-in-natural-language-processing-acl-2020-ebb1f0a6e0b1/)\n[Artificial Intelligence](https://towardsdatascience.com/category/artificial-intelligence/)\nThis post commemorates the first anniversary of the series where we examine advancements in NLP and Graph ML powered by knowledge graphs...\n[Michael Galkin](https://towardsdatascience.com/author/mgalkin/)\nJuly 10, 202018 min read\n\n\n  * [YouTube](https://www.youtube.com/c/TowardsDataScience)\n  * [X](https://x.com/TDataScience)\n  * [LinkedIn](https://www.linkedin.com/company/towards-data-science/)\n  * [Threads](https://www.threads.net/@towardsdatascience)\n  * [Bluesky](https://bsky.app/profile/towardsdatascience.com)\n\n\n[](https://towardsdatascience.com/)\nYour home for data science and AI. The world's leading publication for data science, data analytics, data engineering, machine learning, and artificial intelligence professionals.\nSubscribe to Our Newsletter[Write For TDS](https://towardsdatascience.com/submissions/)•[About](https://towardsdatascience.com/about-towards-data-science-d691af11cc2f/)•[Advertise](https://contact.towardsdatascience.com/advertise-with-towards-data-science)•[Privacy Policy](https://towardsdatascience.com/privacy-policy/)•[Terms of Use](https://towardsdatascience.com/website-terms-of-use/)\n© Insight Media Group, LLC 2026•[The New Stack](https://thenewstack.io)•[roadmap.sh](https://roadmap.sh)•[Creator Network](https://insightmediagroup.io/creator-network)\n####  Recommended Articles \nClose\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607639/image?etag=1781250125848&width=500&height=500) Javascript Fatigue: HTMX Is All You Need to Build ChatGPT — Part 1 ](https://towardsdatascience.com/javascript-fatigue-you-dont-need-js-to-build-chatgpt/ \"Javascript Fatigue: HTMX Is All You Need to Build ChatGPT — Part 1\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607930/image?etag=1782124566054&width=500&height=500) The Subset Sum Problem Solved in Linear Time for Dense Enough Inputs ](https://towardsdatascience.com/subset-sum-problem-solved-in-linear-time-for-dense-enough-inputs/ \"The Subset Sum Problem Solved in Linear Time for Dense Enough Inputs\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/3660/image?etag=1780176246070&width=500&height=500) Does Your Company Have a Data Strategy? ](https://towardsdatascience.com/does-your-company-have-a-data-strategy-e8944dbec4ae/ \"Does Your Company Have a Data Strategy?\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/4970/image?etag=1780565225463&width=500&height=500) Productivity Tips, Data Career Insights, and Other Recent Must-Reads ](https://towardsdatascience.com/productivity-tips-data-career-insights-and-other-recent-must-reads-5c47eb7a2fe0/ \"Productivity Tips, Data Career Insights, and Other Recent Must-Reads\")\n\n\n",
  "metadata": {
    "title": "Building a Streamlit UI for My LangGraph AI Agent | Towards Data Science",
    "description": "Building a production-ready web interface for a stateful LangGraph agent",
    "keywords": null,
    "author": "Soner Yıldırım",
    "og:locale": "en_US",
    "og:type": "article",
    "og:title": "Building a Streamlit UI for My LangGraph AI Agent",
    "og:description": "Building a production-ready web interface for a stateful LangGraph agent",
    "og:url": "https://towardsdatascience.com/building-a-streamlit-ui-for-my-langgraph-ai-agent/",
    "og:site_name": "Towards Data Science",
    "og:image": "https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/towfiqu-barbhuiya-9gPKrsbGmc-unsplash-scaled-1.jpg",
    "og:image:width": "2560",
    "og:image:height": "1707",
    "og:image:type": "image/jpeg",
    "twitter:card": "summary_large_image",
    "twitter:site": "@TDataScience",
    "twitter:creator": "@TDataScience",
    "twitter:label1": "Written by",
    "twitter:data1": "Soner Yıldırım",
    "twitter:label2": "Est. reading time",
    "twitter:data2": "6 min read",
    "article:published_time": "2026-08-08T07:00:03.000Z",
    "article:modified_time": "2026-08-08T07:00:03.000Z",
    "article:author": "https://towardsdatascience.com/author/sonery/"
  },
  "paywall": {
    "listed_paid": false,
    "detected": false,
    "marker": "",
    "public_only": false,
    "policy": "付费/会员内容只保留页面公开可见部分，不绕过付费墙"
  },
  "crawl": {
    "success": true,
    "status_code": 200,
    "error": ""
  },
  "code_blocks": [
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_000.txt",
      "chars": 21
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_001.txt",
      "chars": 549
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_002.txt",
      "chars": 206
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_003.txt",
      "chars": 502
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_004.txt",
      "chars": 784
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_005.txt",
      "chars": 122
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_006.txt",
      "chars": 627
    },
    {
      "language": "txt",
      "file": "attachments/59317c1fa743/code/block_007.txt",
      "chars": 65
    }
  ],
  "images": [
    {
      "status": "http_404",
      "url": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607639/image?etag=1781250125848&width=500&height=500",
      "src": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607639/image?etag=1781250125848&width=500&height=500",
      "alt": "",
      "downloaded": false,
      "discovery": "saved_markdown",
      "retried_at": "2026-10-20T17:52:04Z"
    },
    {
      "status": "http_404",
      "url": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607930/image?etag=1782124566054&width=500&height=500",
      "src": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607930/image?etag=1782124566054&width=500&height=500",
      "alt": "",
      "downloaded": false,
      "discovery": "saved_markdown",
      "retried_at": "2026-10-20T17:52:04Z"
    },
    {
      "status": "http_404",
      "url": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/3660/image?etag=1780176246070&width=500&height=500",
      "src": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/3660/image?etag=1780176246070&width=500&height=500",
      "alt": "",
      "downloaded": false,
      "discovery": "saved_markdown",
      "retried_at": "2026-10-20T17:52:04Z"
    },
    {
      "status": "http_404",
      "url": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/4970/image?etag=1780565225463&width=500&height=500",
      "src": "https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/4970/image?etag=1780565225463&width=500&height=500",
      "alt": "",
      "downloaded": false,
      "discovery": "saved_markdown",
      "retried_at": "2026-10-20T17:52:04Z"
    }
  ],
  "audio": [],
  "videos": [
    {
      "url": "https://www.youtube.com/c/TowardsDataScience",
      "kind": "channel_reference",
      "status": "reference_only"
    }
  ],
  "links": [
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/latest/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/editors-pick/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/the-variable/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/shipai/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/submissions/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/author/sonery/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/i-replaced-a-15-minute-booking-process-with-a-langgraph-ai-agent/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/agentic-ai/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/artificial-intelligence/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/langgraph/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/python/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tag/streamlit/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/creating-a-gradient-descent-animation-in-python-3c4dcd20ca51/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/category/programming/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/author/luisdamed/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/tensorflow-vs-keras-d51f2d68fdfc/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/category/artificial-intelligence/"
    },
    {
      "type": "internal",
      "href": "https://towardsdatascience.com/author/miketechgame/"
    },
    {
      "type": "external",
      "href": "https://write.insightmediagroup.io"
    },
    {
      "type": "external",
      "href": "https://www.linkedin.com/company/towards-data-science/"
    },
    {
      "type": "external",
      "href": "https://x.com/TDataScience"
    },
    {
      "type": "external",
      "href": "https://unsplash.com/photos/person-in-blue-long-sleeve-shirt-sitting-beside-black-laptop-computer--9gPKrsbGmc"
    },
    {
      "type": "external",
      "href": "https://github.com/SonerYldrm/customer-service-agent"
    },
    {
      "type": "external",
      "href": "https://roadmap.sh/ai-agents"
    },
    {
      "type": "external",
      "href": "http://localhost:8501/"
    },
    {
      "type": "external",
      "href": "https://www.facebook.com/sharer/sharer.php?title=Building+a+Streamlit+UI+for+My+LangGraph+AI+Agent&u=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F"
    },
    {
      "type": "external",
      "href": "https://www.linkedin.com/shareArticle?mini=true&title=Building+a+Streamlit+UI+for+My+LangGraph+AI+Agent&url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F"
    },
    {
      "type": "external",
      "href": "https://x.com/share?text=Building+a+Streamlit+UI+for+My+LangGraph+AI+Agent&url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F"
    },
    {
      "type": "external",
      "href": "https://www.youtube.com/c/TowardsDataScience"
    },
    {
      "type": "external",
      "href": "https://www.threads.net/@towardsdatascience"
    },
    {
      "type": "external",
      "href": "https://bsky.app/profile/towardsdatascience.com"
    },
    {
      "type": "external",
      "href": "https://thenewstack.io"
    },
    {
      "type": "external",
      "href": "https://roadmap.sh"
    },
    {
      "type": "external",
      "href": "https://insightmediagroup.io/creator-network"
    }
  ],
  "repair_version": 2,
  "repaired_at": "2026-10-20T17:27:46Z",
  "source_url": "https://towardsdatascience.com/building-a-streamlit-ui-for-my-langgraph-ai-agent/",
  "delivery_status": "unverified",
  "discovery_status": "http_403",
  "missing_reason": "源页面未重新核验:http_403；已按保留正文补采图片",
  "repair_error": "",
  "actual_video_files": [],
  "expected_saved_body_images": 4,
  "image_discovery": "saved_markdown",
  "source_body_markdown": "![Revisit consent button](https://cdn-cookieyes.com/assets/images/revisit.svg)\nWe value your privacy\nWe 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.\nCustomise Reject All Accept All\nCustomise Consent Preferences ![](https://cdn-cookieyes.com/assets/images/close.svg)\nWe use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.\nThe 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\nNecessaryAlways Active\nNecessary 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.\n  * Cookie\nBCTempID\n  * Duration\n10 minutes\n  * Description\nNo description available.\n\n\n  * Cookie\n__cf_bm\n  * Duration\n1 hour\n  * Description\nThis cookie, set by Cloudflare, is used to support Cloudflare Bot Management. \n\n\n  * Cookie\nAWSALBCORS\n  * Duration\n7 days\n  * Description\nAmazon Web Services set this cookie for load balancing.\n\n\n  * Cookie\n_cfuvid\n  * Duration\nsession\n  * Description\nCloudflare sets this cookie to track users across sessions to optimize user experience by maintaining session consistency and providing personalized services\n\n\n  * Cookie\nli_gc\n  * Duration\n6 months\n  * Description\nLinkedin set this cookie for storing visitor's consent regarding using cookies for non-essential purposes.\n\n\n  * Cookie\n__hssrc\n  * Duration\nsession\n  * Description\nThis cookie is set by Hubspot whenever it changes the session cookie. The __hssrc cookie set to 1 indicates that the user has restarted the browser, and if the cookie does not exist, it is assumed to be a new session.\n\n\n  * Cookie\n__hssc\n  * Duration\n1 hour\n  * Description\nHubSpot sets this cookie to keep track of sessions and to determine if HubSpot should increment the session number and timestamps in the __hstc cookie.\n\n\n  * Cookie\nwpEmojiSettingsSupports\n  * Duration\nsession\n  * Description\nWordPress sets this cookie when a user interacts with emojis on a WordPress site. It helps determine if the user's browser can display emojis properly.\n\n\n  * Cookie\nBCSessionID\n  * Duration\n1 year 1 month 4 days\n  * Description\nBlueconic sets this cookie as a unique identifier for the BlueConic profile.\n\n\n  * Cookie\n_octo\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nlogged_in\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\n__Secure-YEC\n  * Duration\npast\n  * Description\nYouTube sets this cookie to stores the user's video player preferences using embedded YouTube video\n\n\n  * Cookie\n__eoi\n  * Duration\n6 months\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nAWSALBTGCORS\n  * Duration\n7 days\n  * Description\nNo description available.\n\n\n  * Cookie\nlogin-status-p\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nAWSALBTG\n  * Duration\n7 days\n  * Description\nNo description available.\n\n\n  * Cookie\ncsrf_token\n  * Duration\nsession\n  * Description\nNo description available.\n\n\n  * Cookie\ntoken_v2\n  * Duration\n1 day\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nD\n  * Duration\n1 year\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nPHPSESSID\n  * Duration\nsession\n  * Description\nThis cookie is native to PHP applications. The cookie stores and identifies a user's unique session ID to manage user sessions on the website. The cookie is a session cookie and will be deleted when all the browser windows are closed.\n\n\n  * Cookie\nVISITOR_PRIVACY_METADATA\n  * Duration\n6 months\n  * Description\nYouTube sets this cookie to store the user's cookie consent state for the current domain. \n\n\n  * Cookie\ncookietest\n  * Duration\nsession\n  * Description\nThe cookietest cookie is typically used to determine whether the user's browser accepts cookies, essential for website functionality and user experience.\n\n\n  * Cookie\n__Host-airtable-session\n  * Duration\n1 year\n  * Description\nThis cookie is used to enable us to integrate the services of Airtable.\n\n\n  * Cookie\n__Host-airtable-session.sig\n  * Duration\n1 year\n  * Description\nThis cookie is used to enable us to integrate the services of Airtable.\n\n\n  * Cookie\nm\n  * Duration\n1 year 1 month 4 days\n  * Description\nStripe sets this cookie for fraud prevention purposes. It identifies the device used to access the website, allowing the website to be formatted accordingly.\n\n\n  * Cookie\nBIGipServer*\n  * Duration\nsession\n  * Description\nMarketo sets this cookie to collect information about the user's online activity and build a profile about their interests to provide advertisements relevant to the user. \n\n\n  * Cookie\n__cfruid\n  * Duration\nsession\n  * Description\nCloudflare sets this cookie to identify trusted web traffic.\n\n\n  * Cookie\n_GRECAPTCHA\n  * Duration\n6 months\n  * Description\nGoogle Recaptcha service sets this cookie to identify bots to protect the website against malicious spam attacks.\n\n\n  * Cookie\n__Secure-YNID\n  * Duration\n6 months\n  * Description\nGoogle cookie used to protect user security and prevent fraud, especially during the login process.\n\n\n  * Cookie\ncookieyes-consent\n  * Duration\n1 year\n  * Description\nCookieYes sets this cookie to remember users' consent preferences so that their preferences are respected on subsequent visits to this site. It does not collect or store any personal information about the site visitors.\n\n\nFunctional\nFunctional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.\n  * Cookie\nlidc\n  * Duration\n1 day\n  * Description\nLinkedIn sets the lidc cookie to facilitate data center selection.\n\n\n  * Cookie\nbrw\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nbrwConsent\n  * Duration\n5 minutes\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nWMF-Uniq\n  * Duration\n1 year\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nloom_anon_comment\n  * Duration\n1 year\n  * Description\nNo description available.\n\n\n  * Cookie\nloom_referral_video\n  * Duration\nsession\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nVISITOR_INFO1_LIVE\n  * Duration\n6 months\n  * Description\nA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.\n\n\n  * Cookie\nyt-remote-connected-devices\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to store the user's video preferences using embedded YouTube videos.\n\n\n  * Cookie\nytidb::LAST_RESULT_ENTRY_KEY\n  * Duration\nNever Expires\n  * Description\nThe cookie ytidb::LAST_RESULT_ENTRY_KEY is used by YouTube to store the last search result entry that was clicked by the user. This information is used to improve the user experience by providing more relevant search results in the future.\n\n\n  * Cookie\nyt-remote-device-id\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to store the user's video preferences using embedded YouTube videos.\n\n\n  * Cookie\nyt-remote-session-name\n  * Duration\nsession\n  * Description\nThe yt-remote-session-name cookie is used by YouTube to store the user's video player preferences using embedded YouTube video.\n\n\n  * Cookie\nyt-remote-fast-check-period\n  * Duration\nsession\n  * Description\nThe yt-remote-fast-check-period cookie is used by YouTube to store the user's video player preferences for embedded YouTube videos.\n\n\n  * Cookie\nyt-remote-session-app\n  * Duration\nsession\n  * Description\nThe yt-remote-session-app cookie is used by YouTube to store user preferences and information about the interface of the embedded YouTube video player.\n\n\n  * Cookie\nyt-remote-cast-available\n  * Duration\nsession\n  * Description\nThe yt-remote-cast-available cookie is used to store the user's preferences regarding whether casting is available on their YouTube video player.\n\n\n  * Cookie\nyt-remote-cast-installed\n  * Duration\nsession\n  * Description\nThe yt-remote-cast-installed cookie is used to store the user's video player preferences using embedded YouTube video.\n\n\n  * Cookie\ncp_session\n  * Duration\n3 months\n  * Description\nCodepen sets this cookie for Help systems found in the website.\n\n\n  * Cookie\nloid\n  * Duration\n1 year 1 month 4 days\n  * Description\nThis cookie is set by the Reddit. The cookie enables the sharing of content from the website onto the social media platform.\n\n\nAnalytics\nAnalytical 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.\n  * Cookie\n__hstc\n  * Duration\n6 months\n  * Description\nHubspot set this main cookie for tracking visitors. It contains the domain, initial timestamp (first visit), last timestamp (last visit), current timestamp (this visit), and session number (increments for each subsequent session).\n\n\n  * Cookie\nhubspotutk\n  * Duration\n6 months\n  * Description\nHubSpot sets this cookie to keep track of the visitors to the website. This cookie is passed to HubSpot on form submission and used when deduplicating contacts.\n\n\n  * Cookie\n_ga\n  * Duration\n1 year 1 month 4 days\n  * Description\nGoogle Analytics sets this cookie to calculate visitor, session and campaign data and track site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognise unique visitors.\n\n\n  * Cookie\n_ga_*\n  * Duration\n1 year 1 month 4 days\n  * Description\nGoogle Analytics sets this cookie to store and count page views.\n\n\n  * Cookie\n__Host-psifi.analyticsTrace\n  * Duration\n6 hours\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\n__Host-psifi.analyticsTraceV2\n  * Duration\n6 hours\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\n_gh_sess\n  * Duration\nsession\n  * Description\nGitHub sets this cookie for temporary application and framework state between pages like what step the user is on in a multiple step form.\n\n\n  * Cookie\nYSC\n  * Duration\nsession\n  * Description\nYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.\n\n\n  * Cookie\najs_anonymous_id\n  * Duration\n1 year\n  * Description\nThis cookie is set by Segment to count the number of people who visit a certain site by tracking if they have visited before.\n\n\n  * Cookie\nvuid\n  * Duration\n1 year 1 month 4 days\n  * Description\nVimeo installs this cookie to collect tracking information by setting a unique ID to embed videos on the website. \n\n\nPerformance\nPerformance 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.\n  * Cookie\nAWSALB\n  * Duration\n7 days\n  * Description\nAWSALB is an application load balancer cookie set by Amazon Web Services to map the session to the target.\n\n\n  * Cookie\nacq\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nacq.sig\n  * Duration\npast\n  * Description\nDescription is currently not available.\n\n\n  * Cookie\nptc\n  * Duration\n2 years\n  * Description\nNo description available.\n\n\nAdvertisement\nAdvertisement 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.\n  * Cookie\nmuc_ads\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to collect user behaviour and interaction data to optimize the website.\n\n\n  * Cookie\nguest_id_marketing\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor.\n\n\n  * Cookie\nguest_id_ads\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor.\n\n\n  * Cookie\npersonalization_id\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to integrate and share features for social media and also store information about how the user uses the website, for tracking and targeting.\n\n\n  * Cookie\nguest_id\n  * Duration\n1 year 1 month 4 days\n  * Description\nTwitter sets this cookie to identify and track the website visitor. It registers if a user is signed in to the Twitter platform and collects information about ad preferences.\n\n\n  * Cookie\nbcookie\n  * Duration\n1 year\n  * Description\nLinkedIn sets this cookie from LinkedIn share buttons and ad tags to recognize browser IDs.\n\n\n  * Cookie\n__Secure-ROLLOUT_TOKEN\n  * Duration\n6 months\n  * Description\nYouTube sets this cookie to manage feature rollout and experimentation. It helps Google control which new features or interface changes are shown to users as part of testing and staged rollouts, ensuring consistent experience for a given user during an experiment.\n\n\n  * Cookie\nyt.innertube::nextId\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to register a unique ID to store data on what videos from YouTube the user has seen.\n\n\n  * Cookie\nyt.innertube::requests\n  * Duration\nNever Expires\n  * Description\nYouTube sets this cookie to register a unique ID to store data on what videos from YouTube the user has seen.\n\n\n  * Cookie\nsession_tracker\n  * Duration\nsession\n  * Description\nThis cookie is set by the Reddit. This cookie is used to identify trusted web traffic. It also helps in adverstising on the website.\n\n\n  * Cookie\nedgebucket\n  * Duration\nsession\n  * Description\nReddit sets this cookie to save the information about a log-on Reddit user, for the purpose of advertisement recommendations and updating the content.\n\n\n  * Cookie\ndid\n  * Duration\n1 year\n  * Description\nArbor sets this cookie to show targeted ads to site visitors.This cookie expires after 2 months or 1 year.\n\n\nUncategorised\nOther uncategorised cookies are those that are being analysed and have not been classified into a category as yet.\nNo cookies to display.\nReject All Save My Preferences Accept All\nToggle Search[](https://towardsdatascience.com/)Toggle Mobile Navigation\n[](https://towardsdatascience.com/)\nPublish AI, ML & data-science insights to a global community of data professionals.\nSign in[Submit an Article](https://write.insightmediagroup.io)\n[Latest](https://towardsdatascience.com/latest/)[Editor's Picks](https://towardsdatascience.com/tag/editors-pick/)[Newsletter](https://towardsdatascience.com/tag/the-variable/)[ShipAI](https://towardsdatascience.com/shipai/)\n* * *\n[Write For TDS](https://towardsdatascience.com/submissions/)\n[LinkedIn](https://www.linkedin.com/company/towards-data-science/)[X](https://x.com/TDataScience)Toggle Search\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\n# Building a Streamlit UI for My LangGraph AI Agent\nBuilding a production-ready web interface for a stateful LangGraph agent\n[Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\nAugust 8, 20266 min read\n![Photo by Towfiqu barbhuiya on Unsplash](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/towfiqu-barbhuiya-9gPKrsbGmc-unsplash-scaled-1.jpg)\n[Photo](https://unsplash.com/photos/person-in-blue-long-sleeve-shirt-sitting-beside-black-laptop-computer--9gPKrsbGmc) by Towfiqu barbhuiya on Unsplash\nIn my [previous article](https://towardsdatascience.com/i-replaced-a-15-minute-booking-process-with-a-langgraph-ai-agent/), I walked through how I built a LangGraph-based AI agent to automate a 15-minute customer service booking session.\nThe agent handles the entire booking process like a real customer service representative. It's a LangGraph-based agent that orchestrates the following operations:\n  * Responds to customer queries and understands their needs.\n  * Calculates the price for the service and informs the customer.\n  * Handles the customer’s acceptance or rejection.\n  * Proposes optimized time slots.\n  * Confirms and records the appointment.\n\n\nIn 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.\nThe 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.\nThe full source code of this project is available on GitHub at [customer-service-agent](https://github.com/SonerYldrm/customer-service-agent). Feel free to clone the repo and test it yourself.\nIn this article, we will build a clean, interactive Streamlit UI on top of the existing LangGraph agent.\nA 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.\nLearn this step by step with the interactive [AI Agents](https://roadmap.sh/ai-agents) roadmap.\n## User interface for the agent\nIn 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.\nThe 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.\nThe architecture still lies in the same application. Streamlit only presents the state to the user and sends user actions back to the agent.\n## Streamlit page\nSince we're using poetry for dependency management, we can install streamlit using:\npython\n\n```\npoetry add streamlit\n```\n\nThis updates both `pyproject.toml` and `poetry.lock` files. Then we create a new file `streamlit_app.py` .\nWe start by importing the graph builder, models, and observibility utilities.\npython\n\n```\nfrom __future__ import annotations\n\nimport os\nfrom datetime import datetime\nfrom typing import Any\nfrom uuid import uuid4\n\nimport streamlit as st\nfrom dotenv import load_dotenv\nfrom langchain_core.messages import AIMessage, HumanMessage\nfrom langchain_openai import ChatOpenAI\n\nfrom customer_service_agent.graph import build_graph\nfrom customer_service_agent.models import (\n    AgentState,\n    BookingDetails,\n    TimeOption,\n)\nfrom customer_service_agent.observability import (\n    create_langfuse_handler,\n    flush_langfuse,\n    graph_config,\n)\n```\n\nThe 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.\nThe graph expects an Agent State to be initialized ( `graph = StateGraph(AgentState)` ) so we add the following in `streamlit_app.py` :\npython\n\n```\nINITIAL_STATE: AgentState = {\n    \"messages\": [],\n    \"booking_details\": BookingDetails(),\n    \"calculated_price\": None,\n    \"time_options\": [],\n    \"selected_slot\": None,\n    \"status\": \"gathering_info\",\n}\n```\n\nAfter the first turn (i.e. first customer message), LangGraph’s checkpointer retains the state. \nStreamlit 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` .\nWe can initialize the session as follows:\npython\n\n```\ndef initialize_session() -> None:\n    if \"graph\" in st.session_state:\n        return\n\n    llm = ChatOpenAI(\n        model=os.getenv(\"OPENAI_MODEL\", \"gpt-4o-mini\"),\n        temperature=0,\n    )\n\n    handler = create_langfuse_handler()\n\n    st.session_state.graph = build_graph(llm)\n    st.session_state.handler = handler\n    st.session_state.config = graph_config(\n        str(uuid4()),\n        handler,\n    )\n    st.session_state.agent_state = INITIAL_STATE.copy()\n    st.session_state.started = False\n```\n\nThe 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.\nThe `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.\nWe 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.\nThen, we have the `_invoke` function for handling user input.\npython\n\n```\ndef _invoke(customer_text: str) -> None:\n    \"\"\"Submit one customer turn to the graph and retain its latest state.\"\"\"\n    graph_input: dict[str, Any] = {\"messages\": [HumanMessage(content=customer_text)]}\n    if not st.session_state.started:\n        graph_input.update(INITIAL_STATE)\n        graph_input[\"messages\"] = [HumanMessage(content=customer_text)]\n        st.session_state.started = True\n\n    try:\n        result = st.session_state.graph.invoke(graph_input, config=st.session_state.config)\n        st.session_state.agent_state = result\n        flush_langfuse(st.session_state.handler)\n    except Exception:\n        st.session_state.started = bool(st.session_state.agent_state.get(\"messages\"))\n        st.error(\"The assistant could not process that request. Please try again.\")\n```\n\nThis 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\").\nThe 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.\nFor the first message, we initialize the graph using the `INITIAL_STATE` defined earlier with empty booking details, scheduling options, price, and the initial status.\nThen, 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:\npython\n\n```\nresult = st.session_state.graph.invoke(graph_input, config=st.session_state.config)\nst.session_state.agent_state = result\n```\n\nThis 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.\nFinally, we have some render functions (`_render...()` ) defined in `streamlit_app.py` to convert the current LangGraph state into visible Streamlit components.\npython\n\n```\ndef _render_messages(state: AgentState) -> None:\n    if not state.get(\"messages\"):\n        with st.chat_message(\"assistant\"):\n            st.write(\n                \"Hi! I can help you book house or couch cleaning. \"\n                \"Tell me what you need, including the size and service address.\"\n            )\n        return\n\n    for message in state[\"messages\"]:\n        if isinstance(message, HumanMessage):\n            role = \"user\"\n        elif isinstance(message, AIMessage):\n            role = \"assistant\"\n        else:\n            continue\n        with st.chat_message(role):\n            st.write(str(message.content))\n```\n\nFor 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.\n## Let's see how it works\nWe've gone over the `streamlit_app.py` to learn how the page is structured. It's time to see it in action:\nWe can test it locally using the following command:\nbash\n\n```\npoetry run streamlit run customer_service_agent/streamlit_app.py\n```\n\nIt will open up a page at [`http://localhost:8501/`](http://localhost:8501/) . The page looks like this:\n![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/image-5-1024x539.png)\nIn order to test the agent, we need an OPENAI_API_KEY. It'll cost you a few cents to test.\nHere is a chat example:\n![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/image-6-1024x687.png)\nI 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:\n![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/image-7-1024x509.png)\nSince 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:\n![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/08/image-8-1024x630.png)\nThere 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.\nI'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.\nStay tuned for what's coming and thank you for reading!\n## Register Now to Continue Reading\n### Unlock Towards Data Science with a Free Account\nAll articles on Towards Data Science are available to registered users. Create a free account today to access this article and thousands more.\nRegister for freeSign in to your account\n* * *\n![](https://assets.insightmediagroup.io/media/1787657090323_hn276a.png)\nWritten By\n## [Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\n[See all from Soner Yıldırım](https://towardsdatascience.com/author/sonery/)\n[Agentic Ai](https://towardsdatascience.com/tag/agentic-ai/)[Artificial Intelligence](https://towardsdatascience.com/tag/artificial-intelligence/)[Langgraph](https://towardsdatascience.com/tag/langgraph/)[Python](https://towardsdatascience.com/tag/python/)[Streamlit](https://towardsdatascience.com/tag/streamlit/)\nShare This Article\n  * [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&title=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n  * [](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&title=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n  * [](https://x.com/share?url=https%3A%2F%2Ftowardsdatascience.com%2Fbuilding-a-streamlit-ui-for-my-langgraph-ai-agent%2F&text=Building%20a%20Streamlit%20UI%20for%20My%20LangGraph%20AI%20Agent)\n\n\nTowards Data Science is a community publication. Submit your insights to reach our global audience and earn through the TDS Author Payment Program.\n[Write for TDS](https://towardsdatascience.com/submissions/)\n## Related Articles\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2023/11/0Fv351uNXkW5r42Ld-scaled.jpg)](https://towardsdatascience.com/creating-a-gradient-descent-animation-in-python-3c4dcd20ca51/)\n## [Creating a Gradient Descent Animation in Python](https://towardsdatascience.com/creating-a-gradient-descent-animation-in-python-3c4dcd20ca51/)\n[Programming](https://towardsdatascience.com/category/programming/)\nHow to plot the trajectory of a point over a complex surface\n[Luis Medina](https://towardsdatascience.com/author/luisdamed/)\nNovember 11, 20230 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2021/07/0iZ77FE8xDHRVZc4n-scaled.jpg)](https://towardsdatascience.com/tensorflow-vs-keras-d51f2d68fdfc/)\n## [TensorFlow vs Keras: A Comparison](https://towardsdatascience.com/tensorflow-vs-keras-d51f2d68fdfc/)\n[Artificial Intelligence](https://towardsdatascience.com/category/artificial-intelligence/)\nLooking at the nuts and bolts of two machine learning libraries\n[Mike Wolfe](https://towardsdatascience.com/author/miketechgame/)\nJuly 16, 20217 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/07/hf_20260701_234517_b9f0baec-3a81-4aa0-9d27-d688960310b4.jpg)](https://towardsdatascience.com/where-does-an-ais-personality-actually-come-from/)\n## [Where Does an AI’s Personality Actually Come From?](https://towardsdatascience.com/where-does-an-ais-personality-actually-come-from/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nThey aren’t designed, you can’t help perceiving one anyway, and that makes them an engineering problem almost no one is solving.\n[Slava Polonski, PhD](https://towardsdatascience.com/author/slavaxyz/)\nJuly 9, 202615 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2025/09/naomi-august-1eFgYRwYctg-unsplash-scaled-1.jpg)](https://towardsdatascience.com/hands-on-with-agents-sdk-safeguarding-input-and-output-with-guardrails/)\n## [Hands-On with Agents SDK: Safeguarding Input and Output with Guardrails](https://towardsdatascience.com/hands-on-with-agents-sdk-safeguarding-input-and-output-with-guardrails/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nA practical exploration of how guardrails safeguard multi-agent systems in Python using OpenAI Agents SDK, Streamlit, and Pydantic\n[Iqbal Rahmadhan](https://towardsdatascience.com/author/miqbalrp/)\nSeptember 6, 202516 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/02/thumbnail_light.jpg)](https://towardsdatascience.com/can-ai-solve-failures-in-your-supply-chain/)\n## [Can AI Solve Failures in Your Supply Chain?](https://towardsdatascience.com/can-ai-solve-failures-in-your-supply-chain/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nWhen 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.\n[Samir Saci](https://towardsdatascience.com/author/s-saci95/)\nFebruary 18, 202614 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/01/image-214.jpg)](https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/)\n## [How to Apply Agentic Coding to Solve Problems](https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nLearn how to efficiently solve problems with coding agents\n[Eivind Kjosbakken](https://towardsdatascience.com/author/oieivind/)\nJanuary 31, 20266 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2026/04/memory-cover-image-8Apr2026.png)](https://towardsdatascience.com/why-every-ai-coding-assistant-needs-a-memory-layer/)\n## [Why Every AI Coding Assistant Needs a Memory Layer](https://towardsdatascience.com/why-every-ai-coding-assistant-needs-a-memory-layer/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nA practical guide to context engineering for AI coding assistants\n[Chanin Nantasenamat](https://towardsdatascience.com/author/data-professor/)\nApril 11, 20269 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2025/10/eko-herwantoro-mAxA2OmTmKA-unsplash-2.jpg)](https://towardsdatascience.com/agentic-ai-in-finance-opportunities-and-challenges-for-indonesia/)\n## [Agentic AI in Finance: Opportunities and Challenges for Indonesia](https://towardsdatascience.com/agentic-ai-in-finance-opportunities-and-challenges-for-indonesia/)\n[Agentic AI](https://towardsdatascience.com/category/artificial-intelligence/agentic-ai/)\nExploring the business value, regulatory challenges, and human impact of Agentic AI adoption across Indonesia's finance sector.\n[Iqbal Rahmadhan](https://towardsdatascience.com/author/miqbalrp/)\nOctober 22, 202510 min read\n  * [![](https://assets.insightmediagroup.io/media/wp-content/uploads/2020/07/1DGgNy7Zj1ZE807dgjwHj0Q-scaled.jpeg)](https://towardsdatascience.com/knowledge-graphs-in-natural-language-processing-acl-2020-ebb1f0a6e0b1/)\n## [Knowledge Graphs in Natural Language Processing @ ACL 2020](https://towardsdatascience.com/knowledge-graphs-in-natural-language-processing-acl-2020-ebb1f0a6e0b1/)\n[Artificial Intelligence](https://towardsdatascience.com/category/artificial-intelligence/)\nThis post commemorates the first anniversary of the series where we examine advancements in NLP and Graph ML powered by knowledge graphs...\n[Michael Galkin](https://towardsdatascience.com/author/mgalkin/)\nJuly 10, 202018 min read\n\n\n  * [YouTube](https://www.youtube.com/c/TowardsDataScience)\n  * [X](https://x.com/TDataScience)\n  * [LinkedIn](https://www.linkedin.com/company/towards-data-science/)\n  * [Threads](https://www.threads.net/@towardsdatascience)\n  * [Bluesky](https://bsky.app/profile/towardsdatascience.com)\n\n\n[](https://towardsdatascience.com/)\nYour home for data science and AI. The world's leading publication for data science, data analytics, data engineering, machine learning, and artificial intelligence professionals.\nSubscribe to Our Newsletter[Write For TDS](https://towardsdatascience.com/submissions/)•[About](https://towardsdatascience.com/about-towards-data-science-d691af11cc2f/)•[Advertise](https://contact.towardsdatascience.com/advertise-with-towards-data-science)•[Privacy Policy](https://towardsdatascience.com/privacy-policy/)•[Terms of Use](https://towardsdatascience.com/website-terms-of-use/)\n© Insight Media Group, LLC 2026•[The New Stack](https://thenewstack.io)•[roadmap.sh](https://roadmap.sh)•[Creator Network](https://insightmediagroup.io/creator-network)\n####  Recommended Articles \nClose\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607639/image?etag=1781250125848&width=500&height=500) Javascript Fatigue: HTMX Is All You Need to Build ChatGPT — Part 1 ](https://towardsdatascience.com/javascript-fatigue-you-dont-need-js-to-build-chatgpt/ \"Javascript Fatigue: HTMX Is All You Need to Build ChatGPT — Part 1\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/607930/image?etag=1782124566054&width=500&height=500) The Subset Sum Problem Solved in Linear Time for Dense Enough Inputs ](https://towardsdatascience.com/subset-sum-problem-solved-in-linear-time-for-dense-enough-inputs/ \"The Subset Sum Problem Solved in Linear Time for Dense Enough Inputs\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/3660/image?etag=1780176246070&width=500&height=500) Does Your Company Have a Data Strategy? ](https://towardsdatascience.com/does-your-company-have-a-data-strategy-e8944dbec4ae/ \"Does Your Company Have a Data Strategy?\")\n  * [ ![](https://h030.towardsdatascience.com/rest/v2/contentStores/d7d3a4ab-7caf-4383-bbd2-fbf7fb4f1787/items/4970/image?etag=1780565225463&width=500&height=500) Productivity Tips, Data Career Insights, and Other Recent Must-Reads ](https://towardsdatascience.com/productivity-tips-data-career-insights-and-other-recent-must-reads-5c47eb7a2fe0/ \"Productivity Tips, Data Career Insights, and Other Recent Must-Reads\")\n\n\n",
  "body_base_path": "attachments/59317c1fa743/pages/",
  "body_markdown_path": "attachments/59317c1fa743/pages/archived-body.md",
  "local_html": "attachments/59317c1fa743/pages/archived-body.html",
  "body_source": "prior_capture"
}