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.
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.
MCP Server
Let AI agents manage workflows via the Model Context Protocol. OAuth 2.1 authentication, dynamic client registration, and 10 built-in tools. Works with Claude Desktop and Claude Code.
Built-In Integrations
Control flow out of the box with built-in Switch, Loop, Condition, and Merge nodes. Route, iterate, filter, and combine data without any plugins.
Up and running in minutes
Three files. That's all it takes to add a complete workflow platform to your Next.js app.
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);export { GET, POST, PUT, PATCH, DELETE, OPTIONS } from "next-workflow-builder/api";// 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.
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.