This article has been co-penned by Anmol Baranwal and Rabi Shanker Guha. Rabi is the co-founder and CEO of Thesys, an AI startup pioneering Generative UI. With a strong engineering background, he previously served as Head of Engineering, India at DevRev, where he scaled the team to 150 engineers, and has held key roles at Google and Nutanix. Rabi also co-founded Payzie, which was acquired by Google. You can find him online on LinkedIn or Twitter.

In our last posts we covered What is Generative UI and the architectural decisions behind building the First Generative UI API.

Generative UI (GenUI) is a new interface paradigm where rather than LLMs interacting with humans through chat bubbles, the interface itself is generated, adapted and composed at runtime based on user intent. It enables hyper-customised and personalised interfaces. At Thesys, rather than thinking of GenUI as an LLM problem to solve, we interpret it as an infrastructure in itself - a structured, token-efficient representation that achieves interactive, accessible user interfaces. Our previous blog on Generative UI covers this in-depth.

This blog explains what Generative UI means for us, the tools you’ll need to get started, and how the pieces fit together. We will lay out an implementation path by using Thesys C1 - the world’s first Generative UI (GenUI) API, and our GenUI SDK.

Getting Started with Generative UI

Generative UI can be achieved as a runtime system that uses LLMs to generate structured, interactive interfaces in response to the user’s intent. At thesys, we want generative UI to be accessible to all. With this goal in mind, we came up with a Generative UI developer experience which is minimal and complete in itself. It comprises of two main components:

The backend: C1 API

The C1 API is the backbone of how we achieve generative UI at Thesys. It is built on top of the 4 core concepts that make a GenUI system work at scale, as described in our C1 technical report: speed of inference, interactivity, responsiveness, cohesiveness. The C1 API is an OpenAI compatible API that works on a defined Domain-Specific Language (DSL) to return a structured representation of the UI that is to be rendered. The API, just like the OpenAI API, accepts system and user messages to tailor each response to be in-line with the user’s intent and expectation. The response is returned as the DSL, which is handled by our other component - the React GenUI SDK.

The frontend: GenUI SDK

The GenUI SDK is a React SDK that consumes the C1 API’s UI specification and renders interactive components as described in the spec. It handles streaming and partial rendering, and provides event handlers and accessibility defaults. The core primitives of the GenUI SDK are the <C1Component> for general interfaces, and <C1Chat> for chat-based interfaces. Our existing blog on internal workings of C1 covers this in greater depth.

These two components together - C1 + GenUI SDK, provide a fast path to achieving production level Generative UI.

Thesys Generative UI Pipeline

Thesys Generative UI can be thought of as a middleware for AI applications - it resides between your static application and the LLM. It is a way to give life to your LLM responses, by changing them from text-only to a rich UI which is highly interactive, responsive and adaptive. It is as simple as changing the baseURL for your LLM client to the Thesys C1 API endpoint, and adding a GenUI SDK component in your frontend.

C1 API supports system prompts and tool calling. This allows users to immensely customize their C1 calls and behaviour with system prompts, and enable real-time data fetching, data manipulation, database management and much more through exposed tool calls to the C1 endpoint. It works exactly how you would expect OpenAI compatible LLM APIs to work - except you get a dynamically generated user interface instead of text responses. More on this in the following section.

The components that C1 selects are intent-driven: data queries become charts/tables, user customizations become inputs/selectors/forms, and the classic LLM text-heavy blocks turn into aesthetically pleasing User Interfaces with a refined UX and a new standard to how LLMs respond.

Integrating Thesys C1 API and GenUI SDK

Broadly, there are 2 ways developers can integrate our C1 API and the GenUI SDK to enable generative UI for their applications. C1 is fully compatible with the OpenAI SDK to make this step as easy as possible, using the Thesys baseURL and C1 model. A full list of supported models can be found in the Thesys Documentation.
baseURL: https://api.thesys.dev/v1/embed Model: c1/anthropic/claude-sonnet-4/v-20250617

