---
title: Generative UI
description: LLM-generated dynamic UIs with json-render and shadcn/ui components.
---

Generative UI lets the LLM compose rich interfaces on the fly using [json-render](https://json-render.dev) and 36 pre-built shadcn/ui components. The AI generates a json-render spec, the server validates it against the component catalog, and the view renders it instantly.

<img
  src="/images/showcase-generative-ui.png"
  alt="Generative UI showcase"
  style={{ width: "100%", maxWidth: "960px", borderRadius: "12px" }}
/>

## Links

<CardGroup cols={2}>
  <Card
    title="Try the demo"
    icon="play"
    href="https://generative-ui.skybridge.tech/try"
  >
    Launch the live view experience.
  </Card>
  <Card
    title="View source on GitHub"
    icon="github"
    href="https://github.com/alpic-ai/skybridge/tree/main/examples/generative-ui"
  >
    Browse the full example code.
  </Card>
</CardGroup>

## 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 view as structured content.

The view renders the spec with `@json-render/react`'s `Renderer` and `JSONUIProvider`, using the pre-built shadcn component registry.

## Skybridge APIs used

- [`useToolInfo`](/api-reference/use-tool-info)

## Third-party integrations

- [`@json-render/core`](https://github.com/vercel-labs/json-render) — catalog, validation, prompt generation
- [`@json-render/react`](https://github.com/vercel-labs/json-render) — Renderer, JSONUIProvider, defineRegistry
- [`@json-render/shadcn`](https://github.com/vercel-labs/json-render) — 36 pre-built shadcn/ui components
