A UI format so simple that LLMs generate it reliably, every time.
Getting AI to generate valid, useful UI specifications has been unreliable. Complex formats with deep nesting and strict syntax trip up language models. Open-JSON-UI takes the opposite approach—a format designed for how LLMs actually work.
Deeply nested component trees, explicit layout rules, verbose attributes—models frequently get the structure wrong, miss required fields, or produce invalid output. The deeper the nesting, the more likely the model loses track of where it is.
Complex specs mean more tokens consumed and more errors generated. You're paying more for less reliable results.
Complex specs = more tokens = more errors. 60–80% compliance at best.
Simple component types—card, form, list, text, table, chart. No deep nesting. No explicit layout rules. Just declare the content and let the renderer handle presentation.
98–100% generation reliability with OpenAI Structured Outputs. 30–50% fewer tokens than equivalent A2UI specs. The format matches how LLMs naturally think about content.
Flat format. High reliability. Fewer tokens. 98–100% compliance.
response_format constraint (Structured Outputs). This tells the model exactly what shape its output must take."type": "form" becomes your app's form component. A "type": "chart" becomes your chart library. Your styling, your design system, automatically applied.Open-JSON-UI is the go-to format whenever you need an LLM to generate UI reliably. Here's where it makes the biggest difference.
Instead of returning plain text, your chatbot generates cards, forms, and lists that render as interactive UI. Users get a form to fill out instead of a back-and-forth conversation.
Ask your AI to "show me sales this quarter" and it generates a dashboard with charts, tables, and summary cards—all as structured JSON that your app renders natively.
AI generates context-aware forms based on user needs. Need to file an expense? The agent generates a form with the right fields. Need to submit a bug report? Different form, same format.
The chart component type lets AI generate data visualizations as structured specifications. Bar charts, line graphs, pie charts—all described in a simple JSON format the renderer interprets.
When you need quick UI mockups from an AI, Open-JSON-UI's simplicity and low token cost make it ideal. Generate, iterate, and refine UI concepts at minimal cost.
Generate with Open-JSON-UI for speed and reliability, then translate to A2UI for production rendering. The SimpleA2UI layer bridges the two—best of both worlds.
Think of it like giving someone a simple form to fill out instead of asking them to write HTML from scratch. The simpler the structure, the more reliable the output.
LLMs are excellent with flat structures but struggle with deep nesting. Open-JSON-UI is designed for this reality. A typical UI component takes 50–80 tokens vs 150–250 tokens for the same thing in A2UI—30–50% savings on every generation.
When paired with OpenAI's Structured Outputs, Open-JSON-UI achieves 98–100% schema compliance. The LLM is constrained to produce valid JSON that matches the schema exactly—no hallucinated properties, no missing fields.
For simpler applications, Open-JSON-UI works on its own—your client renders the JSON directly using its own component library. For production applications that need precise cross-platform rendering, a translation layer called SimpleA2UI can convert Open-JSON-UI to A2UI automatically.
Open-JSON-UI is optimized for the reality of LLM generation. Simple format in, reliable UI out. Use it standalone for straightforward apps, or translate to A2UI when you need production-grade cross-platform rendering.
An Open-JSON-UI response is a flat JSON structure. Here's an agent generating a contact form:
{
"type": "screen",
"content": [
{
"type": "card",
"properties": {
"title": "Contact Us",
"content": {
"type": "text",
"value": "We'll get back to you within 24 hours."
}
}
},
{
"type": "form",
"properties": {
"fields": [
{ "name": "email", "type": "email", "label": "Email Address" },
{ "name": "message", "type": "textarea", "label": "Your Message" }
],
"submitLabel": "Send"
}
}
]
}
Flat structure, no deep nesting, no layout rules. The agent describes content; the renderer decides how to display it. With OpenAI Structured Outputs, this JSON is validated against the schema automatically—achieving 98–100% compliance in practice.
Here's how you generate it with OpenAI's Python SDK:
from openai import OpenAI
from pydantic import BaseModel
from typing import List
class UIContent(BaseModel):
type: str
properties: dict
class OpenJSONUI(BaseModel):
type: str = "screen"
content: List[UIContent]
client = OpenAI()
response = client.beta.chat.completions.parse(
model="gpt-4o",
messages=[
{"role": "system", "content": "Generate UI for the user's request"},
{"role": "user", "content": "Show me a contact form"}
],
response_format=OpenJSONUI
)
ui_spec = response.choices[0].message.parsed
The response_format parameter constrains the model to produce valid Open-JSON-UI. TypeScript works the same way using Zod schemas.