UI-First - Replacing your LLM call with Thesys C1 API

Since C1 is powered by and supports popular LLMs from Anthropic and OpenAI, one can send prompts directly to C1 through the OpenAI client. This returns the UI specification directly in the DSL using any OpenAI Client (JS or Python SDK) with the standard client.chat.completions.create({...}), and can be rendered on the application’s frontend with the GenUI SDK.

C1OpenAIClient = new OpenAI({
  apiKey: env.THESYS_API_KEY,
  baseURL: "https://api.thesys.dev/v1/embed",
})

C1OpenAIClient.chat.completions.create({
  model: "c1/anthropic/claude-sonnet-4/v-20250617",
  messages: [...],
});

Layered UI Generation - Add C1 API call to your existing LLM Flow

For an existing LLM pipeline, one can take its output and pass it to C1 as a second step just to generate a visual layout. This adds a richer UI on top of existing flows without changing the core logic, and then ties with the GenUI SDK.

Using the GenUI SDK in your Frontend

Once you receive the UI spec from C1, the GenUI SDK handles the rendering on the frontend. This SDK is a React framework (built on Crayon’s component library) that reads the Domain Specific Language (DSL)-based UI specification and maps that to visual components on your frontend in realtime. The following snippet is an example of how easy it is to integrate the GenUI SDK in your existing code:

import { C1Component, ThemeProvider } from "@thesys/genui-sdk";

const App = () => {
  const response = await fetch("<your-backend-url>");
  return (
    <ThemeProvider>
      <C1Component c1Response={response.text()} />
    </ThemeProvider>
  );
};

To know more, one can refer to the Thesys Documentation.

Code-Along: A step-by-step guide to building Generative UI using Thesys

In this section, we will be covering the complete process on how to use Thesys in an application. For this code walkthrough, we will be using Next.js. To keep things practical, we will build a working form-based assistant using C1 and the Thesys GenUI SDK.

What we will be building:

A prompt-driven e-commerce store where users can request actions like:
- “I want to order a scarf”
- “Show me hats in inventory”
The C1 API + GenUI SDK then generates the UI. We will primarily be using Forms through C1 to handle user actions, which will be generated along with many other components like product catalog, all at runtime.
Form data and user action is submitted back to the assistant through defined tools, and connects to the backend.

Step 1: Create a Next.js application and get API key

We will be integrating the Thesys C1 API and GenUI SDK into a next.js application from scratch. If you don't already have a Next.js application, you can create it using the following command:

npx create-next-app@latest thesys-demo

Here is the project structure that we are going to follow:

You will need to create a new API key from the C1 Console and set it as an environment variable. Add this API key to the .env file using the following convention:

THESYS_API_KEY=<your-api-key>

Step 2: Render the Chat UI on the frontend

Now that we have the fundamentals ready, we will need a basic chat interface where the UI is generated by prompts. We could use the <C1Component/> , which just needs the raw JSON/text from the C1 API. However, since we are making a chat-based app, it's recommended to use <C1Chat> component as it supports message streams for a complete chat experience.

The following is the code for the file src/app/page.tsx:

'use client'

import '@crayonai/react-ui/styles/index.css'
import { C1Chat } from '@thesysai/genui-sdk'

export default function Home() {
  return <C1Chat theme={{ mode: 'dark' }} apiUrl="/api/chat" />
}

In this snippet, we are achieving the following:

Using the <C1Chat /> component to render the full chat UI.
apiUrl points to the backend route that will handle prompt submission.

That's it! The <C1Chat /> component is complete in itself to handle the entire chat UI by itself - including chat threads, multiple chat thread management, text inputs, rendering the UI generated by the C1 API, and much more. Find more details at Thesys C1 Documentation - Chat Component.

Step 3: In-Memory Message Store

