# Creating workflow actions
Source: https://www.inngest.com/docs/reference/workflow-kit/actions

The [`@inngest/workflow-kit`](https://npmjs.com/package/@inngest/workflow-kit) package provides a [workflow engine](/docs/reference/workflow-kit/engine), enabling you to create workflow actions on the back end. These actions are later provided to the front end so end-users can build their own workflow instance using the [`<Editor />`](/docs/reference/workflow-kit/components-api).

Workflow actions are defined as two objects using the [`EngineAction`](#passing-actions-to-the-workflow-engine-engine-action) (for the back-end) and [`PublicEngineAction`](#passing-actions-to-the-react-components-public-engine-action) (for the front-end) types.

<CodeGroup>

```ts {{ title: "src/inngest/actions-definition.ts" }}
actionsDefinition: PublicEngineAction[] = [
  {
    kind: "grammar_review",
    name: "Perform a grammar review",
    description: "Use OpenAI for grammar fixes",
  },
];

```

```tsx {{ title: "src/inngest/actions.ts" }}
actions: EngineAction[] = [
  {
    // Add a Table of Contents
    ...actionsDefinition[0],
    handler: async ({ event, step, workflowAction }) => {
	      // implementation...
    }
  },
];
```

</CodeGroup>

In the example above, the `actionsDefinition` array would be passed via props to the [`<Provider />`](/docs/reference/workflow-kit/components-api) while the `actions` are passed to the [`Engine`](/docs/reference/workflow-kit/engine).

<Callout>

**Why do I need two types of actions?**

The actions need to be separated into 2 distinct objects to avoid leaking the action handler implementations and dependencies into the front end:

<ImageTheme
  dark={'/assets/docs/reference/workflow-kit/workflow-kit-architecture-dark.jpg'}
  light={'/assets/docs/reference/workflow-kit/workflow-kit-architecture-light.jpg'}
  className="my-0"
  alt={'The Workflow Kit provides a Workflow Engine to compose workflow actions on the back end and a set of pre-defined React components for the front end.'}
/>

</Callout>

## Passing actions to the React components: `PublicEngineAction[]`

<Properties>
  <Property name="kind" type="string" required>
     Kind is an enum representing the action's ID.  This is not named as "id" so that we can keep consistency with the WorkflowAction type.
  </Property>
  <Property name="name" type="string" required>
     Name is the human-readable name of the action.
  </Property>
  <Property name="description" type="string">
     Description is a short description of the action.
  </Property>
  <Property name="icon" type="string">
     Icon is the name of the icon to use for the action.  This may be an URL, or an SVG directly.
  </Property>
  {/* <Property name="inputs" type="object">
     TODO
  </Property>
  <Property name="outputs" type="object">
     TODO
  </Property> */}
</Properties>

## Passing actions to the Workflow Engine: `EngineAction[]`

<Callout>
**Note**: Inherits `PublicEngineAction` properties.
</Callout>

<Properties>
  <Property name="handler" type="function">
    The handler is your code that runs whenever the action occurs. Every function handler receives a single object argument which can be deconstructed. The key arguments are `event` and `step`.
  </Property>
</Properties>

```ts {{ title: "src/inngest/actions.ts" }}
actions: EngineAction[] = [
{
    // Add a Table of Contents
    ...actionsDefinition[0],
    handler: async ({ event, step, workflow, workflowAction, state }) => {
        // ...
    }
},
];
```

The details of the `handler()` **unique argument's properties** can be found below:

### `handler()` function argument properties

<Properties>
  <Property name="event" type="TriggerEvent">
    See the Inngest Function handler [`event` argument property definition](/docs/reference/functions/create#event).
  </Property>
  <Property name="step" type="Step">
    See the Inngest Function handler [`step` argument property definition](/docs/reference/functions/create#step).
  </Property>
  <Property name="workflow" type="Workflow">
    See the [Workflow instance format](/docs/reference/workflow-kit/workflow-instance).
  </Property>
  <Property name="workflowAction" type="WorkflowAction">
     WorkflowAction is the action being executed, with fully interpolated inputs.

     Key properties are:
        - `id: string`:  The ID of the action within the workflow instance.
        - `kind: string`: The action kind, as provided in the [`PublicEngineAction`](#passing-actions-to-the-react-components-public-engine-action).
        - `name?: string`: The name, as provided in the [`PublicEngineAction`](#passing-actions-to-the-react-components-public-engine-action).
        - `description?: string`: The description, as provided in the [`PublicEngineAction`](#passing-actions-to-the-react-components-public-engine-action).
        - `inputs?: string`: The record key is the key of the EngineAction input name, and the value is the variable's value.
  </Property>
  <Property name="state" type="object">
    State represents the current state of the workflow, with previous action's outputs recorded as key-value pairs.
  </Property>
</Properties>