JSONX

Generative UI as a validated data contract

JSONX turns AI responses into live interfaces.

Ask for an outcome. The model returns a safe JSONX payload. Your app renders it through approved React components while the host controls safety, design, and behavior.

Try the live demoInstall the skillsRead the JXM spec
Installnpm i jsonx react react-dom
Prompt

Create a support triage screen for a refund request.

Validated JSONX
{
  "component": "DemoShell",
  "props": { "title": "Support Triage" },
  "children": [
    { "component": "MetricRow", "props": { "items": [
      { "label": "Open cases", "value": "18" },
      { "label": "Refund risk", "value": "Medium" }
    ] } }
  ]
}
Rendered UI

Support Triage

Open cases 18Refund risk Medium

The middle path

Generated React creates software. JSONX creates controlled interface output.

Text answers are limited when users need forms, dashboards, triage views, approval flows, and task-specific controls. Generated source code is useful for durable apps, but it is too slow and risky for every response. JSONX keeps runtime UI as data that can be validated, logged, replayed, and audited.

Generated React app

  • Strong fit for durable product surfaces.
  • Requires compile, review, build, and deploy.
  • Governance depends on source review.

JSONX dynamic output

  • Strong fit for one-off task responses.
  • Renders when the renderer is already installed.
  • Governed by schemas, allowlists, and payload logs.

How it works

Prompt, validate, render, act.

1

Ask for an interface

The user asks for a task-specific view.

2

Return JSONX/JXM

The model returns one JSON object using approved components.

3

Validate the contract

The host checks component names, props, children, and action names.

4

Render safely

JSONX renders through the trusted registry. Buttons call local named actions.

Live browser demo

Turn a prompt into a rendered interface.

Start with a sample, paste a JSONX payload, or connect your own model endpoint to see structured responses render as cards, tables, actions, quizzes, and polls instead of plain text.

Agent skills

Install JSONX skills without mixing core package help and generative UI.

Use the core JSONX skill for package work. Add the generative UI skill when you want agents to produce validated interface payloads. Codex, Claude Code, and OpenCode can install either family from the same repo with one installer command.

Plugins and hosted renderer

Use plugins for agent workflow and a hosted app for inline UI.

Core JSONX and generative UI are separate plugin packages for Codex and Claude Code. The Apps SDK renderer provides the ChatGPT inline UI path. Optional animation belongs in the renderer, not in model output or the core npm package.

Codex plugins

Install jsonx-codex-plugin for package work or jsonx-generative-ui-plugin for generated UI, validator fixtures, app wiring templates, and the repo-local Codex marketplace flow.

View core plugin | View generative UI plugin

Claude Code plugins

Install claude-jsonx-plugin for package help or claude-jsonx-generative-ui-plugin for generated UI handoff files.

View core plugin | View generative UI plugin

Renderer app

Provides the stateless MCP tool and iframe renderer for ChatGPT Apps SDK UI. The hosted endpoint is live at https://jsonx-renderer-app.netlify.app/mcp. GSAP motion is available as a renderer-owned option.

View app source

Local preview

Terminal and IDE agents can write .jsonx/ui/*.json files using the same contract. VS Code or a local preview can render those files without changing the root JSONX npm package.

View VS Code renderer

Review kit

Submission packages, listing drafts, and evidence are published together.

The current kit gives reviewers one place to inspect the Codex plugins, Claude Code plugins, ChatGPT Apps renderer metadata, screenshots, prompt evidence, package-boundary checks, and remaining manual gates.

Submission queue

Use the queue as the handoff for package review. It lists each submission, required manual checks, public evidence URLs, receipt fields, and recorder commands to run after marketplace forms are sent.

Read queueQueue JSONOpenAI core packetOpenAI UI packetClaude core packetClaude UI packet

Artifact evidence

The manifest and full-objective audit map generated packages, app metadata, screenshots, prompt cases, hosted MCP checks, browser demo checks, issue tracking with requirement status, gate access, and npm package-boundary evidence.

Artifact manifestObjective auditIssue evidenceSource docsGate accessReadiness checklistAudit checker

Store listing drafts

Review the listing copy for the core JSONX plugin and the generative UI plugin before submitting to the OpenAI/Codex and Claude Code channels.

OpenAI coreOpenAI generative UIClaude coreClaude generative UI

External receipts

After app IDs, ChatGPT developer-mode transcripts, Claude Code smoke results, policy review, or marketplace receipts exist, record them with the controlled CLI and rerun the checkers.

External gate runbookReceipt recorderGate checkerPublic URL checker

VS Code renderer

Render agent-generated UI inside the IDE.

The VS Code extension watches .jsonx/ui/*.json files and opens a webview for safe JSONX payloads. Codex, Claude Code, or a terminal agent can write the same handoff file when they are connected to the workspace.

Agent handoff path

Write generated UI to .jsonx/ui/<short-purpose>.json using the jsonx.generative-ui.v1 envelope. The extension validates the payload before rendering quiz controls, slider polls, review panels, tables, checklists, and action panels.

View the VS Code extension source.

Safe generated-output profile

The public demo does not render arbitrary JSONX.

Allowed output is limited to known demo components, approved props, plain text children, arrays of children, quiz questions, slider polls, choice lists, and named local actions. Dangerous evaluation props, injected components, raw HTML, inline event handler strings, unknown props, unknown components, arbitrary CSS, and stored API keys are blocked.