workflow-builder-template
Vercel 出品的可视化 AI 工作流自动化平台，支持拖拽编辑、自然语言生成和 TypeScrip
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
Vercel 出品的可视化 AI 工作流自动化平台，支持拖拽编辑、自然语言生成和 TypeScrip
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
想象一下这样的场景：产品经理在 Linear 里提交了一个 Bug，工单自动触发 Slack 通知，同时 Firecrawl 抓取相关文档，AI 生成修复建议，最后通过 Resend 把报告发给开发——整个流程无需人工干预，全部由「可视化工作流」自动串联完成。这正是 Vercel Workflow Builder Template 正在实现的事情。
作为 Vercel Labs 出品的开源模板项目，它将曾经属于企业级的「工作流自动化」能力，以开源模板的形式免费开放给所有开发者。1144 个 GitHub Stars、TypeScript + Next.js 16 的技术栈、以及对 14 种第三方服务的开箱即用集成，使其成为当前 AI 工作流自动化领域最具参考价值的开源项目之一。
图1：Workflow Builder 可视化编辑器界面（来源：项目截图）
工作流自动化（Workflow Automation）并非新鲜概念。Zapier、Make（原 Integromat）等商业平台早已验证了这一市场需求。但这些平台存在几个根本局限：
黑盒问题：用户无法深入了解工作流执行的内部逻辑，调试困难，一旦出错只能依赖平台方排查。定制化受限：复杂的业务逻辑往往超出平台预设的连接器范围，扩展成本极高。数据主权：将核心业务流程交给第三方平台，数据隐私和合规性成为隐患。
AI 浪潮的到来让这些问题更加突出：大模型（如 GPT-4、Claude）可以理解自然语言、生成代码、进行复杂推理，但缺乏「手脚」——无法直接操作外部系统。将 AI 的「思考能力」与外部服务的「执行能力」连接起来，正是 Workflow Builder Template 试图解决的核心问题。
项目采用 React Flow（@xyflow/react）作为核心绘图引擎，提供类似 Figma 的拖拽式节点编辑器。用户可以在画布上自由添加四类节点：Trigger（触发器）、Action（动作）、Condition（条件判断） 和 Transform（数据转换）。
每个节点通过连线建立数据依赖关系，连线上的数据可以实时预览。这种设计让复杂的工作流逻辑变得直观可见，大幅降低了理解和维护成本。
项目内置了 14 个官方插件，覆盖主流 SaaS 服务：
| 类别 | 插件 | 功能 |
|---|---|---|
| AI/内容 | AI Gateway、Perplexity、fal.ai、Superagent | 文本生成、图像生成、网络搜索、AI 审查 |
| 通信 | Resend、Slack | 邮件发送、Slack 消息推送 |
| 协作 | Linear、GitHub | 任务工单管理、Issue 操作 |
| 支付 | Stripe | 客户管理、发票创建 |
| CMS | Webflow | 站点管理和发布 |
| 身份 | Clerk | 用户账户管理 |
| 数据 | Blob | 文件存储 |
更重要的是，项目设计了 scripts/discover-plugins.ts 自动发现机制，开发者只需在 plugins/ 目录下创建新插件文件夹，系统即可自动注册，无需修改核心代码。
这是该项目最具技术深度的功能之一。用户完成可视化工作流设计后，系统可以将其转换为可执行的 TypeScript 代码：
export async function welcome(email: string, name: string, plan: string) {
"use workflow";
const { subject, body } = await generateEmail({ name, plan });
const { status } = await sendEmail({ to: email, subject, body });
return { status, subject, body };
}
「use workflow」指令让 Next.js 服务器端函数直接以工作流引擎模式执行。生成的代码具有完整的类型提示、真实的集成调用和错误处理逻辑，可以直接集成到业务代码中。
用户只需输入「帮我创建一个当 Linear 有新 Bug 时自动发送 Slack 通知的工作流」，AI 即可根据描述自动生成可视化工作流。这一能力依托于 ai SDK（@ai-sdk/provider）调用 AI Gateway 实现。
项目基于 Next.js 16.0.10 + React 19.2.1，是全球最早采用 React 19 的生产级开源项目之一。UI 层面使用了 shadcn/ui 组件库（基于 Radix UI）、Tailwind CSS 4 和 Tailwind Animate CSS 动效方案。
代码编辑器使用了 Monaco Editor（VS Code 同款），用于工作流配置的 JSON 编辑；字体渲染采用 next/font 优化加载性能。动画方面全面引入 Motion（原 Framer Motion）库，提供流畅的节点拖拽和面板切换动画。
插件是项目的核心扩展机制。每个插件目录包含 index.ts 定义节点类型，以及各自的数据模型。插件通过统一的 TypeScript 接口规范注册，系统在启动时通过 discover-plugins.ts 自动扫描并加载。
最低要求 Node.js 18+、pnpm 包管理器，以及一个 PostgreSQL 数据库实例。首次运行需要执行数据库迁移（pnpm db:push），然后启动开发服务器（pnpm dev）。
项目不支持原生 Docker 部署（无 Dockerfile/docker-compose），也没有 Kubernetes manifest。主要部署路径是 Vercel 平台一键部署：
对于不熟悉 Vercel 的开发者，需要自行准备 PostgreSQL 数据库并配置环境变量，有一定学习曲线。
纯 Web 应用，无需 GPU，适合在普通云服务器（2GB RAM）上运行。
1. 严重依赖 Vercel 生态
虽然代码本身是开源的，但项目的设计理念与 Vercel 平台深度绑定：Neon 数据库（Vercel 关联服务）、AI Gateway（Vercel AI 服务）、Vercel 部署按钮。这种绑定虽然降低了上手门槛，但也意味着迁移到其他平台存在较大阻力。
2. 插件质量参差不齐
部分插件（如 fal.ai、Superagent）功能较为基础，实际生产环境的复杂业务逻辑可能需要开发者自行扩展。插件的错误处理和重试机制目前也比较简单，缺乏熔断器设计。
3. 工作流状态持久化
工作流执行状态的存储依赖 PostgreSQL，在高并发场景下可能面临连接池瓶颈。项目尚未引入消息队列（如 Redis、RMQ），这使得「长时间运行工作流」的可靠性存疑。
4. 可视化编辑器的性能
随着节点数量增加（50+），React Flow 的渲染性能可能出现卡顿。项目尚未引入虚拟化或分组折叠机制。
Vercel Workflow Builder Template 代表了一个明确趋势：AI 时代的工作流自动化正在从「配置式」向「代码生成式」演进。传统的 Zapier 模式是「用户配置触发器和动作」，而该项目尝试的是「用户用自然语言描述意图，AI 生成可视化工作流，再转换为可部署的 TypeScript 代码」——三个阶段形成完整闭环。
这一模式的优势在于：保留了可视化编辑的易用性，同时提供了代码级别的透明度和可定制性。如果该项目持续发展，可能会成为 AI Agent 工作流编排领域的重要开源基础设施。
| 维度 | 评分 | 说明 |
|---|---|---|
| 功能完整性 | ★★★★☆ | 14 种插件覆盖主流场景，代码生成是亮点 |
| 技术先进性 | ★★★★★ | Next.js 16 + React 19 + React Flow，技术前沿 |
| 部署便捷性 | ★★★☆☆ | Vercel 一键部署，但自托管门槛较高 |
| 可扩展性 | ★★★★☆ | 插件系统设计清晰，扩展成本低 |
| 文档质量 | ★★★★☆ | README 详细，但高级用法文档不足 |
如果你正在构建需要 AI 驱动的业务流程自动化系统，或者想学习如何设计一个现代化的插件化工作流引擎，这个项目值得深入研究。