Mermaid Diagram for Arch/Data Flow

[jimmycfa]

Trying to understand the architecture and data flow, I (AI) created this Mermaid diagram that I thought was helpful in understanding the MCP vs HTML serving and the flow. Maybe it will help someone else:

graph TB
    Client[Client ChatGPT<br/>User Request]
    FastAPI[FastAPI Server port 8000<br/>HTTP/SSE Endpoints]
    FastMCP[FastMCP Server]
    Handlers[Request Handlers]
    Registry[Widget Registry]
    Loader[HTML Loader]
    DB[(widgets list)]
    Files[/assets/*.html files/]
    Widget[Widget Display]
    
    Client -->|1. Tool Call| FastAPI
    FastAPI -->|2. Route Request| FastMCP
    FastMCP -->|3a. list_tools| Handlers
    FastMCP -->|3b. list_resources| Handlers
    FastMCP -->|3c. call_tool| Handlers
    FastMCP -->|3d. read_resource| Handlers
    Handlers -->|4. Lookup Widget| Registry
    Registry -->|5. Query| DB
    Handlers -->|6. Load HTML| Loader
    Loader -->|7. Read File| Files
    DB -->|Data| Registry
    Files -->|HTML Content| Loader
    Registry -->|Widget Info| Handlers
    Loader -->|HTML Content| Handlers
    Handlers -->|8. Return Response| FastMCP
    FastMCP -->|9. Send via SSE| FastAPI
    FastAPI -->|10. Deliver Result| Widget
    
    style Client fill:#666,color:#fff
    style FastAPI fill:#444,color:#fff
    style FastMCP fill:#555,color:#fff
    style Handlers fill:#333,color:#fff
    style Registry fill:#222,color:#fff
    style Loader fill:#222,color:#fff
    style Widget fill:#888,color:#fff

Loading