Open-JSON-UI - OpenAI's Generative UI Standard

Open-JSON-UI is an open standardization of OpenAI's internal declarative Generative UI schema, designed to enable agents to generate structured user interfaces.

What is Open-JSON-UI?

Open-JSON-UI is OpenAI's contribution to the generative UI ecosystem. It provides:

• Declarative schema - JSON-based component definitions
• Standardized structure - Common patterns for UI generation
• Type safety - Well-defined component types and properties
• OpenAI integration - Native support in OpenAI's ecosystem

Why Open-JSON-UI?

OpenAI Ecosystem Integration

As the standardization of OpenAI's internal schema, Open-JSON-UI works seamlessly with OpenAI's tools and models, providing a familiar interface for developers already using OpenAI services.

Declarative and Structured

The specification provides clear, type-safe definitions for UI components, making it easier to validate and render agent-generated interfaces.

Industry Standard

Backed by OpenAI, this specification is becoming an industry standard for declarative generative UI, ensuring long-term support and community adoption.

Using Open-JSON-UI with CopilotKit

CopilotKit's AG-UI protocol natively supports Open-JSON-UI alongside other generative UI specifications.

// Example: Agent returns Open-JSON-UI specification
{
  type: "open-json-ui",
  spec: {
    components: [
      {
        type: "card",
        properties: {
          title: "Data Visualization",
          content: {...}
        }
      }
    ]
  }
}

Key Features

1. Structured Component Model

Open-JSON-UI provides a well-defined schema for component definitions:

{
  "version": "1.0",
  "components": [
    {
      "id": "main-container",
      "type": "container",
      "children": [
        {
          "type": "text",
          "content": "Hello World",
          "style": {
            "fontSize": "large",
            "color": "primary"
          }
        }
      ]
    }
  ]
}

2. Type Safety

Strong typing ensures that generated UI components are valid and can be properly rendered:

interface OpenJsonUIComponent {
  id?: string;
  type: ComponentType;
  properties?: Record<string, any>;
  children?: OpenJsonUIComponent[];
  style?: StyleProperties;
}

3. OpenAI Model Optimization

The schema is designed to be easily generated by OpenAI's language models, with patterns that align with their training.

Comparison with Other Specs

Learn More

• Generative UI Specs Overview - Compare all supported specifications
• Generative UI Guide - Build with Generative UI in CopilotKit
• AG-UI Protocol - Learn about the protocol that supports Open-JSON-UI
• A2UI - Google's streaming-first alternative
• MCP Apps - Iframe-based Generative UI extending MCP