Implementing Custom Components

import { useOnAction, useC1State } from "@thesysai/genui-sdk";

export const FlightList = ({ flights }: { flights: Flight[] }) => {
  const onAction = useOnAction();

  // State management to manage component's internal state
  const { getValue, setValue } = useC1State("FlightList")

  return (
    <div>
      <h3>Available Flights</h3>
      ...
      {flights.map((flight) => (
        <FlightCard
          // onSelect trigger for the FlightCard
          onSelect={() =>
            onAction(
              "Select Flight", // Human-friendly message
              `User selected flight ${flight.flightNumber}` // LLM-specific message with user context
            )
          }
          ...
        />
      ))}
    </div>
  );
};

import { z } from "zod";

// Schema of a flight
const flightSchema = z
  .object({
    flightNumber: z.string(),
    departure: z.string(),
    arrival: z.string(),
    layover: z.string().optional(),
    ...
  })
  .describe(
    "Represents a single flight option including schedule, price, and stops."
  );

// Schema of the flight list component props
const FlightListSchema = z
  .object({
    flights: z.array(flightSchema),
  })
  // Always include descriptive text for the LLM to understand the component
  .describe(
    "Displays a list of available flights. Renders rich cards with airline, route, times, stops, and price. Includes a clear 'Select' action for each item."
  );

// Schema to be passed to the C1 API
const CUSTOM_COMPONENT_SCHEMAS = {
  FlightList: zodToJsonSchema(FlightListSchema),
  ... // other custom components
};

export async function POST(req: NextRequest) {
  ...
  const client = new OpenAI({
    baseURL: "https://api.thesys.dev/v1/embed/",
    apiKey: process.env.THESYS_API_KEY,
  });

  const llmStream = client.chat.completions.runTools({
    ...
    model: "c1/anthropic/claude-sonnet-4/v-20250915",
    // Pass custom component schema
    metadata: {
      thesys: JSON.stringify({
        c1_custom_components: CUSTOM_COMPONENT_SCHEMAS,
      }),
    },
  });

  ...
}

import { C1Chat } from "@thesysai/genui-sdk";
import { FlightList } from "./components";

export default function Home() {
  return (
    <C1Chat
      apiUrl="/api/chat"
      customizeC1={{
        customComponents: { FlightList },
      }}
    />
  );
}