Skip to main content

​
Generative UI

Generative UI is a new way of building applications where the interface is created dynamically by AI, instead of being hand-coded in advance. In a traditional app, developers design screens and flows ahead of time. With Generative UI, the application can adapt its interface on the fly based on context, user intent, or data. This shift means that instead of static dashboards or rigid forms, users interact with interfaces that are generated in real time, tailored to the task at hand.

​
Generative UI API

The Generative UI API is what makes this practical for developers. Instead of returning plain text or fragile JSON from an LLM, the API outputs a typed UI specification that can be rendered directly into components.
  • It acts as a bridge between models and frontends.
  • It ensures that AI-generated UIs are valid, consistent, and interactive.
  • It gives you a standard layer for plugging into any application surface.
With a Generative UI API, you don’t need to hand-craft glue code or anticipate every schema change — the API handles that translation and lets you focus on the experience.

​
C1 by Thesys

C1 by Thesys is a production-ready Generative UI API that provides both an OpenAI-compatible model endpoint and a runtime React library. This allows developers to focus on user experience and data, instead of dealing with low-level details like validating JSON specs or managing model quirks.

​
C1 DSL

C1 responses are returned as a domain-specific language (DSL) that describes UI components. This DSL is declarative - similar to JSX or JSON - but optimized for AI-to-UI translation. Example DSL output for a line chart: 
{
  "type": "chart",
  "variant": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "values": [120, 200, 150]
  }
}
This spec is rendered by the React SDK into live UI at runtime on the end-user’s browser.

​
Components

C1 includes a library of production-ready UI primitives:
  • Charts - line, bar, pie, scatter, etc.
  • Forms - input fields, dropdowns, checkboxes, multi-step flows.
  • Tables - filterable, sortable, paginated.
  • Cards & Layouts - for displaying information or grouping responses.
  • Actions - buttons, links, triggers bound to custom functions.
  • Custom Components - allows you to extend C1 generations with your own special purpose components like Weather Display, Flight Seat booking, etc.
These can be combined into rich dashboards, conversational agents or multi-step workflows.

​
Streaming

Just like tokens stream in a chatbot, C1 can stream UI chunks progressively. This means charts, forms, or text elements appear in real time as the model generates them - keeping the interaction fast and natural and dramatically reducing time to interactivity. Streaming Guide >

​
Frontend Actions

Generative UI is not just about rendering. UIs are interactive:
  • Forms & Inputs → capture user data directly.
  • Chained Actions → trigger API calls and update UI (e.g. fetch stock ticker → render chart).
  • Custom Actions → bind buttons to your own functions (e.g. “Send email”, “Open URL”, “Trigger workflow”).
Learn more here >

​
React SDK / Generative UI Runtime

Thesys React SDK is a React library runtime that converts C1 DSL into live interactive micro-frontends. It exposes two high level primitives.
  • <C1Component> → renders C1-generated UI blocks into any app surface.
  • <C1Chat> → full chat experience with history, roles, and input, which internally renders <C1Component> for each message.
Most of the concepts explained in this doc apply equally to both. The main difference is the wrapper and props, not the underlying DSL.