Agentic-Systems: A Full-Stack Intelligent System for Visualizing Agent Execution Flows

Agentic-Systems is a full-stack intelligent system combining React frontend with FastAPI + LangGraph backend, designed to solve the "black box" problem of AI Agent internal operations. Core features include document upload, vector storage, real-time visualization of agent execution flows (with reasoning steps displayed in a stream via Server-Sent Events), support for local deployment, data privacy protection, and reduced usage costs. This article will analyze its architectural design, core functions, and technical implementation to help understand the construction of transparent and observable Agent systems.

Large Language Models (LLMs) have pushed AI Agents from concept to practice, but the internal operations of Agents are often a "black box"—users only see input and output, with the intermediate process unknown. This increases debugging difficulty and hinders developers from understanding and optimizing Agent behavior. The Agentic-Systems project was born to address this, making Agent operations transparent by visually presenting their reasoning steps, planning processes, memory updates, tool execution, and model routing.

Agentic-Systems uses a modern full-stack architecture: the frontend is built on React18+Vite to provide smooth interaction; the backend uses the FastAPI framework, leveraging asynchronous features to handle high concurrency; the Agent core uses LangGraph to drive state machine execution flows; ChromaDB is selected for vector storage; embedding models are deployed locally via Ollama. The tech stack selection embodies the "localization first" concept, supporting fully offline operation and protecting data privacy.

The system has seven core functions: 1. Document ingestion and vectorization: Supports uploads of .txt/.md/.pdf files, uses sliding window segmentation (1000 characters + 200 overlap), generates embeddings via Ollama and stores them in ChromaDB; 2. Agentic RAG query: LangGraph state machine sequentially executes planning (analyze intent), retrieval (search relevant fragments), and synthesis (generate answers); 3. Real-time execution tracking: Uses SSE technology to push steps to the frontend, with animated display of reasoning processes; 4. Conversation persistence: Stores sessions in SQLite using UUID; 5. Interactive demonstration scenarios: Three preset modes; 6. Memory panel: Updates the latest five memories in real time; 7. Document library management: Displays indexed files.

Data flow: Upload file → backend validation → text extraction → sliding window chunking → write to SQLite chunks table and ChromaDB; when querying, start the LangGraph state machine, and return results via SSE stream. LangGraph state machine: AgentState is passed among three nodes—planning (analyze task and make plan), retrieval (fetch top4 fragments from ChromaDB), synthesis (generate answers using llama3.1). Storage layer: SQLite stores structured data (sessions, messages, etc.), ChromaDB stores vector data, leveraging their respective advantages.

Deployment steps: 1. Environment preparation: Start the Ollama service and pull models (ollama serve, ollama pull llama3.1, ollama pull nomic-embed-text); 2. Start the backend: Enter the backend directory, create a virtual environment → activate it → install dependencies → uvicorn app.main:app --reload --port 8000; 3. Start the frontend: Execute npm install → npm run dev in the root directory; visit http://localhost:5173, health check at http://localhost:8000/health.

Application scenarios: 1. Education: Visualization helps students intuitively understand Agent task decomposition, information retrieval, and answer generation; 2. Development and debugging: Observable modes (SSE stream output, step auditing, etc.) provide debugging references for engineers; 3. Local knowledge base: Import internal documents to build a private Q&A assistant with data stored locally.

Agentic-Systems provides an excellent example for Agent observability, making the Agent "black box" transparent through the combination of LangGraph and React. As Agent technology moves towards production, observability will become a key requirement, and the modes demonstrated by the project (real-time tracking, memory management, audit logs, etc.) may become standard configurations. For developers, the project provides valuable references for understanding Agent principles or building systems.