{"id":337,"date":"2025-07-04T08:18:35","date_gmt":"2025-07-04T08:18:35","guid":{"rendered":"https:\/\/felixaugenstein.com\/blog\/?p=337"},"modified":"2025-07-04T08:18:35","modified_gmt":"2025-07-04T08:18:35","slug":"building-agentic-systems-a-hands-on-guide-with-langchain-and-langgraph","status":"publish","type":"post","link":"https:\/\/felixaugenstein.com\/blog\/building-agentic-systems-a-hands-on-guide-with-langchain-and-langgraph\/","title":{"rendered":"Building Agentic Systems: A Hands-On Guide with LangChain and LangGraph"},"content":{"rendered":"\n<p>In the rapidly evolving world of AI, <strong>agentic systems<\/strong> have emerged as a powerful architectural pattern that brings together intelligent decision-making and real-world utility. This post dives into what agentic systems are, introduces the concept of <strong>agents<\/strong>, and walks you through setting up a complete working prototype: an <strong>Agentic Ticket System<\/strong> powered by FastAPI, Streamlit, and locally run LLMs via <strong>Ollama<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Agentic Systems?<\/h2>\n\n\n\n<p>An <strong>agentic system<\/strong> refers to an architecture where one or more <em>agents<\/em>\u2014autonomous AI components\u2014observe, reason, and act to achieve goals. These systems are built to operate independently or semi-independently, adapting to their environment and making context-aware decisions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Agent Definition according to IBM<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>An\u00a0<a href=\"https:\/\/www.ibm.com\/think\/topics\/artificial-intelligence\">artificial intelligence (AI)<\/a>\u00a0agent refers to a system or program that is capable of autonomously performing tasks on behalf of a user or another system by designing its\u00a0<a href=\"https:\/\/www.ibm.com\/think\/topics\/agentic-workflows\">workflow<\/a>\u00a0and utilizing available\u00a0<a href=\"https:\/\/www.ibm.com\/think\/topics\/tool-calling\">tools<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>Source: <a href=\"https:\/\/www.ibm.com\/think\/topics\/ai-agents\">https:\/\/www.ibm.com\/think\/topics\/ai-agents<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview: Agentic Ticket System<\/h2>\n\n\n\n<p>This is a practical example of an agentic system: An <strong>Agentic Ticket System<\/strong>. This prototype allows you to interact with LLM agents to create support tickets.<\/p>\n\n\n\n<p>\ud83d\udc49 <strong>GitHub Repository<\/strong>: <a class=\"\" href=\"https:\/\/github.com\/yourusername\/agentic-ticket-system\">Agentic Ticket <\/a><a href=\"https:\/\/github.com\/FelixAugenstein\/agentic-ticket-system\">S<\/a><a class=\"\" href=\"https:\/\/github.com\/yourusername\/agentic-ticket-system\">ystem<\/a><\/p>\n\n\n\n<p>The project uses:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>FastAPI<\/strong> for the backend agent logic and API endpoints.<\/li>\n\n\n\n<li><strong>Streamlit<\/strong> for a reactive frontend UI.<\/li>\n\n\n\n<li><strong>Ollama<\/strong> to run powerful LLMs like <code>granite3.1-dense<\/code> directly on your machine.<\/li>\n\n\n\n<li><strong>LangChain<\/strong> is a framework for building applications powered by language models through modular components like prompt templates, memory, and tools, while <\/li>\n\n\n\n<li><strong>LangGraph<\/strong> is a library built on top of LangChain that enables building stateful, multi-agent applications using graph-based execution flows.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">System Architecture<\/h2>\n\n\n\n<p>Here\u2019s a high-level overview of the stack:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">    <code>Interface (Streamlit) \ud83e\uddd1\u200d\ud83d\udcbb<br>        \u2193<br>    FastAPI Backend \ud83d\udd01<br>        \u2193<br>    Local LLMs via Ollama \ud83e\udde0<br>        \u2193<br>   (Optional) SQLite via TablePlus \ud83d\uddc3\ufe0f<br><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set It Up<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install Ollama and pull models<\/h3>\n\n\n\n<p>To run models locally using Ollama:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download and install Ollama for <a class=\"\" href=\"https:\/\/ollama.com\/download\/mac\">macOS<\/a><\/li>\n\n\n\n<li>Pull a model, e.g.: <code>ollama pull granite3.1-dense:latest<\/code><\/li>\n\n\n\n<li>Check if the model is installed: <code>ollama list<\/code><\/li>\n\n\n\n<li>Optionally test it: <code>ollama run granite3.1-dense:latest \"Hello\"<\/code><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Set Up the Backend<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <code>backend<\/code> directory.<\/li>\n\n\n\n<li>Create a virtual environment: <code>uv venv .venv --python=\/opt\/homebrew\/bin\/python3.12<\/code><\/li>\n\n\n\n<li>Activate it: <code>source .venv\/bin\/activate<\/code><\/li>\n\n\n\n<li>Install dependencies: <code>uv pip install -r requirements.txt<\/code><\/li>\n\n\n\n<li>Go back to the root directory: <code>cd ..\/<\/code><\/li>\n\n\n\n<li>Copy <code>.env.sample<\/code> to <code>.env<\/code> and configure any models or credentials.<\/li>\n\n\n\n<li>Run the FastAPI app: <code>uvicorn backend.main:app --reload<\/code><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Set Up the Frontend<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <code>frontend<\/code> directory.<\/li>\n\n\n\n<li>Create and activate a virtual environment: <code>uv venv source .venv\/bin\/activate<\/code><\/li>\n\n\n\n<li>Install dependencies: <code>uv pip install -r requirements.txt<\/code><\/li>\n\n\n\n<li>Start the frontend app: <code>streamlit run streamlit_app.py<\/code><\/li>\n\n\n\n<li>To run the ticket dashboard app: <code>streamlit run streamlit_ticket_dashboard.py<\/code><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 (Optional): Connect to SQLite via TablePlus<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download TablePlus from <a class=\"\" href=\"https:\/\/tableplus.com\/\">here<\/a><\/li>\n\n\n\n<li>Create a new SQLite connection and name it <code>ticketapi<\/code>.<\/li>\n\n\n\n<li>Select the <code>ticket.db<\/code> file in your <code>backend<\/code> folder.<\/li>\n\n\n\n<li>Test the connection and connect.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Agentic systems are not just theoretical\u2014they are rapidly becoming the core of next-gen applications. Whether it\u2019s customer support, data analysis, or workflow automation, <strong>autonomous agents powered by LLMs<\/strong> will be integral to future software.<\/p>\n\n\n\n<p>To try it yourself, find the repository here:<\/p>\n\n\n\n<p> <a href=\"https:\/\/github.com\/FelixAugenstein\/agentic-ticket-system\">GitHub: Agentic Ticket System<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the rapidly evolving world of AI, agentic systems have emerged as a powerful architectural pattern that brings together intelligent decision-making and real-world utility. This post dives into what agentic systems are, introduces the concept of agents, and walks you through setting up a complete working prototype: an Agentic Ticket [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":338,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,58,55,59,62,27,19,60],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agentic-ai","category-fastapi","category-generative-ai","category-langchain","category-langgraph","category-python","category-rest-apis","category-streamlit"],"_links":{"self":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":1,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions\/339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media\/338"}],"wp:attachment":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}