Introduction to OUAS
The specification for building safe, deterministic, and AI-native user interfaces by decoupling UI implementation from UI configuration.
The Problem
Today's software interfaces are inherently rigid. They are statically built to look identical for a power user as they do for a complete beginner. While Large Language Models (LLMs) and AI agents have become incredibly adept at understanding user intent, they lack a safe, standardized pathway to interact with the underlying component trees of the applications they assist with.
Historically, AI UI generation has relied on two flawed approaches:
- Generating raw code (React/Vue): Slow, unsafe, requires a full build/eval pipeline, and prone to hallucinations.
- Hacking the DOM: Agents attempting to query and mutate existing DOM nodes (e.g.,
document.querySelector) fail the moment a class name or layout changes.
- Agents hallucinate non-existent React components
- Evaluating raw code requires unsafe
eval() - DOM hacking breaks instantly on UI updates
- No standard validation or safety guardrails
- Agents interact with a strictly typed JSON Data Layer
- 100% deterministic rendering controlled by the host app
- Layouts are strongly validated before being applied
- Impossible for the AI to execute malicious code
The Solution: Decoupling
The OpenUI Adaptive Standard (OUAS) solves this problem by decoupling the UI implementation from the UI configuration.
Instead of an agent attempting to inject raw React code or manipulate the DOM, developers use OUAS to expose a strictly typed, JSON-serializable schema (a "Manifest") of what is allowed to change. The AI agent only ever interacts with this strictly validated JSON layout configuration.
This means:
- The host application handles the actual rendering (using your existing design system).
- The AI handles the logical arrangement and state of those components via a data layer.
The Architecture & Packages
OUAS is not a monolithic framework. It is a lightweight, modular specification broken down into four distinct packages to integrate seamlessly into your existing stack.
@ouas/cli
Build-time validation and manifest generation. Scans your project for OUAS annotations and builds strict schemas.
@ouas/react
The React SDK containing the withOUAS() HOC. Use it to cleanly annotate and expose components to agents.
@ouas/renderer
The secure UI engine. Takes validated JSON payloads from agents and safely renders the corresponding component tree.
@ouas/agent
Helper library for AI agents. Provides tooling to easily construct, validate, and send valid layout configs.
Core Philosophy
When designing OUAS, we adhered to three non-negotiable tenets to ensure it is production-ready for enterprise applications.
Safety First
AI agents cannot inject arbitrary code. They can only return structured JSON constrained by the Manifest, guaranteeing zero malicious scripts or XSS vulnerabilities.
Deterministic UI
A given layout config will always produce the exact same UI structure. No more broken layouts, hallucinated class names, or missing tags.
Developer Ergonomics
Developers don't need to learn a massive new framework or language. They just annotate their existing components using simple HOCs.
Was this helpful?