Gen UI Demo

Generative UI without generating code

Two Claude tool-use calls in series. The first selects components from a small web-component library and fills them with content; the second arranges them into a layout. A renderer materializes the result deterministically. The model never writes code.

Or try:

How it works

  1. 1

    Component selection

    The first model call receives a tool schema describing the available components and their props. It returns structured tool_use blocks that name components and fill them with content. No JSX, no HTML — typed JSON.

  2. 2

    Layout composition

    A second model call receives the chosen components and a layout-tool schema. It returns a nested layout object that groups components into rows, columns, and stacks. Constrained to a small grammar; no free-form layout code.

  3. 3

    Deterministic render

    The application code walks the layout tree, instantiates each web component, and renders. Standards-based custom elements mean the same components work in Vue, Angular, AEM, or vanilla HTML.