When the AI agent performs an action, the response of that action can be rendered with custom UI.

​
React

​
Defining the component

AccountBalanceComponent.tsx
import { WidgetComponentProps } from "@opencx/widget/react";

export function AccountBalanceComponent({
  data,
}: WidgetComponentProps<{
  balance: number;
  currency: string;
}>) {
  const response = data?.action?.data;

  // Render a fallback in case something unexpected happens
  if (!response) {
    return <div>{/* Custom UI */}</div>;
  }

  const { balance, currency } = response;

  return <div>{/* Custom UI */}</div>;
}

The WidgetComponentProps type makes it easy to type your component. It accepts a generic type that describes the shape of the data that will be passed to the component.

The shape of the data is the response of the called action. For example, if you have a getAccountBalance action which calls your backend, you would know that your backend responds with this shape: { balance: number, currency: string }, so you can inject this shape into the WidgetComponentProps generic type, giving you type safety.

​
Injection

WidgetWrapper.tsx
import { Widget } from "@opencx/widget/designs";
import { AccountBalanceComponent } from "./AccountBalanceComponent";

function WidgetWrapper() {
  return (
    <div data-opencx-widget>
      <Widget
        options={{
          token: "your-token-here"
        }}
        components={[
          {
            // The key must match the `operation_id` of the action
            key: "getAccountBalance",
            component: AccountBalanceComponent,
          },
        ]}
      />
    </div>
  )
}

​
Headless

Whether you’re doing a Vanilla JavaScript/TypeScript implementation or a headless React implementation, injecting custom components can be done when rendering the AI Agent’s message, it would look like so in React:

AIAgentMessage.tsx
import { WidgetComponentProps } from "@opencx/widget/react";
import { AccountBalanceComponent } from "./AccountBalanceComponent";
import { SpendingSummaryComponent } from "./SpendingSummaryComponent";

export function AIAgentMessage(props: WidgetComponentProps) { 
  switch (props.data.action?.name) {
    case "getAccountBalance":
      return <AccountBalanceComponent {...props} />;
    case "getSpendingSummary":
      return <SpendingSummaryComponent {...props} />;
  }

  return <div>{/* Default AI Agent response UI */}</div>;
}

Was this page helpful?