The open standard
for Adaptive Frontend
Build interfaces that AI agents can dynamically reconfigure in real-time safely, deterministically, and beautifully.
Powered by modern standards
Software today looks the same for everyone.
That's a problem when every user has a different goal.
Rigid Layouts
Hardcoded interfaces force users into one-size-fits-all workflows that ignore context and intent.
Feature Bloat
Adding options for everyone means cluttering the UI for anyone. Complexity grows, but value doesn't.
Agent Blindness
AI tools can read data, but they can't natively reshape your application's UI in a safe, deterministic way.
Capabilities
Everything you need for adaptive interfaces.
A complete specification — from schema definitions to real-time rendering.
Adaptive Layouts
Define component surfaces once; let AI agents reconfigure them at runtime across any framework.
Validated Mutations
Every layout change passes a strict JSON Schema pipeline — zero hallucinations, zero runtime crashes.
Agent Protocol
A deterministic JSON API that any LLM agent can call to reshape interfaces without fragile screen-scraping.
Real-Time Updates
Layout configs stream over WebSocket for instant, flicker-free UI transitions as context changes.
React SDK
Drop-in withOUAS() wrapper. Keep your component library — just annotate what's adaptable.
Framework Agnostic
The spec is pure JSON. Renderers exist for React today, with Vue, Svelte, and native on the roadmap.
How it Works
From annotation to adaptation.
Three perspectives on the same powerful standard.
Standardized Annotations
Wrap your existing React components with withOUAS() to instantly expose them to AI agents. No rewrite required — just annotate what's adaptable.
- Type-safe schema definitions via Zod
- Automatic manifest generation
- Zero runtime overhead in production
// 1. Import the wrapper
import { withOUAS } from '@ouas/react';
// 2. Annotate your component
export const Sidebar = withOUAS(
BaseSidebar,
{
id: 'main-sidebar',
schema: {
collapsed: { type: 'boolean' },
items: { type: 'array' }
}
}
);