Form data will be submitted back to the assistant through defined tools. We will be building custom tools like createOrder, getInventory, etc. But first, in order to process form data and maintain conversation context, we will start by creating an in-memory message store. This will help us store the assistant’s messages and user chat history in a per-thread manner.

Start by installing the OpenAI package. It's the official Node.js SDK for interacting with OpenAI's APIs (like GPT-4 or Thesys C1, which is OpenAI-compatible).

npm install openai

Next, create a new file at src/app/api/chat/messageStore.ts with the following code:

import OpenAI from 'openai'

export type DBMessage = OpenAI.Chat.ChatCompletionMessageParam & {
  id?: string
}

const messagesStore: {
  [threadId: string]: DBMessage[]
} = {}

export const getMessageStore = (id: string) => {
  if (!messagesStore[id]) {
    messagesStore[id] = []
  }
  const messageList = messagesStore[id]
  return {
    addMessage: (message: DBMessage) => {
      messageList.push(message)
    },
    messageList,
    getOpenAICompatibleMessageList: () => {
      return messageList.map((m) => {
        const message = {
          ...m,
        }
        delete message.id
        return message
      })
    },
  }
}

Here's a breakdown of the above code:

Maintains an in-memory chat message store, organized by threadId.
messagesStore is a plain JS object that maps each threadId to an array of messages.
Exposes a utility getMessageStore(threadId) that returns helpers to:
- addMessage(message) → adds a new message to the thread.
- messageList → returns all stored messages for the thread.
- getOpenAICompatibleMessageList() → returns the message list without the id field, making it compatible with OpenAI’s ChatCompletion API.

To keep things simple, the store is not persistent and everything is lost on server restart. You can replace this with a persistent database (Redis, PostgreSQL) for production use.

Step 4: Tool for Order Management

Next, we will be creating a tool to help the assistant in creating and listing customer orders for different products like gloves, hats, scarves. It uses Zod for runtime validation and schema safety, and stores orders in memory. You don't need to install zod because it's a transitive dependency. If you check inside GenUI SDK's package.json (in node_modules/@thesysai/genui-sdk/package.json), you will likely find something like:

"dependencies": {
  "zod": "^3.24.1"
}

Create a new file at src/app/api/chat/orderManagement.ts with the following code.

import { z } from 'zod'

export const gloveOrderSchema = z.object({
  kind: z.literal('gloves'),
  quantity: z.number(),
  unit: z.enum(['boxes', 'pairs']),
  deliveryDate: z.string(),
  shipping: z.enum(['normal', 'express']),
})

export const hats = z.object({
  kind: z.literal('hats'),
  quantity: z.number(),
  variants: z.enum(['top', 'beanie', 'cap']),
  deliveryDate: z.string(),
  shipping: z.enum(['normal', 'express']),
})

export const scarfOrderSchema = z.object({
  kind: z.literal('scarves'),
  quantity: z.number(),
  colors: z.enum(['red', 'blue', 'green', 'yellow', 'purple', 'orange']),
  deliveryDate: z.string(),
  shipping: z.enum(['normal', 'express']),
})

export const orderSchema = z.object({
  order: z.discriminatedUnion('kind', [
    gloveOrderSchema,
    hats,
    scarfOrderSchema,
  ]),
})

type Order = z.infer<typeof orderSchema>

const orders: Order['order'][] = []

export const createOrder = async (orderJson: unknown) => {
  const order = orderSchema.safeParse(orderJson)
  if (!order.success) {
    console.error('Invalid order', order.error)
    return {
      success: false,
      error: order.error.message,
    }
  }
  const deliveryDate = new Date(order.data.order.deliveryDate)
  console.log('Creating order', { ...order.data.order, deliveryDate })
  orders.push(order.data.order)
  return {
    success: true,
  }
}

export const getOrderSchema = z.object({
  number: z.number().optional().default(10),
})

