Setting up the UI

The <C1Component /> is the simplest way to embed Generative UI into your application. Its takes as its argument the content streamed from the C1 API and converts it to a live functional UI. It’s perfect when you want dynamic, AI-generated controls without wrapping everything in a chat window.

import { C1Component, ThemeProvider } from "@thesys/genui-sdk";

const App = () => {
  const response = await fetch("<your-backend-url>");
  return (
    <ThemeProvider>
      <C1Component c1Response={response.text()} />
    </ThemeProvider>
  );
};