---
title: "Open-JSON-UI"
icon: "lucide/FileJson"
description: "OpenAI's open standardization of declarative Generative UI"
---

# 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.

```typescript
// 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:

```json
{
  "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:

```typescript
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

| Feature         | Open-JSON-UI | A2UI     | MCP Apps    |
| --------------- | ------------ | -------- | ----------- |
| **Format**      | JSON         | JSONL    | HTML/Iframe |
| **Streaming**   | Limited      | Native   | Limited     |
| **Type Safety** | Strong       | Moderate | Flexible    |
| **Platform**    | Agnostic     | Agnostic | Web-focused |

## Learn More

- [Generative UI Specs Overview](/generative-ui) - Compare all supported specifications
- [Generative UI Guide](/generative-ui/your-components/display-only) - Build with Generative UI in CopilotKit
- [AG-UI Protocol](/ag-ui-protocol) - Learn about the protocol that supports Open-JSON-UI
- [A2UI](/generative-ui/a2ui) - Google's streaming-first alternative
- [MCP Apps](/generative-ui/mcp-apps) - Iframe-based Generative UI extending MCP