@zapier/ai-actions-react

Zapier AI Actions React Components

These components can be used to interface with AI Actions by Zapier.

To make API requests directly to AI Actions, see the @zapier/ai-actions package.

ActionList

Shows a list of all of the AI Actions that are available to the current user.

Props

• onActionCreated (Optional): Called when a new action is created
• onActionUpdated (Optional): Called when an existing action is updated
• onActionDeleted (Optional): Called when an action is deleted

Usage

import { ActionList } from "@zapier/ai-actions-react";

const ActionListExample = () => {
  return (
    <ActionList
      onActionCreated={({ action }) => console.log(action)}
      onActionUpdated={({ action }) => console.log(action)}
      onActionDeleted={({ actionId }) => console.log(actionId)}
    />
  );
};

CreateAction

Create a new action.

Props

• onActionCreated (Optional): Called when the action is actually created
• app (Optional): App to pre-select, can be found using the app search API
• action (Optional): Action to pre-select, can be found using the action search API
  • NOTE: If an action is provided, it must be a valid action for the given app

Usage

import { CreateAction } from "@zapier/ai-actions-react";

const CreateActionExample = () => {
  return (
    <CreateAction
      onActionCreated={({ action }) => console.log(action)}
      app="SlackAPI"
      action="channel_message"
    />
  );
};

EditAction

Edit an existing action by its ID.

Props

• actionId: ID of the action to edit
• onActionUpdated (Optional): Called when the action is updated
• onActionDeleted (Optional): Called when the is deleted

Usage

import { EditAction } from "@zapier/ai-actions-react";

const EditActionExample = () => {
  return (
    <EditAction
      actionId="01HEXAMPLEID"
      onActionUpdated={({ action }) => console.log(action)}
      onActionDeleted={({ actionId }) => console.log(actionId)}
    />
  );
};