export const getOrders = (params: unknown) => {
  const parsedParams = getOrderSchema.safeParse(params)
  if (!parsedParams.success) {
    console.error('Invalid params', parsedParams.error)
    return {
      success: false,
      error: parsedParams.error.message,
    }
  }
  return {
    success: true,
    orders: orders.slice(0, parsedParams.data.number),
  }
}

The above code enables us to:

Support dynamic order creation for gloves, hats, scarves with unique schema fields.
Uses z.discriminatedUnion("kind", [...]) for orders based on their kind. This is to reason over multiple product forms in one unified schema.
Defines a top-level orderSchema that wraps individual schemas and makes sure input matches one of the valid order types.
Creates an in-memory array orders[] to temporarily store incoming orders.
Exposes a createOrder() function:
- Accepts raw input (orderJson)
- Parses and validates it using Zod
- Logs and stores the order if valid
- Returns a success/failure response
Exposes a getOrders() function:
- Accepts an optional number parameter (default: 10)
- Returns the latest n orders
- Useful for listing recent user actions in chat or UI
We have used safeParse() for both creation and retrieval to prevent runtime crashes from bad inputs.

Step 5: Tool for Inventory Lookup

Now let's create a tool that will help the assistant to fetch available product inventory based on type like gloves, hats, scarves or all of them. Create a new file at src/app/api/chat/inventory.ts with the following code:

Note that we will be using mock data since we are just using it locally.

import { z } from 'zod'

export const inventoryQuerySchema = z.object({
  productType: z
    .enum(['gloves', 'hats', 'scarves', 'all'])
    .optional()
    .default('all'),
})

const allInventory = [
  {
    productType: 'gloves',
    quantity: 100,
    priceInUSD: 10.0,
    urgentDeliveryDate: '2025-04-15',
    normalDeliveryDate: '2025-04-20',
    imageSrc: 'https://images.unsplash.com/photo-1617118602199-d3c05ae37ed8',
  },
  {
    productType: 'hats',
    quantity: 200,
    priceInUSD: 15.0,
    urgentDeliveryDate: '2025-04-15',
    normalDeliveryDate: '2025-04-20',
    imageSrc: 'https://images.unsplash.com/photo-1556306535-0f09a537f0a3',
  },
  {
    productType: 'scarves',
    quantity: 300,
    priceInUSD: 5.0,
    urgentDeliveryDate: '2025-04-15',
    normalDeliveryDate: '2025-04-20',
    imageSrc: 'https://images.unsplash.com/photo-1457545195570-67f207084966',
  },
]

export const getInventory = (params: unknown) => {
  const parsedParams = inventoryQuerySchema.safeParse(params)
  if (!parsedParams.success) {
    console.error('Invalid params', parsedParams.error)
    return { success: false, error: parsedParams.error.message }
  }
  return {
    success: true,
    inventory: allInventory.filter(
      (item) =>
        parsedParams.data.productType === 'all' ||
        item.productType === parsedParams.data.productType
    ),
  }
}

Here's what the above code is doing:

Defines an input schema inventoryQuerySchema using Zod:
- Accepts an optional productType field ("gloves", "hats", "scarves" or "all")
- Defaults to "all" if not provided
Declares a static allInventory array with mock data. Each item includes quantity, price, delivery dates, image (this would come from a DB or API).
Exports a getInventory(params) function:
- Validates input using safeParse()
- Filters inventory by type if specified
- Returns a success: true response with filtered items
- Returns an error message if the input is invalid

In response to queries like “What hats are in stock?” or “Show me all products”, this will show available items with pricing and shipping info.

Step 6: Backend using Chat API Route

We're almost done! Now, we need to build a backend to handle AI interactions (/api/chat) using OpenAI-compatible API calls and stream responses with support for custom tools. Before we build the backend, let's learn about System Prompts, which is a key part of C1’s behaviour control.

Although C1 is powerful on its own, guiding it with system prompts is important to get consistent and tailored UIs, and help C1 understand how it is expected to behave for your application. Thesys supports system prompts to:

