├── README.md
├── LICENSE.md
├── pnpm-workspace.yaml
├── .gitignore
├── examples
└── nextjs-blog-cms
│ ├── supabase
│ ├── .gitignore
│ ├── schema.sql
│ └── config.toml
│ ├── .eslintrc.json
│ ├── app
│ ├── favicon.ico
│ ├── fonts
│ │ ├── GeistVF.woff
│ │ └── GeistMonoVF.woff
│ ├── page.tsx
│ ├── automation
│ │ ├── page.tsx
│ │ └── [id]
│ │ │ └── page.tsx
│ ├── api
│ │ ├── inngest
│ │ │ └── route.ts
│ │ ├── workflows
│ │ │ └── route.ts
│ │ └── blog-posts
│ │ │ └── route.ts
│ ├── layout.tsx
│ ├── actions.ts
│ ├── globals.css
│ └── blog-post
│ │ └── [id]
│ │ └── page.tsx
│ ├── next.config.mjs
│ ├── workflow-editor.png
│ ├── lib
│ ├── inngest
│ │ ├── client.ts
│ │ ├── workflow.ts
│ │ └── workflowActions.ts
│ ├── supabase
│ │ ├── client.ts
│ │ ├── types.ts
│ │ ├── server.ts
│ │ └── database.types.ts
│ ├── loaders
│ │ ├── workflow.ts
│ │ └── blog-post.ts
│ ├── utils.ts
│ └── mdxComponents.tsx
│ ├── postcss.config.mjs
│ ├── .env.example
│ ├── components.json
│ ├── .gitignore
│ ├── tsconfig.json
│ ├── components
│ ├── ui
│ │ ├── label.tsx
│ │ ├── checkbox.tsx
│ │ ├── badge.tsx
│ │ ├── switch.tsx
│ │ ├── button.tsx
│ │ ├── tabs.tsx
│ │ ├── card.tsx
│ │ └── select.tsx
│ ├── menu.tsx
│ ├── blog-post-actions.tsx
│ ├── automation-editor.tsx
│ ├── automation-list.tsx
│ └── blog-post-list.tsx
│ ├── package.json
│ ├── tailwind.config.ts
│ ├── README.md
│ └── LICENSE.md
├── packages
└── workflow
│ ├── src
│ ├── stories
│ │ ├── ui.storybook.css
│ │ ├── UI.stories.jsx
│ │ └── UI.jsx
│ ├── ui
│ │ ├── sidebar
│ │ │ ├── Footer.tsx
│ │ │ ├── WorfklowForm.tsx
│ │ │ ├── ActionList.tsx
│ │ │ ├── Header.tsx
│ │ │ ├── Sidebar.tsx
│ │ │ └── ActionForm.tsx
│ │ ├── Sidebar.tsx
│ │ ├── nodes.tsx
│ │ ├── index.ts
│ │ ├── nodes
│ │ │ ├── Trigger.tsx
│ │ │ ├── Action.tsx
│ │ │ └── Handles.tsx
│ │ ├── layout.tsx
│ │ ├── Provider.tsx
│ │ ├── ui.css
│ │ └── Editor.tsx
│ ├── index.ts
│ ├── builtin.ts
│ ├── builtin.test.ts
│ ├── graph.ts
│ ├── engine.execution.test.ts
│ ├── engine.test.ts
│ ├── graph.test.ts
│ ├── interpolation.ts
│ ├── types.ts
│ └── engine.ts
│ ├── jest.config.js
│ ├── CHANGELOG.md
│ ├── .storybook
│ ├── preview.js
│ └── main.js
│ ├── .gitignore
│ ├── tsconfig.json
│ ├── README.md
│ └── package.json
├── .changeset
├── orange-coins-speak.md
├── odd-goats-dance.md
├── healthy-shoes-hear.md
├── quiet-buttons-yawn.md
├── dull-chairs-attend.md
├── config.json
└── README.md
├── .github
├── assets
│ ├── workflow-kit.jpg
│ └── workflow-demo.gif
└── workflows
│ ├── release.yml
│ └── pr.yml
├── package.json
└── CONTRIBUTING.md
/README.md:
--------------------------------------------------------------------------------
1 | ./packages/workflow/README.md
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | ./packages/workflow/LICENSE.md
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node packages
2 | node_modules
3 |
4 | # Nix
5 | /.direnv/
6 |
7 | .env.local
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/supabase/.gitignore:
--------------------------------------------------------------------------------
1 | # Supabase
2 | .branches
3 | .temp
4 | .env
5 |
--------------------------------------------------------------------------------
/packages/workflow/src/stories/ui.storybook.css:
--------------------------------------------------------------------------------
1 | .sb-wrap {
2 | height: 100vh;
3 | width: 100%;
4 | }
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 |
--------------------------------------------------------------------------------
/.changeset/orange-coins-speak.md:
--------------------------------------------------------------------------------
1 | ---
2 | "@inngest/workflow-kit": minor
3 | ---
4 |
5 | Show edge names in editor
6 |
--------------------------------------------------------------------------------
/.github/assets/workflow-kit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/.github/assets/workflow-kit.jpg
--------------------------------------------------------------------------------
/.github/assets/workflow-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/.github/assets/workflow-demo.gif
--------------------------------------------------------------------------------
/.changeset/odd-goats-dance.md:
--------------------------------------------------------------------------------
1 | ---
2 | "@inngest/workflow-kit": minor
3 | ---
4 |
5 | Switch to a maintained version of jsonpath
6 |
--------------------------------------------------------------------------------
/.changeset/healthy-shoes-hear.md:
--------------------------------------------------------------------------------
1 | ---
2 | "@inngest/workflow-kit": patch
3 | ---
4 |
5 | Minor improvements to conditional support
6 |
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/examples/nextjs-blog-cms/app/favicon.ico
--------------------------------------------------------------------------------
/.changeset/quiet-buttons-yawn.md:
--------------------------------------------------------------------------------
1 | ---
2 | "@inngest/workflow-kit": patch
3 | ---
4 |
5 | Fix to ensure nodes in a workflow are only run once
6 |
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | export default nextConfig;
5 |
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/workflow-editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/examples/nextjs-blog-cms/workflow-editor.png
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/examples/nextjs-blog-cms/app/fonts/GeistVF.woff
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inngest/workflow-kit/HEAD/examples/nextjs-blog-cms/app/fonts/GeistMonoVF.woff
--------------------------------------------------------------------------------
/.changeset/dull-chairs-attend.md:
--------------------------------------------------------------------------------
1 | ---
2 | "@inngest/workflow-kit": minor
3 | ---
4 |
5 | Execute Provider.onChange callback when action input values change
6 |
--------------------------------------------------------------------------------
/packages/workflow/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('ts-jest').JestConfigWithTsJest} */
2 | module.exports = {
3 | preset: 'ts-jest',
4 | testEnvironment: 'node',
5 | };
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/lib/inngest/client.ts:
--------------------------------------------------------------------------------
1 | import { Inngest } from "inngest";
2 |
3 | export const inngest = new Inngest({
4 | id: "workflow-kit-next-demo",
5 | });
6 |
--------------------------------------------------------------------------------
/examples/nextjs-blog-cms/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { BlogPostList } from "@/components/blog-post-list";
2 |
3 | export default async function Dashboard() {
4 | return
21 | {children} 22 |
23 | ), 24 | ul: ({ children, ...props }: any) => ( 25 |{ trigger === undefined ? "Select a trigger" : trigger?.event?.name }
31 |{ workflow?.description || "Starts the workflow" }
34 | 35 | { trigger &&{action.name || engineAction?.name || action.kind}
35 |{ action.description || engineAction?.description || "Performs an action" }
38 | 39 | {/* TODO: Add handle with menu options */} 40 |5 | 6 |  7 | 8 |
9 | 10 |11 | Documentation 12 | · 13 | Blog 14 | · 15 | Community 16 |
17 | 18 | # Workflow kit 19 | 20 | **Workflow kit** is a set of patterns that enable you to build user-defined workflows with Inngest by providing workflow actions to the **[Workflow Engine](https://www.inngest.com/docs/reference/workflow-kit/engine?ref=github-workflow-kit-readme)** while using the **[pre-built React components](https://www.inngest.com/docs/reference/workflow-kit/components-api?ref=github-workflow-kit-readme)** to build your Workflow Editor UI. 21 | 22 |  23 | 24 | ## Installation 25 | 26 | Workflow kit requires the [Inngest TypeScript SDK](https://github.com/inngest/inngest-js) as a dependency. You can install both via `npm` or similar: 27 | 28 | ```shell {{ title: "npm" }} 29 | npm install @inngest/workflow-kit inngest 30 | ``` 31 | 32 | ## Documentation 33 | 34 | The full Workflow kit documentation is available [here](https://www.inngest.com/docs/reference/workflow-kit). You can also jump to specific guides and references: 35 | 36 | - [Creating workflow actions](https://www.inngest.com/docs/reference/workflow-kit/actions?ref=github-workflow-kit-readme) 37 | - [Using the workflow engine](https://www.inngest.com/docs/reference/workflow-kit/engine?ref=github-workflow-kit-readme) 38 | - [Workflow instance format](https://www.inngest.com/docs/reference/workflow-kit/workflow-instance?ref=github-workflow-kit-readme) 39 | - [Components API (React)](https://www.inngest.com/docs/reference/workflow-kit/components-api?ref=github-workflow-kit-readme) 40 | 41 | ## Examples 42 | 43 | See Workflow kit in action in fully functioning example projects: 44 | 45 | - [Next.js Blog CMS](/examples/nextjs-blog-cms#readme) - A ready-to-deploy Next.js demo using the Workflow Kit, Supabase, and OpenAI to power some AI content workflows. 46 | 47 | ## License 48 | 49 | [Apache 2.0](/packages/workflow/LICENSE.md) 50 | -------------------------------------------------------------------------------- /examples/nextjs-blog-cms/components/automation-editor.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { Editor, Provider, Sidebar } from "@inngest/workflow-kit/ui"; 3 | import { SaveIcon } from "lucide-react"; 4 | import { useRouter } from "next/navigation"; 5 | import { useCallback, useState } from "react"; 6 | 7 | import { type Workflow } from "@/lib/supabase/types"; 8 | 9 | import { Button } from "@/components/ui/button"; 10 | import { 11 | Card, 12 | CardContent, 13 | CardDescription, 14 | CardFooter, 15 | CardHeader, 16 | CardTitle, 17 | } from "@/components/ui/card"; 18 | 19 | import { updateWorkflow } from "@/app/actions"; 20 | import { actions } from "@/lib/inngest/workflowActions"; 21 | 22 | import "@inngest/workflow-kit/ui/ui.css"; 23 | import "@xyflow/react/dist/style.css"; 24 | 25 | export const AutomationEditor = ({ workflow }: { workflow: Workflow }) => { 26 | const router = useRouter(); 27 | const [workflowDraft, updateWorkflowDraft] = 28 | useState{engineAction.name}
25 |{engineAction.description}
26 |