Built for Next.js 16

Visual Workflow Builder for Next.js

A plugin that adds drag-and-drop workflow editing, code generation, AI-powered automation, and an extensible integration system to any Next.js application.

Get Started

$npm i next-workflow-builder

Workflow Builder screenshot showing the visual drag-and-drop editor

Everything you need to build workflows

A complete workflow automation platform, packaged as a single Next.js plugin.

Drag-and-Drop Editor

Build workflows visually with a node-based canvas. Connect triggers, actions, and conditions with an intuitive drag-and-drop interface powered by React Flow.

Plugin System

Extend with any third-party service. Each plugin defines credentials, actions, step handlers, and custom routes. Auto-discovered and type-safe.

Code Generation

Export any workflow as standalone TypeScript code. Download as a ZIP or view in the built-in code editor. Ready to run outside the builder.

AI-Powered Generation

Describe a workflow in natural language and let AI generate the nodes, edges, and configuration. Supports OpenAI and Anthropic providers.

Real-Time Execution

Run workflows with live status tracking and step-by-step logs. Support for webhooks, scheduled cron triggers, and manual execution.

Drop-In Integration

Add to any Next.js app with a config wrapper, one API route, a layout component, and a catch-all page. Full workflow platform in under 10 lines of code.

Up and running in minutes

Three files. That's all it takes to add a complete workflow platform to your Next.js app.

1Configure Next.js

next.config.ts

import type { NextConfig } from "next";
import nextWorkflowBuilder from "next-workflow-builder";

const withNextWorkflowBuilder = nextWorkflowBuilder({
  // NextWorkflowBuilder-specific options (e.g. authOptions, debug)
});

export default withNextWorkflowBuilder({
  // Regular Next.js options
} satisfies NextConfig);

2Create API route

app/api/[[...slug]]/route.ts

export { GET, POST, PUT, PATCH, DELETE, OPTIONS } from "next-workflow-builder/api";

3Add layout and pages

app/layout.tsx + app/[[...slug]]/page.tsx

// layout.tsx
import { Layout } from "next-workflow-builder/client";
import "next-workflow-builder/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Layout>{children}</Layout>
      </body>
    </html>
  );
}

// [[...slug]]/page.tsx
export { WorkflowPage as default } from "next-workflow-builder/client";
export { generateWorkflowMetadata as generateMetadata } from "next-workflow-builder/server";

Extensible plugin system

Each plugin is a self-contained directory with credentials, actions, step handlers, and optional routes. Auto-discovered and fully typed.

plugins/my-service/index.ts

import { type IntegrationPlugin, registerIntegration } from "next-workflow-builder/plugins";
import { MyServiceIcon } from "./icon";

const myPlugin: IntegrationPlugin = {
  type: "my-service",
  label: "My Service",
  description: "Connect to My Service",
  icon: MyServiceIcon,
  formFields: [
    { id: "apiKey", label: "API Key", type: "password",
      configKey: "apiKey", envVar: "MY_SERVICE_KEY" },
  ],
  actions: [
    { slug: "do-thing", label: "Do Thing",
      description: "Performs an action",
      category: "My Service",
      stepFunction: "doThingStep",
      stepImportPath: "do-thing",
      configFields: [
        { key: "input", label: "Input",
          type: "template-textarea", required: true },
      ],
      outputFields: [
        { field: "result", description: "The output" },
      ],
    },
  ],
};

registerIntegration(myPlugin);

export default myPlugin;

Start building workflows today

Add a visual workflow builder to your Next.js app in minutes. Open source, fully typed, and extensible with plugins.

Get started Read the docs