This article is adapted from our original publication in Towards AI
By Shanmugam Sudalimuthu
Featured May 10 2026
The rise of Large Language Models (LLMs) is reshaping how user interfaces are built. Instead of static, pre-designed screens, we are moving toward agent-driven interfaces that can generate and adapt UI in real time based on context. This paradigm is often referred to as Generative UI (GenUI), but the real architectural divide lies in how these interfaces are produced.
Today, two approaches dominate: code-first generation and contract-first systems.
Code-First vs Contract-First UI
In code-first systems, the LLM generates executable frontend code such as React components or JavaScript. This approach, used in tools like Vercel’s AI SDK, offers maximum flexibility. The model can produce any interface the framework supports.
However, this flexibility comes with trade-offs:
- higher security risk due to executable output
- framework lock-in (often React-specific)
- increased token usage from verbose code generation
- difficulty ensuring consistent structure in production
In contrast, contract-first systems treat the LLM as a planner rather than a coder. Instead of generating code, the model outputs structured JSON that references a predefined catalog of UI components.
This is the foundation of the Freesail SDK.
How Freesail Works
Freesail implements the Agent-to-User Interface (A2UI) protocol, where the AI never writes UI code directly. Instead, it selects components from a validated catalog and describes what should be rendered.
The system is built around three layers:
1. The Agent
The LLM-based agent decides what the interface should display. It interacts with Freesail through structured tools, discovering available components and updating UI state through controlled actions.
2. The Gateway
A validation layer sits between the agent and the frontend. It ensures every UI update conforms to a strict JSON schema. Invalid or unsafe outputs are rejected before reaching the browser, and the agent is prompted to correct itself.
3. The Frontend
The UI renderer simply consumes validated messages and maps them to native components. It does not trust the agent directly—only the gateway.
Why This Matters
This architecture introduces several key advantages:
1. Security by design
Instead of executing arbitrary code, the system only allows predefined UI components. This eliminates entire classes of injection and runtime risks.
2. Lower token usage
Because the agent works with structured components instead of raw code, UI generation is significantly more efficient.
3. Better scalability
A progressive catalog system allows the agent to load only the components it needs, rather than the entire UI schema.
4. Clear separation of concerns
The agent decides what, the gateway validates whether, and the frontend handles how.
A Shift in How We Build Interfaces
Traditional UI frameworks assume humans design interfaces and software executes them. Agent-driven UI reverses that relationship.
With Freesail, the interface becomes a dynamic contract between an AI system and a validated rendering layer. The result is a system that is more predictable than code generation, but still flexible enough for real-time adaptation.
Closing Thoughts
The industry is still early in this transition, but one direction is already clear: the future of UI is not just generated—it is governed.
Original publication:
Agent-driven UI — A Technical Analysis of the Freesail SDK on Towards AI Publication.
https://pub.towardsai.net/agent-driven-ui-a-technical-analysis-of-the-freesail-sdk-113aff5fac9c
Rewritten for Thendral AI