Define the assistant’s role (like “you are a helpful inventory manager”) or specific tone/language
Specify rendering behavior (like always including images in a list)
Enforce formatting rules using <ui_rules> tags

A more detailed guide can be found in the official docs for integrating system prompts to your AI application. Here's an example from the official docs. In practice, you would prepend this prompt to every API call:

const systemPrompt = `
You are a data assistant. Use tables for related info,
charts for comparisons, and carousels for lists of items.
`;

const resp = await client.chat.completions.create({
  model: 'c1-nightly',
  messages: [
    { role: 'system', content: systemPrompt },
    { role: 'user', content: userQuery }
  ],
  stream: true
});

Now, we will be coding the file src/app/api/chat/route.ts:

import { NextRequest, NextResponse } from 'next/server'
import OpenAI from 'openai'
import { transformStream } from '@crayonai/stream'
import { DBMessage, getMessageStore } from './messageStore'
import {
  createOrder,
  getOrders,
  getOrderSchema,
  orderSchema,
} from './orderManagement'
import { zodToJsonSchema } from 'zod-to-json-schema'
import { JSONSchema } from 'openai/lib/jsonschema.mjs'
import { inventoryQuerySchema } from './inventory'
import { getInventory } from './inventory'

const SYSTEM_MESSAGE = `
You are a helpful assistant who can help with placing orders and checking inventory.

<ui_rules>
- When showing inventory, use the list component to show the inventory along with its image.
  Always add the imageSrc to the list component.
</ui_rules>
`

export async function POST(req: NextRequest) {
  const { prompt, threadId, responseId } = (await req.json()) as {
    prompt: DBMessage
    threadId: string
    responseId: string
  }
  const client = new OpenAI({
    baseURL: 'https://api.thesys.dev/v1/embed/',
    apiKey: process.env.THESYS_API_KEY,
  })
  const messageStore = getMessageStore(threadId)
  if (messageStore.getOpenAICompatibleMessageList().length === 0) {
    messageStore.addMessage({
      role: 'system',
      content: SYSTEM_MESSAGE,
    })
  }

  messageStore.addMessage(prompt)

  const llmStream = client.chat.completions.runTools({ // OpenAI SDK v5+
    model: 'c1-nightly',
    messages: messageStore.getOpenAICompatibleMessageList(),
    stream: true,
    tools: [
      {
        type: 'function',
        function: {
          name: 'createOrder',
          description: 'Create an order',
          parameters: zodToJsonSchema(orderSchema) as JSONSchema,
          function: createOrder,
          parse: JSON.parse,
        },
      },
      {
        type: 'function',
        function: {
          name: 'getOrders',
          description: 'Get all orders',
          parameters: zodToJsonSchema(getOrderSchema) as JSONSchema,
          function: getOrders,
          parse: JSON.parse,
        },
      },
      {
        type: 'function',
        function: {
          name: 'getInventory',
          description: 'Get the current inventory',
          parameters: zodToJsonSchema(inventoryQuerySchema) as JSONSchema,
          function: getInventory,
          parse: JSON.parse,
        },
      },
    ],
  })

  const responseStream = transformStream(
    llmStream,
    (chunk) => {
      return chunk.choices[0].delta.content
    },
    {
      onEnd: ({ accumulated }) => {
        const message = accumulated.filter((message) => message).join('')
        messageStore.addMessage({
          role: 'assistant',
          content: message,
          id: responseId,
        })
      },
    }
  ) as ReadableStream<string>

  return new NextResponse(responseStream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache, no-transform',
      Connection: 'keep-alive',
    },
  })
}

Briefly, here is what we are achieving:

Handle incoming POST requests to /api/chat with a user prompt, thread ID, response ID.
Initialize a system prompt that tells the assistant how to behave and how to render UI (always include imageSrc when showing inventory).
Maintain an in-memory chat history using getMessageStore() to keep messages thread-specific and OpenAI-compatible.
Call Thesys C1's Chat Completion API (/v1/embed/) using the runTools() method, which:
- Streams LLM responses in real-time.
- Supports multiple custom tools:
  - createOrder: for placing an order
  - getOrders: for listing previous orders
  - getInventory: for querying stock info
