README.md

metadata

title: langgraph-support-agent
colorFrom: blue
colorTo: indigo
sdk: docker

🤖 LangGraph Support Agent Studio

🤖 LangGraph Support Agent Studio — A production-grade multi-turn customer support agent built with LangGraph's ReAct architecture, powered entirely by free HuggingFace Inference API models, with live graph tracing, tool call logging, and session analytics streamed in real time via SSE.

---

✨ Features

🧠 ReAct Agent Loop	LangGraph StateGraph orchestrates Thought → Action → Observation with up to 4 tool calls per turn, parsed from free-tier HuggingFace model output
🔧 5 Live Tools	search_faq, check_order_status, create_ticket, get_product_info, escalate_to_human — each with real logic and mock data
🗺️ Live Graph Trace	Animated node visualizer showing Router → Agent → Tool Executor → Responder with per-node timing via SSE
📡 Token Streaming	Server-Sent Events stream LLM tokens and graph events simultaneously, updating chat, trace, and tool log in real time
🔒 Secure by Design	HF_TOKEN injected via HuggingFace Space secrets, never committed to source. All state is in-memory per session
🐳 Containerized Deployment	Docker-first with gunicorn gthread workers, HuggingFace Spaces-compatible (uid 1000, port 7860)

🏗️ Architecture

Browser (SSE) ◀──▶ Flask + gunicorn
                         │
                  LangGraph StateGraph
                  ┌──────────────────┐
                  │ Router → Agent   │
                  │   ↓       ↑      │
                  │ Tool Exec ←┘     │
                  │   ↓              │
                  │ Responder → END  │
                  └──────────────────┘
                         │
                HuggingFace Inference API
          Mistral 7B · Zephyr 7B · Phi-3 · Llama 3

🚀 Getting Started

git clone https://github.com/mnoorchenar/langgraph-support-agent.git
cd langgraph-support-agent
python -m venv venv && source venv/bin/activate
pip install -r requirements.txt
cp .env.example .env          # add your HF_TOKEN
python app.py                 # open http://localhost:7860

🐳 Docker

docker build -t langgraph-support-agent .
docker run -p 7860:7860 -e HF_TOKEN=hf_your_token_here langgraph-support-agent

For HuggingFace Spaces: push this repo and add HF_TOKEN as a Space secret under Settings → Variables and Secrets.

📊 Dashboard Modules

Module	Description	Status
💬 Chat Interface	Multi-turn streaming chat with SSE token delivery	✅ Live
🗺️ Graph Trace	Animated LangGraph node visualizer with per-node timing	✅ Live
🛠️ Tool Call Log	Expandable log of every tool invocation with input/output	✅ Live
📈 Session Analytics	Chart.js charts — tool usage frequency and latency history	✅ Live
📜 Conversation History	Full chat history with timestamps and estimated token counts	✅ Live
🤖 Model Selector	Switch between 4 HuggingFace-hosted LLMs mid-session	✅ Live

🧠 ML Models

models = {
    "mistral":  "mistralai/Mistral-7B-Instruct-v0.3",
    "zephyr":   "HuggingFaceH4/zephyr-7b-beta",
    "phi3":     "microsoft/Phi-3-mini-4k-instruct",
    "llama3":   "meta-llama/Meta-Llama-3-8B-Instruct",
}
agent_type   = "ReAct (Reason + Act)"
tool_count   = 5
max_iters    = 4
streaming    = True   # token-level SSE via InferenceClient

📁 Project Structure

langgraph-support-agent/
├── app.py                    # Flask app, SSE endpoints, session management
├── events.py                 # Thread-safe per-session SSE event queue
├── agent/
│   ├── state.py              # AgentState TypedDict for LangGraph
│   ├── tools.py              # 5 tool functions + execute_tool dispatcher
│   ├── llm.py                # HF InferenceClient wrapper, ReAct prompt, parsers
│   ├── nodes.py              # Router, Agent, ToolExecutor, Responder node functions
│   └── graph.py              # StateGraph builder with conditional routing
├── data/
│   └── faq.json              # 15-entry FAQ knowledge base
├── templates/
│   └── index.html            # Single-page UI, 4-panel layout, SSE client
├── static/
│   └── app.js                # SSE client, Chart.js, node trace UI, analytics
├── requirements.txt
├── Dockerfile
├── .env.example
└── docs/
    └── project-template.html # Portfolio page

👨‍💻 Author

Mohammad Noorchenarboo — Data Scientist | AI Researcher | Biostatistician

📍 Ontario, Canada · LinkedIn · Website · HuggingFace · GitHub

Disclaimer

This project is developed strictly for educational and research purposes. All datasets are synthetically generated — no real user data is stored. Provided "as is" without warranty of any kind.

📜 License

MIT License. See LICENSE for details.