# Workflow Kit
Source: https://www.inngest.com/docs/reference/workflow-kit/index

Workflow Kit enables you to build [user-defined workflows](/docs/guides/user-defined-workflows) with Inngest by providing a set of workflow actions to the **[Workflow Engine](/docs/reference/workflow-kit/engine)** while using the **[pre-built React components](/docs/reference/workflow-kit/components-api)** to build your Workflow Editor UI.

<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.'}
/>

## Installing

<CodeGroup>
```shell {{ title: "npm" }}
npm install @inngest/workflow-kit inngest
```
```shell {{ title: "pnpm" }}
pnpm add @inngest/workflow-kit inngest
```
```shell {{ title: "yarn" }}
yarn add @inngest/workflow-kit inngest
```
</CodeGroup>

<Callout>

**Prerequisites**

The Workflow Kit integrates with our [TypeScript SDK](/docs/reference/typescript).

To use it, you'll need an application with [Inngest set up](/docs/sdk/overview), ready to [serve Inngest functions](/docs/learn/serving-inngest-functions).

</Callout>

## Source code

<div className="flex items-center gap-2">
<div>
Our Workflow Kit is open source and available on Github: [**inngest/workflow-kit**](https://github.com/inngest/workflow-kit/)
</div>
<iframe src="https://ghbtns.com/github-btn.html?user=inngest&repo=workflow-kit&type=star&count=true" frameBorder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
</div>

## Guides and examples

Get started with Worflow Kit by exploring our guide or cloning our Next.js template:

<CardGroup cols={2}>

  <Card
    href={"/docs/guides/user-defined-workflows"}
    title={"Guide: Build workflows configurable by your users"}
    icon={<NewspaperIcon className="text-basis h-6 w-6" />}
    iconPlacement="top"
  >
    Follow this step-by-step tutorial to learn how to use Workflow Kit to add automations to a CMS Next.js application.
  </Card>

  <Card
    href={'https://github.com/inngest/workflow-kit/tree/main/examples/nextjs-blog-cms#readme'}
    title={"Next.js template: CMS AI automation demo"}
    icon={<GithubIcon className="text-basis h-6 w-6" />}
    iconPlacement="top"
    >
      This Next.js template features AI workflows helping with grammar fixes, generating Table of Contents or Tweets.
  </Card>

</CardGroup>