> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How C1 Works

> A detailed look at the C1 integration, from the backend API call to UI rendering.

## Overview

{/* todo: make sure to add data, logic and a message store in the flow */}

Here is a visual overview of the entire process, from a user's query to the final rendered UI:

```mermaid theme={null}
sequenceDiagram
    participant User
    participant UI
    participant Your Backend
    participant C1 API

    User->>+UI: Submits a prompt (e.g., "What did I spend last month?")
    UI->>+Your Backend: POST /api/generate-ui (sends user prompt)
    Your Backend->>+C1 API: Calls C1 Chat Completions endpoint <br/>(with prompt, history, system instructions)
    C1 API-->>-Your Backend: Returns a UI specification object (C1 DSL)
    Your Backend-->>-UI: Relays the UI specification (C1 DSL)
    UI->>-User: Renders the specification (C1 DSL) using C1Component
```

1. User enters a prompt on the UI
2. UI sends the prompt to your backend API
3. Backend calls the C1 API with the prompt, history, system instructions.
4. C1 API returns a UI specification object (C1 DSL) which is generated by existing LLM API based on the model selected while making the call.
5. Backend relays the C1 Response to the UI
6. UI renders the C1 Response using `<C1Component />`

Let's see how integration with C1 works.

## The Backend API Call

The core integration pattern involves your backend acting as an intermediary between your UI client and the C1 API.
This allows you to add business logic, prepare data before calling C1 and secure your API keys.

The C1 API is **OpenAI-compatible**, so you can use the official `openai` client library.
If you already have openai integrated, the only change required is to configure the client with your Thesys API key and the C1 `baseURL`.

Before making the call to C1, your server can enrich the user's prompt with additional context, such as conversation history,
system instructions, or [integrate data](/guides/integrate-data/tool-calling) from your database.

<CodeGroup dropdown>
  ```python main.py theme={null}
  from openai import OpenAI
  import os

  # Create OpenAI client with Thesys endpoint
  client = OpenAI(
      api_key=os.getenv('THESYS_API_KEY'),
      base_url='https://api.thesys.dev/v1/embed'
  )

  # Now use the client for your AI requests
  response = client.chat.completions.create(
      model='<model-name>',
      messages=[
          {'role': 'user', 'content': 'Hello, world!'}
      ]
  )
  ```

  ```ts src/app/api/chat/route.ts theme={null}
  const { OpenAI } = require('openai')

  // Create OpenAI client with Thesys endpoint
  const client = new OpenAI({
    apiKey: process.env.THESYS_API_KEY,
    baseURL: 'https://api.thesys.dev/v1/embed'
  })

  // Now use the client for your AI requests
  const response = await client.chat.completions.create({
    model: '<model-name>',
    messages: [
      { role: 'user', content: 'Hello, world!' }
    ]
  })
  ```
</CodeGroup>

The response from the C1 API is a structured UI specification (C1 DSL) that is then passed back to your UI.

## UI Rendering

The C1 **React SDK** provides `<C1Component>` to handle the rendering.
It is reponsible to take the response returned from C1 and render it as interactive React components.

If you are building a chat interface, you can use [`<C1Chat>`](/guides/conversational).
It provides everything including chat history, user thread management. This drastically reduces the development time.

## C1 Response

Unlike standard LLM responses, which are plain text or markdown, a C1 Response is a string that is structured payload to contain rich content.
It uses an XML-like structure to package multiple types of content into a single string.

It is generally stored as assistant message content in the database.

```xml theme={null}
<!-- A C1 Response can contain multiple content types -->
<thinking>...</thinking><content>...</content><artifact>...</artifact>
```

The different tags represent different parts of the response:

* `<thinking>`: Data for displaying real-time thinking-state indicators.
* `<content>`: The primary Generative UI response.
* `<artifact>`: Document-style content, such as Slides or Reports.

C1 provides backend helpers to help you create and stream this response payload. For a detailed guide on this topic please refer to [C1 response](/sdk-reference/c1-response).

C1 response can be streamed to the UI and rendered using the `<C1Component>` or `<C1Chat>` component.

## Selecting a model

The C1 API supports multiple models. You can select the model based on your use case.

Current supported models are:

1. Anthropic - Claude Sonnet 4
2. OpenAI - GPT-5

To see the full list of supported models, please refer to the [Models](/api-reference/models-and-compatibility) page.

## Summary

C1 gives you full control over the end-to-end experience. Your **backend** orchestrates the call by adding context and business logic.\
And your **UI** is responsible for fetching the resulting C1 Response and using the C1 SDK to render the final interactive UI.