This guide assumes that you have completed the Quickstart.

C1 is designed to be highly customizable. Here are a few simple ways to customize C1 UI to your requirements:

1

Using theme presets

C1 can easily be customized through a variety of pre-built themes. To apply a theme, you can import themePresets from @crayonai/react-ui and pass the preset to the theme prop of the C1Chat component.

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

export default function Home() {
  return <C1Chat apiUrl="/api/chat" theme={themePresets.candy} />;
}
2

Switching between light and dark mode

You can toggle between light and dark modes by setting the mode property in the theme object. All Crayon theme presets fully support both modes.

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

export default function Home() {
  return (
    <C1Chat
      apiUrl="/api/chat"
      theme={{ ...themePresets.candy, mode: "dark" }}
    />
  );
}
3

Setting agent name and logo

You can set the agent name and logo by passing the agentName and logoUrl props to the C1Chat component. These values control the agent’s display name in the sidebar and the avatar shown next to its messages.

import { C1Chat } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";
import { themePresets } from "@crayonai/react-ui";
import { useSystemTheme } from "./useSystemTheme";

export default function Home() {
  const systemTheme = useSystemTheme();
  return (
    <C1Chat
      agentName="Legal Assistant"
      logoUrl="https://placehold.co/100" // You can replace this placeholder with a link to a logo suitable for your AI agent
      apiUrl="/api/chat"
      theme={{ ...themePresets.candy, mode: systemTheme }}
    />
  );
}
4

Overriding Crayon classes

For advanced customization, you can override the CSS classes applied to UI components. For example, to hide the AI agent’s logo next to its messages, target the .crayon-shell-thread-message-assistant__logo class in your CSS.

You can find the classes attached to different UI components by inspecting the elements through the browser’s developer tools.

custom.css
.crayon-shell-thread-message-assistant__logo {
  display: none;
}

Then import those styles in your component:

import { C1Chat } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";
import { themePresets } from "@crayonai/react-ui";
import { useSystemTheme } from "./useSystemTheme";
import "./custom.css";

export default function Home() {
  const systemTheme = useSystemTheme();
  return (
    <C1Chat
      agentName="Legal Assistant"
      logoUrl="https://placehold.co/100" // You can replace this placeholder with a link to a logo suitable for your AI agent
      apiUrl="/api/chat"
      theme={{ ...themePresets.candy, mode: systemTheme }}
    />
  );
}