Schema-to-Screen — the model sees a subgraph, never the schema

An interactive reference architecture: agentic, RAG-grounded generation of GraphQL contracts and on-demand React UI over thousands of tables. Click any node for responsibilities, tech & data, controls, a worked example, FinOps and fallback — for solution-architecture, data, security, platform and FinOps reviewers.

Request / data Deterministic supervisor Generation agent Grounding (catalog / policy) Verification gates Human review Governed runtime

Controls Subgraph, not schema Entitlements in the query Deny-by-default fields Persisted ops only Read/write split Cost limits Release unit pinned Human approval Traced & auditable

01 / 12

TypeScript end-to-end · Postgres + pgvector catalog · typed agents + XState supervisor · GraphQL federation (Yoga / Hive) · persisted documents · Kysely query compiler · React spec runtime + Module Federation Atiqul Islam · atiqulislam.dev

Reference architecture — design targets, not production measurements. Worked example: a Customer Success “account risk 360” screen over 7 of 3,000+ tables. Switch to Vertical 9:16 to screen-record.

TOGAF The eight ADM views behind this design