Open-JSON-UI Simple UI for LLMs

The Problem It Solves

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.

Where Open-JSON-UI Shows Up

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.

What It Looks Like

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.

How to Apply This

• • Use Open-JSON-UI when you need an LLM to generate UI specifications reliably—it's designed for how language models actually work
• • Pair it with OpenAI Structured Outputs to guarantee valid JSON schema compliance—98–100% reliability
• • For production applications, set up the SimpleA2UI translation pipeline: generate with Open-JSON-UI, render with A2UI
• • Start with simple content types (cards, lists, text) before moving to forms and charts
• • CopilotKit offers first-class support with automatic A2UI translation; the Vercel AI SDK also provides generative UI capabilities that complement Open-JSON-UI
• • React and Next.js have the strongest renderer support today, primarily through CopilotKit's integration
• • Compare token costs: Open-JSON-UI uses 30–50% fewer tokens than A2UI for the same UI, which adds up at scale

What to Watch Out For