Introduction

The LLM outputs a structured JSON payload describing the UI it wants to render. The backend resolver validates data source references against an allowlist, injects real data, and hands the resolved payload to the <GenerativeUI /> mapper.

Components live in your project as local source code — downloaded via the CLI, owned by you, and fully customizable. No runtime bundles, no lock-in.

Install a GenUI component in your Next.js project:

npx genui add metric-card

Create a component map and render:

import { GenerativeUI } from "@syntave/runtime";
import { componentMap } from "@/components/genui";

<GenerativeUI
  payload={resolvedPayload}
  componentMap={componentMap}
/>