4d4bd19
CopilotKitDocs
  • Docs
  • Integrations
  • Reference
  • Free Developer Access
Get Started
QuickstartCoding Agents
Concepts
ArchitectureGenerative UI OverviewOSS vs Enterprise
Agentic Protocols
OverviewAG-UIAG-UI MiddlewareMCPA2A
Build Chat UIs
Prebuilt Components
CopilotChatCopilotSidebarCopilotPopup
Custom Look and Feel
CSS CustomizationSlots (Subcomponents)Fully Headless UIReasoning Messages
Multimodal AttachmentsVoice
Build Generative UI
Controlled
Tool-based Generative UITool RenderingState RenderingReasoning
Your Components
Display ComponentsInteractive Components
Declarative
A2UIDynamic Schema A2UIFixed Schema A2UI
Open-Ended
MCP Apps
Adding Agent Powers
Frontend ToolsShared State
Human-in-the-Loop
HITL OverviewPausing the Agent for InputHeadless Interrupts
Sub-AgentsAgent ConfigProgrammatic Control
Agents & Backends
Built-in Agent
Backend
Copilot RuntimeFactory ModeAG-UI
Runtime Server AdapterAuthentication
LangGraph (Python)
Your Components
Display-onlyInteractiveInterrupt-based
Shared state
Reading agent stateWriting agent stateInput/Output SchemasState streaming
ReadablesInterruptsConfigurableSubgraphsDeep Agents
Advanced
Disabling state streamingManually emitting messagesExiting the agent loop
Persistence
Loading Agent StateThreadsMessage Persistence
Videos
Video: Research Canvas
Error Debugging & ObservabilityCommon LangGraph issues
Troubleshooting Copilots
Migrate to AG-UI
Observe & Operate
InspectorVS Code Extension
Troubleshooting
Common Copilot IssuesError Debugging & ObservabilityDebug ModeAG-UI Event InspectorHook ExplorerError Observability Connectors
Enterprise
CopilotKit PremiumHow the Enterprise Intelligence Platform WorksHow Threads & Persistence WorkObservabilitySelf-Hosting IntelligenceThreads
Deploy
AWS AgentCore
What's New
Full MCP Apps SupportLangGraph Deep Agents in CopilotKitA2UI Launches with full AG-UI SupportCopilotKit v1.50Generative UI Spec SupportA2A and MCP Handshake
Migrate
Migrate to V2Migrate to 1.8.2
Other
Contributing
Code ContributionsDocumentation Contributions
Anonymous Telemetry
LangGraph (Python)Build Generative UIOpen-JSON-UI

Open-JSON-UI

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.

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

FeatureOpen-JSON-UIA2UIMCP Apps
FormatJSONJSONLHTML/Iframe
StreamingLimitedNativeLimited
Type SafetyStrongModerateFlexible
PlatformAgnosticAgnosticWeb-focused

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
On this page
What is Open-JSON-UI?Why Open-JSON-UI?OpenAI Ecosystem IntegrationDeclarative and StructuredIndustry StandardUsing Open-JSON-UI with CopilotKitKey Features1. Structured Component Model2. Type Safety3. OpenAI Model OptimizationComparison with Other SpecsLearn More