> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Generative UI

> 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="https://mintcdn.com/skybridge-alpic/grUqUzADywb2nWSK/images/showcase-generative-ui.png?fit=max&auto=format&n=grUqUzADywb2nWSK&q=85&s=c9a520d2a2a68a6d0e054a841e72db96" alt="Generative UI showcase" style={{ width: "100%", maxWidth: "960px", borderRadius: "12px" }} width="798" height="470" data-path="images/showcase-generative-ui.png" />

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