Skip to main content
Actions represent any user interaction, like a button click or form submission. They are the foundation of interactivity in C1. C1 supports two categories of actions:
  • Built-in Actions: Common, predefined behaviors for tasks like submitting data or opening links.
  • Custom Actions: Application-specific logic that you can define and trigger from the C1 UI.

​
The onAction Handler

To handle actions, you pass a callback function to the onAction property of the <C1Component>. This function is called every time a user performs an action that requires a response from application. 
<C1Component
  c1Response={c1Response}
  onAction={(event) => {
    // This function will run for any action.
    console.log("Action triggered:", event);
    handleAction(event);
  }}
/>
The event object passed to your handler contains all the information about the interaction:
  • type (string): The type of action that was triggered (e.g., 'continue_conversation').
  • params (object): A payload containing data specific to the action (e.g., { url: '...' } or { llmFriendlyMessage: '...' }).

​
Handling Built-in Actions

Built-in actions cover the most common use cases for an interactive UI.

​
Handling in <C1Chat>

For conversational applications, the <C1Chat> component automatically handles built-in actions like form submissions (continue_conversation) and opening URLs (open_url). For more details, see the Conversational UI section.

​
Handling in <C1Component>

When using <C1Component> directly, you can use a switch statement on the event.type to handle different actions. 
<C1Component
  c1Response={c1Response}
  isStreaming={isLoading}
  onAction={(event) => {
    console.log("Action event:", JSON.stringify(event, null, 2));

    switch (event.type) {
      case "open_url":
        // Handle client-side actions like opening a link.
        window.open(event.params.url, "_blank", "noopener,noreferrer");
        break;

      case "continue_conversation":
      default:
        // Handle the generative loop.
        const { llmFriendlyMessage, userFriendlyMessage } = event.params;
        // Optionally display the user-friendly message in the UI.
        pushUserMessageToChat(userFriendlyMessage); 
        // Send the detailed message to the backend.
        callApi(llmFriendlyMessage);
        break;
    }
  }}
/>
In the continue_conversation case, the params object contains two important messages:
  • llmFriendlyMessage: A detailed, context-rich prompt designed to be sent to your backend for the LLM. If a form was submitted, this string will contain the form’s values.
  • userFriendlyMessage: A concise, human-readable label for the action. In a chat UI, this is what you would display as the user’s message.

​
Custom Actions

Custom actions allow you to trigger your application’s specific logic directly from the C1-generated UI, creating a seamless bridge between the generative interface and your existing application code. Examples of what you can build with custom actions include:
  • Implementing a “Download Report” button.
  • Opening a product-specific checkout modal.
  • Triggering a copilot action that performs a task within your application.
For more details, see the Custom Actions section.

​
Actions in Custom Components

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