
Links
Try the demo
Launch the live widget experience.
View source on GitHub
Browse the full example code.
How it works
The MCP server builds a json-render catalog from@json-render/shadcn and embeds the auto-generated component documentation in the render tool description. When the LLM calls the tool, it passes a { root, elements } spec as input. The server validates the spec against the catalog, auto-fixes common mistakes, and returns it to the widget as structured content.
The widget renders the spec with @json-render/react’s Renderer and JSONUIProvider, using the pre-built shadcn component registry.
Skybridge APIs used
Third-party integrations
@json-render/core— catalog, validation, prompt generation@json-render/react— Renderer, JSONUIProvider, defineRegistry@json-render/shadcn— 36 pre-built shadcn/ui components