Each tool is registered using a zod schema converted to JSON Schema via zodToJsonSchema() so the LLM knows the input/output structure.
Stream the assistant's output back to the client using transformStream():
- Processes the stream to extract LLM content.
- Accumulates final response and stores it in the message history (responseId used to tag it).

And finally return a text/event-stream response, allowing the frontend to render content progressively as it’s generated.

Step 7: Output

We're done! To start the local development server, run npm run dev in your terminal. Now that we’ve wired up the frontend, backend and all supporting tools, let’s look at the final result.

Here's what the user interface looks like, styled using crayonai/react-ui.

You can interact with the assistant naturally, with something like hi or I want to place an order. The assistant understands the prompt and dynamically renders a proper UI based on your query. Each tool is schema-bound using Zod and responds in real-time with valid UI blocks.

As you can see, it lists the options and even provides buttons: Place New Order, Check Inventory and View Orders.

Let’s check what’s in stock. The assistant fetches inventory using the getInventory() tool and renders cards with product info, prices, delivery options (hardcoded values).

Clicking on a product like “Hat” generates a complete order form, built in real-time by the C1 API based on the schema we provided. The assistant knows what inputs are needed, what types they should be and even adds UX elements like dropdowns, date pickers and radio groups. Which is then rendered by the GenUI SDK.

Once submitted, the form data is passed back to the assistant and handled by the appropriate backend function (createOrder()), which stores the result and confirms the action. It will also list out other options to place another order and check existing orders.

We did not have to write a single HTML form, yet our application's users get fully working input fields and dynamic flows. This is the power of Thesys generative UI - it provides a UI that caters to individual needs, uses modular atomic elements to construct complete interfaces tailored to every use-case. This is all at run-time without manual code intervention. Such generated interfaces are responsive, interactive, consistent in their design and fulfil user intent across multiple contexts.

AI stacks you can use with Thesys

Thesys is designed to plug into modern AI stacks and workflows. Such as:

LLM → Anthropic, OpenAI (preview), custom models (via structured JSON)
Client SDKs → Standard OpenAI-compatible clients (Python, JS)
Chaining Tools → LangChain, LlamaIndex pipelines → C1 renders UI
Agent Framework → AutoGPT/BabyAGI agents can call tools and render UI
Backend → Any REST framework such as Python, Node.js, FastAPI, Django, Next.js
Frontend → Any React framework such as Next.js
Deployment → Vercel, Netlify, AWS, GCP, your infrastructure

Ready to Build the Future of UI?

Thesys unlocks a new paradigm where interfaces adapt, respond, and build themselves from context. Instead of static layouts that look the same for every user, your applications can now generate personalised experiences in real-time.

Get Started in Minutes

Ready to transform how your users interact with AI? Start building with Thesys today:

Try the Interactive Playground - See generative UI in action with live examples
Read the Documentation - Complete guides and API references to get you up and running, and more information on theming, customization, etc.
Get Your API Key - Start with free $10 credits

Join developers already building the next generation of adaptive interfaces. Your users deserve experiences that understand them - not just respond to them.

Start Building →

Architecting AI-first interfaces: Going beyond chat with context-aware UI

Architecting AI-first interfaces: Going beyond chat with context-aware UI

Related articles

How to design AI-Native Conversational Interfaces : From Templates to Generative UI

GPT 5 vs. GPT 4.1

Implementing Generative Analytics with Thesys and MCP

Evolution of Analytics: From Static Dashboards to Generative UI

Why Generating Code for Generative UI is a bad idea

Building the First Generative UI API: Technical Architecture and Design Decisions Behind C1

How we evaluate LLMs for Generative UI

Generative UI vs Prompt to UI vs Prompt to Design

What is Generative UI?