vercel-labs/workflow-builder-template

Visual AI workflow automation platform

What it solves

This project provides a template for building an AI-driven workflow automation platform. It eliminates the need to build a visual builder from scratch by providing a drag-and-drop interface that can be converted into executable TypeScript code.

How it works

Built on the Workflow DevKit, the template uses a visual canvas (React Flow) to define automation sequences. Users can create workflows using natural language prompts via OpenAI or by manually dragging and dropping nodes. These visual workflows are then converted into type-safe TypeScript code using a specific "use workflow" directive, allowing them to be run as serverless functions.

Who it’s for

Developers who want to launch their own workflow automation service or integrate a visual AI agent builder into their existing application.

Highlights

  • AI-Powered Generation: Create entire workflows from natural language descriptions.
  • Code Generation: Automatically converts visual diagrams into executable TypeScript.
  • Extensive Integrations: Pre-built nodes for tools like Slack, GitHub, Linear, Resend, Perplexity, and Firecrawl.
  • Full-Stack Template: Includes authentication (Better Auth), database management (PostgreSQL/Drizzle), and execution tracking with detailed logs.

Related

  • Project
    chatfire-AI/huobao-canvas

    A visual AI creation canvas that allows users to orchestrate text-to-image and video generation workflows using a node-based interface.

  • Project
    bytedance/flowgram.ai

    A composable workflow development framework and toolkit for building custom AI workflow platforms with visual canvases and variable management.

  • Project
    pixel-point/toolcraft

    An open-source starter kit and UI library for building custom AI-powered design apps, providing a pre-built canvas and interface components to accelerate development.

  • Project
    deerwork-ai/deer-workflow

    A dynamic workflow runtime for building observable, reusable agent graphs using a code-first TypeScript approach to control AI agent execution.

  • Project
    biaogebusy/web-builder

    An AI-powered low-code platform for building responsive web applications and tool apps using a visual drag-and-drop interface and a headless Drupal backend.