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. 
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). 
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 later.
global.css
@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.
app/page.tsx
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>.
app/page.tsx
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

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

​
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.
app/page.tsx
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.