Actions represent user interaction, like a button click or form submission. By handling actions, you can create a generative loop.

​
Implementing the Generative Loop

The most common way to handle an action is to use it to generate a new response. This is done by sending the action.llmFriendlyMessage to your backend, which then calls the C1 API to get a new response. Here is a complete example of this flow in a React component: 
import { useState } from "react";
import { C1Component, ThemeProvider } from "@thesysai/genui-sdk";

function MyInteractiveComponent() {
  const [c1Response, setC1Response] = useState<string>(/* initial C1 DSL */);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  // This function handles the action and triggers a new API call
  const handleAction = async (action) => {
    // We only handle actions intended for the LLM
    callApi({ prompt: action.llmFriendlyMessage, userVisibleMessage: action.userFriendlyMessage });
  };

  return (
    <ThemeProvider>
      <C1Component
        c1Response={c1Response}
        isStreaming={isLoading}
        onAction={handleAction}
      />
    </ThemeProvider>
  );
}

​
The onAction Callback

C1Component accepts a callback function. It is called when a user performs an action. 
<C1Component
  c1Response={c1Response}
  onAction={(action) => {
    // This function will run when the user clicks a C1 button or submits a form.
    console.log("Action triggered:", action);
    handleAction(action);
  }}
/>

​
The Action Event Object

The onAction callback receives a single argument: the action event object. This object contains the context of the user’s interaction. Attributes
  • userFriendlyMessage (string): User visible; concise, human-readable label for the action. It is used to display the action to the user. In a conversational UI, this is add as user message to the conversation.
  • llmFriendlyMessage (string): Sent to the LLM; context describing what happened. If a form was submitted, this will contain the form values. 
{
  "userFriendlyMessage": "Plan my trip",
  "llmFriendlyMessage": "The user submitted the trip planning form. form values: { ...values }"
}

​
Actions in Custom Components

To add handling for actions in custom components, you can use the useOnAction hook. See Custom Components for more details.