Skip to main content

🗺️ Architecture Recap

This page summarizes the full end-to-end system design of the Agentic GraphRAG Digital Twin. It maps out how individual components interact to deliver high-speed, secure, and context-aware responses, serving as the outline for our portfolio deep-dive.

🔁 End-to-End Execution Flow​

When a user submits a query to the Digital Twin console, the request progresses through the following steps:

[User Interface]
        │   1. Sends Query (Next.js client)
        ▼
[FastAPI Server]
        │   2. Evaluates regex-based Security Guardrails
        ▼
[LangGraph Orchestrator] ◄═══ 3. Routes queries dynamically
   ├──► [Pinecone DB] ═══════ 4. Fetches semantic vectors
   └──► [NetworkX Graph] ════ 5. Traverses relationships
        │
        ▼   6. Merges context & reflects on answer completeness
[Groq LLM Engine (Llama-3.3)]
        │   7. Generates stream response tokens
        ▼
[FastAPI SSE Stream]
        │   8. Transmits tokens as Server-Sent Events
        ▼
[Next.js Frontend]
        │   9. Renders typing effect & highlights active graph nodes

🛠️ Key Architectural Pillars​

1. The Ingestion Engine​

  • Documents are split into overlapping chunks, embedded using all-MiniLM-L6-v2, and index-stored in Pinecone.
  • Concurrently, key entities are extracted, resolved, and saved into a NetworkX directed graph to map connections.

2. The Stateful Router (LangGraph)​

  • Instead of using a simple one-shot prompt, an active Agentic Loop runs.
  • The router checks the query properties: it uses vector search for factual lookups, and graph traversals for system relations or dependency queries.

3. The Low-Latency Streaming Pipeline​

  • The backend utilizes FastAPI to stream responses using Server-Sent Events (SSE).
  • High-speed computation is powered by Groq utilizing the Llama-3.3-70B model, yielding responses within milliseconds.

4. Zero-Dependency Visualization​

  • The knowledge topology is rendered in real-time on an HTML5 <canvas> element using a custom physics solver.
  • Drag-and-drop actions, node scaling, and active path highlights are all handled natively.

5. Multi-Client Integration (MCP)​

  • The entire system is packaged as an MCP Server, allowing tools to be queried standardly by other desktop agents (like Claude or Gemini).

🎥 Video Portfolio Script Outline​

Use this structural outline when recording the architecture walkthrough:

  1. The Hook (0:00 - 1:00): Quick demo of the streaming chat + canvas graph animation. Define what an "Agentic GraphRAG Twin" is.
  2. The Retrieval Setup (1:00 - 3:00): Screen share of the HuggingFace script and the Pinecone console. Discuss why vector search alone isn't enough.
  3. GraphRAG Under the Hood (3:00 - 6:00): Walkthrough of sidebars.js and code files demonstrating LangGraph routing decisions and NetworkX lookups.
  4. Security & Streaming (6:00 - 8:00): Code review of the FastAPI SSE generator and regular-expression guardrails. Show how they block mock prompt injections.
  5. The MCP Value Pitch (8:00 - 10:00): Demonstrate hooking up the local python server to an external IDE agent to show true machine-to-machine tool execution.