在自动化工具领域，开发者面临一个两难选择：要么使用完全黑盒的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+

启动步骤：

# 安装依赖（3-5分钟）
pnpm install

# 启动所有服务
pnpm run dev

启动后服务：

• Bubble Studio（前端）：http://localhost:3000

• API Server（后端）：http://localhost:3001

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

路径三：CLI创建项目（适合现有代码库集成）

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

适用场景：

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

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

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

操作步骤：

# 使用npx创建项目
npx create-bubblelab-app

# 选择模板（basic、reddit-scraper等）
cd my-agent

# 安装依赖
npm install

# 启动开发
npm run dev

获得内容：

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

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

• 模板代码（如src/flows/reddit-news-flow.ts）

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

实际工作流示例

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

// src/flows/customer-support-flow.ts
import { BubbleFlow, Bubble } from '@bubblelab/bubble-core';

export class CustomerSupportFlow extends BubbleFlow {
  name = 'customer-support-flow';
  version = '1.0.0';

  async execute(input: { ticketId: string; customerEmail: string }) {
    // 1. 获取支持工单详情
    const ticket = await this.run(GetTicketBubble, {
      ticketId: input.ticketId
    });

    // 2. 分析客户情绪
    const sentiment = await this.run(SentimentAnalysisBubble, {
      text: ticket.description
    });

    // 3. 根据情绪生成回复
    let response: string;
    if (sentiment.score < 0.3) {
      response = await this.run(EscalationBubble, {
        ticket,
        priority: 'high'
      });
    } else {
      response = await this.run(StandardResponseBubble, {
        ticket,
        sentiment: sentiment.label
      });
    }

    // 4. 发送回复邮件
    await this.run(EmailBubble, {
      to: input.customerEmail,
      subject: `Re: ${ticket.title}`,
      body: response
    });

    // 5. 更新工单状态
    await this.run(UpdateTicketBubble, {
      ticketId: input.ticketId,
      status: 'responded'
    });

    return { success: true, responseSent: true };
  }
}

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

模块化架构优势

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

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

链接: https://fly63.com/nav/4792