The ActionList component can be used to list all of the current stored actions that are available for a user.

If you are using an API key for authentication, then the stored actions listed will be only for that API Key.

If you are using OAuth for authentication, then the stored actions listed will only be the actions that a user has set up for your OAuth provider.

​
Props

​
onActionSelected

This is called when the user clicks on an action in the list. It is passed the AiAction object that was clicked.

See the List stored actions documentation for more information about what this object contains.

​
Usage

Make sure that this component is rendered unerneath an AiActionsProvider!

See EditAction and CreateAction for a more complete example of usage.

ai-action-list.tsx
import { AiAction } from "@zapier/ai-actions";
import { ActionList } from "@zapier/ai-actions-react";

export const AiActionList = () => {
  return <ActionList onActionSelected={(action) => console.log(action)} />;
};

​
Example

On the left is the <ActionList /> component. Click on an action to see the details on the right.

action-list-example.tsx
import { AiAction } from "@zapier/ai-actions";
import { ActionList, AiActionsProvider } from "@zapier/ai-actions-react";
import { FunctionComponent, useState } from "react";
import ReactJson from "react-json-view";

interface ActionListExampleProps {
  apiKey: string;
}

export const ActionListExample: FunctionComponent<ActionListExampleProps> = ({
  apiKey,
}) => {
  const [selectedAction, setSelectedAction] = useState<AiAction | null>(null);

  return (
    <div className="flex justify-between h-full">
      <div className="flex-1 w-0 max-h-full overflow-auto pl-2">
        <AiActionsProvider
          auth={{
            apiKey,
          }}
        >
          <ActionList
            onActionSelected={(action) => {
              setSelectedAction(action);
            }}
          />
        </AiActionsProvider>
      </div>
      <div className="flex-1 max-h-full overflow-auto">
        {selectedAction ? (
          <ReactJson src={selectedAction} />
        ) : (
          "Select an action to see its details"
        )}
      </div>
    </div>
  );
};

Was this page helpful?