Dynamic Dashboard Viewer

Is a multi-agent system that transforms natural language questions into fully interactive, data-driven dashboards — all rendered live in the browser without a single line of
hand-written frontend code. Rather than returning text answers, MED responds to every user query by generating a complete, streaming UI composed of charts, cards, tabs, and layout
components, built dynamically from real database results.

Beyond text-based chat

Most AI data tools stop at a markdown table or a prose explanation. MED goes further: the agent’s final output is a rendered React interface. A user asking “Show me monthly sales
broken down by category” receives a live dashboard with an ECharts bar chart, a summary card, and a tabbed layout — interactive elements they can explore, not just read. The
interface is regenerated on every query, meaning each conversation turn produces a fresh, purpose-built UI tailored to that specific question.

Architecture and technical execution

The system is built on a two-tier LangGraph agent pipeline:

• AnalystAgent — a ReAct loop connected directly to PostgreSQL via SQLAlchemy. It inspects schemas, writes and executes SQL queries, and exports result sets as CSV files to a shared
  Docker volume.
• DisplayingAgent — an orchestrator agent that receives the user’s request, delegates data retrieval to the AnalystAgent as a sub-agent tool call, then uses a Python sandbox
  (isolated Docker container with pandas) to aggregate and transform the exported CSVs into A2UI JSONL. It writes a build.py script, executes it inside the sandbox, and streams the
  resulting dashboard to the browser.

The backend is a FastAPI server streaming responses via Server-Sent Events (SSE), enabling the React frontend to render components progressively as the agent produces them — charts
appear piece by piece in real time, not after a full round-trip.

A2UI as the generative UI layer

The interface is powered by the A2UI protocol, an open-source declarative streaming UI framework. Instead of generating executable React code (a significant security risk), the agent
emits abstract JSONL component descriptors:

{“version”:”v0.9”,”createSurface”:{“surfaceId”:”dashboard”,”catalogId”:”a2ui-charts-catalog-v1”}}
{“version”:”v0.9”,”updateComponents”:{“surfaceId”:”dashboard”,”components”:[
{“id”:”root”,”component”:”Column”,”children”:[“title”,”chart1”]},
{“id”:”chart1”,”component”:”Chart”,”type”:”bar”,”title”:”Sales by Month”,”labels”:[…],”series”:[…]}
]}}

The A2UI React renderer maps each component type to a pre-registered implementation from a secure catalog — in this case, a custom ChartComponent backed by Apache ECharts. The agent
cannot inject arbitrary code; it can only compose from the approved component set, making generative UI safe by design.

Stack summary

┌────────────────────────┬──────────────────────────────────┐
│ Layer │ Technology │
├────────────────────────┼──────────────────────────────────┤
│ Generative UI protocol │ A2UI (v0.9) │
├────────────────────────┼──────────────────────────────────┤
│ Agent orchestration │ LangGraph (ReAct) │
├────────────────────────┼──────────────────────────────────┤
│ LLMs │ Google Gemini 2.0 Flash / Groq │
├────────────────────────┼──────────────────────────────────┤
│ Backend API │ FastAPI + SSE streaming │
├────────────────────────┼──────────────────────────────────┤
│ Database │ PostgreSQL + SQLAlchemy 2.0 │
├────────────────────────┼──────────────────────────────────┤
│ Data processing │ Python + pandas (Docker sandbox) │
├────────────────────────┼──────────────────────────────────┤
│ Frontend renderer │ React + Apache ECharts │
├────────────────────────┼──────────────────────────────────┤
│ Infrastructure │ Docker Compose │
└────────────────────────┴──────────────────────────────────┘

Originality

What distinguishes MED is the combination of sub-agent delegation, sandboxed computation, and declarative streaming UI in a single cohesive pipeline. The agent doesn’t just query
data — it reasons about layout, chooses appropriate chart types, aggregates data programmatically in an isolated environment, and assembles a multi-component interface. Every
dashboard is entirely generated from the database contents at query time, with no templates or hardcoded views. The A2UI security model ensures that this power is exercised without
exposing the browser to arbitrary code execution.