Betting on Generative UI + Flutter
Inside StringTheory’s Move to Flutter and the Launch of New Web Experience
Three weeks ago I previewed the Newsroom. The Newsroom is composed of three agents, and two of them have much more clear implementation patterns. The Information Agent scouts trending narratives — that’s search and ranking. The Data Analyst Agent walks the graph to separate spin from signal — identifying relevant context and patterns that contextualize narratives in facts and patterns of behavior. The third one is different. The Editorial Agent has to look at the shape of the investigation and how the pieces fit and design the page. Not write a summary. Compose a layout — timeline here, comparison panel there, loyalty footnote at the bottom — tailored to that specific story and telling it in the most intuitive way as possible. An example is available on the newsroom preview right now 👇🏾
https://theory.pqlabs.org/newsroom
How does an agent design consistent, interactive and quality investigative content? I built the example story together with Claude Code, but it took a few iterations and human-in-the-loop input. Up until a few weeks ago I was very unclear how to accomplish this capability autonomously. Then I watched this year’s Google I/O 2026 conference a few weeks ago and I realized there was already work being done in this area.
From returning text to returning an interface
For two years, “AI in the product” has meant one interaction: you ask, the model writes back a paragraph. Useful, but it’s a wall of text about a 50–47 vote when what you wanted was the timeline of how the vote happened. Generative UI is the next move: the model returns an interface. A timeline you can scrub. A fact card you can screenshot. Assembled at runtime to fit the story, not picked from a fixed set of page templates.
GenUI comes in roughly three flavors:
Controlled UI. Pre-built components populated with dynamic data. The agent fills in a card I already designed. Maximum consistency, minimum flexibility.
Declarative UI. The agent composes layouts from a schema — it picks which components, in what arrangement, but only from pieces that already exist. Flexibility with guardrails.
Open-ended UI. The agent writes raw HTML and CSS. This is the Wild West — the demos look incredible when it works, but you are at the mercy of the model and lose the consistency and reliability that production systems demand.
The naive version of the Newsroom — let the model write code, run the code — lives at the open-ended end, and that’s why the path forward was unclear without a human-in-the-loop. Ensuring consistency and reliable outputs seemed unlikely. GenUI allows us to play with these different levers to make certain components more controlled than others, for a predictable but dynamic UX.
The Protocol: Translating AI Thoughts into Interfaces
At the heart of a Generative UI system lies a fundamental separation between how an AI agent thinks and how it communicates with the user. To bridge this gap without risking a broken or ugly user experience, the system relies on a two-part, framework-agnostic protocol: A2UI and AGUI.
A2UI (AI-to-UI): The Blueprint
A2UI is an open-source declarative schema that essentially allows the AI to “speak UI”. Instead of trying to write complex code, the agent outputs structured data (JSON) describing exactly what to build and what state it should be in.
How it works: If a narrative requires a timeline, the AI doesn’t program one. Instead, it sends a structured message saying: “Instantiate a timeline component here, and populate it with these specific dates and descriptions.”
AGUI (Agent User Interaction): The Pipe
AGUI is the transport layer. If A2UI is the blueprint, AGUI is the pipeline responsible for streaming those interface updates and events from the agent to the user’s screen in real-time. This ensures that as the AI processes data, the user sees the interface build and update instantly.
The Golden Rule: Data, Not Code
The critical breakthrough that makes this architecture production-ready—rather than just a chaotic tech demo—comes down to a strict constraint: The agent sends data, never code.
The Guardrail: The AI cannot invent layouts out of thin air or inject custom scripts. It is entirely confined to a predefined widget catalog designed and pre-approved by the developer.
Inside the Catalog: If the agent requests a timeline or a comparison panel, the client application renders a secure, beautifully styled native component filled with the agent’s data.
Outside the Catalog: If the agent asks for something unauthorized or unsafe, the application ignores it completely.
By ensuring that the model proposes, but the client disposes, you maintain absolute security and brand consistency while still giving the AI the flexibility to assemble tailored layouts on the fly.
Enter Flutter
I spent days diving into the A2UI protocol and the mechanics of agentic design, looking for how to make these layouts come alive. As I consumed the various demos and technical walkthroughs from I/O, a pattern emerged: almost every implementation of GenUI was built in Flutter.
It’s not an accident. Flutter is Google’s UI toolkit, and the framework’s widget-based architecture is extremely popular when building multi-platform applications. Because Google maintains both the framework and is actively investing resources into GenUI, it has become the primary vessel for advancing GenUI research.
That discovery led me to look closer at what Flutter actually is. It’s a “Build Once, Run Anywhere” engine—a universal renderer that decouples UI from the underlying device. With a single codebase, any interface can reshape itself from a phone screen to a desktop research session effortlessly, allowing a consistent user experience cross-platform (web, iOS, android, desktop). Flutter 3.44 pushed this even further by decoupling core rendering from platform-specific libraries, meaning I can build bespoke, custom aesthetics without fighting against stock design systems. It is effectively a universal canvas.
Why the Newsroom is the perfect use case
The current mission for Generative UI is to dismantle the “wall of text” that has defined the chatbot era. It turns a standard model reply into a series of interactive components living directly in the chat window. Useful, but reactive—the agent renders a button or a card, and the transaction ends there. It’s an isolated widget in a larger conversation.
With the Newsroom, we’re aiming for something much more ambitious: building dynamic investigative pieces where the entire layout is assembled at runtime to fit the narrative. Because these stories are anchored in structured evidence from the Data Analyst Agent, the nature of the facts—voting records, financial flows, policy pivots—tells us exactly how they should be visualized. This maps cleanly to a widget catalog of specialized templates: roll-call timelines, comparison panels, bill text diffs. The agent doesn’t invent a layout from scratch; it looks at the verified data and picks the right structural primitive from the catalog to tell the story based on the common evidence patterns exposed by the Knowledge Graph.
When you pair this adaptive engine with our core personas—the “comment warrior” hunting for a receipt or the creator needing a screenshot-ready card—native performance and cross-platform usability becomes a hard requirement. Our users need a frictionless, high-velocity experience across both mobile and desktop. The legacy Nuxt web application couldn’t deliver the native-grade speed or cross-platform continuity required to make these layout shifts feel seamless on a phone. Moving to Flutter is a bet on driving multi-platform usage, particularly mobile, and leaning all into GenUI and Google’s Agent stack.
What’s coming in June
The new Flutter web app is officially live at theory.pqlabs.org. It’s faster, cleaner, and responsive across every device. For the rest of June, the focus is on three key milestones: exposing the campaign finance data already in our Knowledge Graph to show how donations impact decisions, shipping native iOS and Android apps for a true mobile experience, and pushing the Agentic Newsroom into production.
You can see a full tutorial of the mobile experience below 👇🏾
June turning out to be a crazy month #LGK #USMNT
– Pravin