Skip to documentation content
|

Generative UI

Turn model output into React interfaces with a local parser, component library, streaming renderer, and chat shell.

Generative UI lets a model choose the content and structure of an interface from components you allow. The model returns a text program in Honest AI Lang. Honest AI parses that program and renders it with Honest AI and Honest UI components.

For example, a response can contain a chart, a form, or a set of tabs instead of only a paragraph. You control the available components, the data they can request, and what happens when someone acts on the result.

Try it locally

Choose Layout, Form, Chart, or Tabs. Edit the source to change the rendered result. Replay stream sends the example to the renderer a little at a time so you can see how partial output behaves.

generative-ui-demo

This playground runs locally. It does not call a model. The Form example validates the email field and displays its action below the preview; it does not submit the email anywhere.

Explore more examples

The examples gallery includes saved state, query loading and retry, a custom delivery component, and parser diagnostics. Each demo includes the React source and runs without a model service.

Use Language to learn the program format, State and forms to keep an interface interactive, and Data and tools to connect permitted reads and writes.

Build your first integration
  1. Install the renderer and its styles.
  2. Render a fixed program to check your setup before connecting a model.
  3. Generate a model prompt from the same library used by your renderer.
  4. Stream the response into that renderer, or connect the chat shell if you need conversation history and a composer.

Choose what to install
Your taskUse
Render a generated form, chart, or layout inside your appRenderer with honestLibrary
Display generated interfaces in a conversationGenerativeChat, which uses honestChatLibrary by default
Give the model your allowed components and check its outputThe JSON library spec and local server helpers
Add your own product componentExtend the component library

Both libraries use a Stack root. The application Stack is a flex container; the chat Stack is a plain vertical list inside a Markdown reply. Keep the model prompt, server spec, and client library matched; a program generated for one library may contain components the other does not accept.

What runs here

The parser, React renderer, form state, chat state, and transport adapters are local source. Generative UI has no upstream package dependency or default vendor service. Its controls share Honest UI's components and theme; Markdown, code, records, and the conversation shell reuse Honest AI.

Your application supplies the model endpoint, credentials, persistent storage, and tool implementations. Rendering a generated button does not save data or grant permission. Its action handler decides what to do, and your server authorizes any operation on protected data.

The renderer interprets the registered language; it does not evaluate generated JavaScript. Optional server repair calls only the callback you supply. The installed source retains its required MIT copyright and license notice.