> ## 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.

# Rendering C1 Responses into live UI

> C1 React SDK helps convert C1 API Responses into live UI components on the client side.

This guide covers the necessary setup and the core components provided by the SDK to get your frontend up and running.

## Setup

**Install the SDK**

You will need two packages: `@thesysai/genui-sdk` which provides the core rendering logic, and its peer dependency `@crayonai/react-ui` which contains the base UI primitives.

```bash theme={null}
npm install @thesysai/genui-sdk @crayonai/react-ui
```

**Import Required CSS**

For the components to be styled correctly, import the Crayon UI stylesheet at the root of your application (e.g., in `layout.tsx` or `App.tsx`).

```tsx theme={null}
import "@crayonai/react-ui/styles/index.css";
```

**Add the Default Font**

Inter is the default font used by C1 components. You can add it to your project by importing it in your global CSS file.
The font and other styles can be [customized](/guides/styling) later.

```css global.css theme={null}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
```

## Implementation

### The Core Renderer: `<C1Component>`

`<C1Component />` is the fundamental building block for rendering any C1 API response.
Its primary responsibility is to take the C1 response string returned from your backend API and transform it into a tree of interactive React components.

You are responsible for fetching the data from your backend and passing the resulting C1 response string to the `c1Response` prop.

```tsx app/page.tsx theme={null}
import { C1Component } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";

const App = () => {
  const response = await fetch("/chat");
  return <C1Component c1Response={response.text()} />;
};
```

### Providing a Theme with `<ThemeProvider>`

C1Component must be wrapped in a `<ThemeProvider>` to ensure it is styled correctly and have access to your application's design tokens.

This provider should be placed at the highest level in your application tree, enclosing any component that uses `<C1Component>`.

```tsx app/page.tsx theme={null}
import { C1Component, ThemeProvider } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";

const App = () => {
  const response = await fetch("/chat");
  return (
    <ThemeProvider>
      <C1Component c1Response={response.text()} />
    </ThemeProvider>
  );
};
```

`ThemeProvider` allows you to customize the generations to match your brand & design system.
To learn more about customizing C1 Outputs please refer to our [Customization Section](/guides/styling)

### Handling User Actions with `onAction` callback

The UI generated by `<C1Component>` is not static; it can include interactive elements like buttons and forms.
You can handle events from these elements, such as form submissions, by using the `onAction` prop.

For a complete guide on this topic, see the guide on **[Interactivity and Actions](/guides/interactivity/actions)**.

### Implementing Conversational interfaces with `<C1Chat>`

For conversational use cases, the SDK provides `<C1Chat>`, a "batteries-included" component that simplifies the process.
This is an alternative to `<C1Component>` that wraps `<C1Component>` and `<ThemeProvider>` and also manages its own state,
data fetching, and conversation history runtime.

Simply provide your backend API endpoint to the `apiUrl` prop, and the component will handle the rest.

* **Use `<C1Chat>`** for quickly building chat applications.
* **Use `<C1Component>`** for non-chat UIs or when you need full control over data fetching and state management.

```tsx app/page.tsx theme={null}
import { C1Chat } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";

const App = () => {
  return <C1Chat apiUrl="/api/chat" />;
};
```

For a complete tutorial on using `<C1Chat>`, see the section on **[Conversation UI](/guides/conversational)**.