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

# C1 Component

> React component for embedding Generative UI into your applications.

`C1Component` is a React component that allows you to embed Generative UI into your applications.
It renders an individual response from the C1 by Thesys API and can be used in a variety of ways to embed
Generative UI into your applications.

```tsx theme={null}
import { C1Component } from "@thesysai/genui-sdk";

<C1Component
  c1Response={c1Response}
  ...
/>
```

## Props

<ResponseField name="c1Response" type="string">
  The response received through the C1 API that needs to be rendered.
</ResponseField>

<ResponseField name="isStreaming" type="boolean">
  Boolean indicating whether the `c1Response` is currently being streamed.
</ResponseField>

<ResponseField name="updateMessage" type="(message: string) => void" post={["optional"]}>
  A function that enables `C1Component` to update the `c1Response` state.
</ResponseField>

<ResponseField name="onAction" type="(action: Action) => void | undefined" post={["optional"]}>
  The callback triggered when the user performs an action such as clicking on a button or submitting a form.

  <Expandable title="Action Object">
    <ResponseField name="humanFriendlyMessage" type="string">
      The message that is appropriate to display to the user.
    </ResponseField>

    <ResponseField name="llmFriendlyMessage" type="string">
      The message that should be sent to the LLM as user message.
    </ResponseField>
  </Expandable>

  For example, when the user submits a form by clicking on "Submit" button on the generated UI, "Submit" may be the `humanFriendlyMessage` and the form data may be the `llmFriendlyMessage`.
  Thus, you would likely want to use the `llmFriendlyMessage` in your API call to the backend so that the LLM can use the form data to generate a response.
</ResponseField>