核心定位:工作流即代码

在自动化工具领域,开发者面临一个两难选择:要么使用完全黑盒的SaaS平台,业务逻辑被锁定无法导出;要么使用纯代码方案,牺牲可视化编排的直观性。Bubble Lab试图走出一条中间道路——让你通过可视化方式编排工作流,最终得到可以完全拥有、调试和部署的生产级TypeScript代码。


核心定位:工作流即代码

传统的工作流工具(如N8N、LangGraph Studio、Flowise)本质上是解释型的:你将节点连接起来,生成JSON/YAML配置,然后由它们的运行时解析执行。这意味着你的业务逻辑被"冻结"在专有格式中。

Bubble Lab采用完全不同的哲学——它将画布上的每次拖拽和连线,都视为对TypeScript抽象语法树(AST)的修改。点击"保存"时,它不是在生成JSON,而是在创建人类可读、类型安全、可直接放入后端仓库的源代码文件。

实际意义

假设你在构建Reddit舆情监控工具。使用传统工具搭建完抓取-总结-通知流程后,你只能在其平台上运行。当需要将流程嵌入自己的SaaS产品或本地测试边界情况时,你必须重写逻辑。

而Bubble Lab从一开始就提供源代码:reddit-news-flow.ts。你可以将其放入src/workflows/目录,像普通模块一样进行导入、单元测试、代码审查和版本控制。画布只是"高级编辑器",代码才是唯一的真相来源。


三种入门路径

路径一:托管Bubble Studio(适合快速验证)

如果你不想折腾本地依赖,或希望先验证想法再决定是否引入技术债务,这是最直接的路径。

适用场景:

  • 产品团队需要快速搭建"用户反馈自动分类"原型

  • 市场部门需要"竞品网站抓取和周报生成"工具

  • 独立开发者希望验证AI自动化创意

操作流程:

  1. 访问 https://app.bubblelab.ai

  2. 使用邮箱或GitHub账号登录

  3. 在画布上拖拽和连接节点

  4. 点击"运行"测试

  5. 满意后点击"导出",下载完整TypeScript项目包

获得内容:

  • 可视化设计器,支持拖拽、缩放和节点配置

  • 内置AI助手(需配置api Key),可用自然语言生成初始流程

  • 完整运行时日志:节点输入输出、Token消耗、内存使用、执行时间

  • 免费的AI额度(用于流程生成)

  • 零配置和零运维

路径二:本地源码启动(适合深度定制)

如果需要修改Bubble Lab本身,或在完全隔离的内网环境中使用,此路径是必需的。

适用场景:

  • 金融科技公司要求所有流程在VPC内运行

  • 需要为Bubble Lab开发新的节点类型

  • 需要调试react源码中的问题

前置条件:

  • Bun:后端API服务依赖Bun运行时(建议1.0+)

  • pnpm:Monorepo管理,必须使用它安装依赖

  • Node.js:前端和CLI工具链需要v18+

启动步骤:

启动后服务:

  • Bubble Studio(前端):http://localhost:3000

  • API Server(后端):http://localhost:3001

环境会自动初始化,包括创建.env文件、SQLite数据库和开发用户。

路径三:CLI创建项目(适合现有代码库集成)

如果你已有Express/Fastify/NestJS后端,希望将工作流作为其中一部分,这是最优雅的方式。

适用场景:

  • SaaS产品需要允许客户自定义业务流程

  • 希望将AI工作流嵌入现有微服务体系

  • 团队要求所有业务逻辑必须用TypeScript编写

操作步骤:

获得内容:

  • 标准Node.js/TypeScript项目结构

  • 预安装的@bubblelab/bubble-core和@bubblelab/bubble-runtime

  • 模板代码(如src/flows/reddit-news-flow.ts)

  • 可独立运行,无需Bubble Lab生态系统


实际工作流示例

以下是一个真实的工作流代码示例,展示50行TypeScript能实现的功能:

这个工作流展示了完整的客户支持自动化流程,包括工单获取、情绪分析、回复生成和状态更新。


模块化架构优势

Bubble Lab采用pnpm workspace管理的Monorepo结构,实现真正的分层抽象:

核心包层

应用层

  • bubble-studio:基于React + Vite的可视化编辑器,通过WebSocket与后端通信,实时保存.ts文件

  • bubblelab-api:基于Bun + Hono的轻量级API服务,负责存储流程元数据和管理用户

这种架构让"编写工作流"和"运行工作流"成为两个独立阶段。你可以导入BubbleFlow编写流程时无需关心运行时调度,而在生产服务中导入Runtime时也无需知道流程的创建方式。


开发与生产环境配置

开发模式

  • 自动环境初始化

  • SQLite开发数据库

  • Mock用户自动创建

  • 热重载和实时编译

  • 详细的调试日志

生产模式

  • 需要手动环境配置

  • 生产级数据库(PostgreSQL)

  • 真实的用户认证

  • 优化的编译输出

  • 可配置的日志级别


实际应用场景

企业级部署

全栈工程师可以将bubble-runtime集成到现有的NestJS服务中,让流程作为HTTP接口被调用;同时将bubble-studio部署到内部VPN,让产品经理通过拖拽生成流程。两者通过Git仓库同步——Studio生成的代码提交到Git,NestJS服务通过webhook拉取最新代码。

独立使用

对于中小型项目,可以直接使用CLI创建的项目结构,将工作流作为独立的微服务部署,通过REST API或消息队列与其他服务通信。

Bubble Lab代表了工作流工具的新方向:既保持可视化开发的便利性,又不牺牲代码的透明度和控制权。这种"设计器与执行器分离"的架构,为各种规模的企业提供了极大的灵活性。

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!