Claude's Corner: Bubble Lab, The Workflow Builder That Actually Gives You the Code

# Build a Bubble Lab Clone with Claude Code

## Overview
A TypeScript-native agentic workflow builder with Slack distribution and open-core business model. Stack: Next.js, PostgreSQL, TypeScript AST generation, OpenAI/Claude API, Slack Bolt SDK.

---

## Step 1: Data Model, Workflows, Bubbles, and Executions

Design the core schema first. Every workflow is a DAG of typed nodes.

```sql
CREATE TABLE workflows (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  name TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'inactive' CHECK (status IN ('active','inactive','draft')),
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE bubbles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  workflow_id UUID REFERENCES workflows(id) ON DELETE CASCADE,
  type TEXT NOT NULL,  -- 'trigger' | 'action' | 'condition' | 'llm' | 'transform'
  integration TEXT,   -- 'hubspot' | 'jira' | 'slack' | 'notion' | 'openai'
  config JSONB NOT NULL DEFAULT '{}',
  position JSONB NOT NULL  -- { x: number, y: number }
);

CREATE TABLE bubble_edges (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  workflow_id UUID REFERENCES workflows(id) ON DELETE CASCADE,
  source_bubble_id UUID REFERENCES bubbles(id) ON DELETE CASCADE,
  target_bubble_id UUID REFERENCES bubbles(id) ON DELETE CASCADE
);

CREATE TABLE executions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  workflow_id UUID REFERENCES workflows(id),
  status TEXT DEFAULT 'running',
  trigger_payload JSONB,
  started_at TIMESTAMPTZ DEFAULT now(),
  finished_at TIMESTAMPTZ,
  error TEXT
);

CREATE TABLE execution_logs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  execution_id UUID REFERENCES executions(id) ON DELETE CASCADE,
  bubble_id UUID REFERENCES bubbles(id),
  status TEXT NOT NULL,
  input JSONB,
  output JSONB,
  error TEXT,
  duration_ms INTEGER,
  created_at TIMESTAMPTZ DEFAULT now()
);
```

---

## Step 2: TypeScript Code Generator, The Core Engine

Walk the bubble DAG topologically and emit typed TypeScript source.

```typescript
// src/compiler/workflow-compiler.ts
export class WorkflowCompiler {
  compile(workflow: Workflow, bubbles: Bubble[], edges: BubbleEdge[]): string {
    const adj = this.buildAdjacency(edges);
    const ordered = this.topologicalSort(bubbles, adj);
    const imports = this.generateImports(bubbles);
    const body = ordered
      .filter((b) => b.type !== "trigger")
      .map((b) => this.compileBubble(b))
      .join("\n  ");

    return `${imports}

export async function run(triggerPayload: unknown): Promise<void> {
  const ctx: Record<string, unknown> = { trigger: triggerPayload };
  ${body}
}`;
  }

  private compileBubble(b: Bubble): string {
    switch (b.type) {
      case "action":
        return `ctx["${b.id}"] = await ${b.integration}Client.${b.config.method}(${JSON.stringify(b.config.params)});`;
      case "condition":
        return `if (!(${b.config.expression})) return;`;
      case "llm":
        return `ctx["${b.id}"] = await claudeClient.messages.create({ model: "claude-opus-4-7", max_tokens: 1024, messages: ${JSON.stringify(b.config.messages)} });`;
      case "transform":
        return `ctx["${b.id}"] = (${b.config.fn})(ctx);`;
      default:
        return `// skipping unknown bubble type: ${b.type}`;
    }
  }

  private buildAdjacency(edges: BubbleEdge[]): Map<string, string[]> {
    const adj = new Map<string, string[]>();
    for (const e of edges) {
      if (!adj.has(e.source_bubble_id)) adj.set(e.source_bubble_id, []);
      adj.get(e.source_bubble_id)!.push(e.target_bubble_id);
    }
    return adj;
  }

  private topologicalSort(bubbles: Bubble[], adj: Map<string, string[]>): Bubble[] {
    const visited = new Set<string>();
    const result: Bubble[] = [];
    const map = new Map(bubbles.map((b) => [b.id, b]));
    const visit = (id: string) => {
      if (visited.has(id)) return;
      visited.add(id);
      for (const next of adj.get(id) ?? []) visit(next);
      result.unshift(map.get(id)!);
    };
    for (const b of bubbles) visit(b.id);
    return result;
  }

  private generateImports(bubbles: Bubble[]): string {
    const integrations = [...new Set(bubbles.map((b) => b.integration).filter(Boolean))];
    return integrations.map((i) => `import { ${i}Client } from "@/integrations/${i}";`).join("\n");
  }
}
```

---

## Step 3: LLM to Workflow Parser (Natural Language Interface)

```typescript
// src/lib/nl-to-workflow.ts
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic();

export async function parseNaturalLanguage(
  prompt: string,
  integrations: string[]
): Promise<{ bubbles: BubbleSpec[]; edges: EdgeSpec[] }> {
  const response = await client.messages.create({
    model: "claude-opus-4-7",
    max_tokens: 2048,
    system: `Convert automation requests to bubble graph JSON.
Available integrations: ${integrations.join(", ")}.
Return ONLY valid JSON: { bubbles: BubbleSpec[], edges: EdgeSpec[] }
BubbleSpec: { id, type, integration?, config, position: {x,y} }
EdgeSpec: { source, target }`,
    messages: [{ role: "user", content: prompt }],
  });

  const text = response.content[0].type === "text" ? response.content[0].text : "{}";
  return JSON.parse(text);
}
```

---

## Step 4: Visual DAG Editor with React Flow

```typescript
// src/components/WorkflowEditor.tsx
import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, Controls, Background } from "reactflow";
import "reactflow/dist/style.css";

export function WorkflowEditor({ workflow }: { workflow: WorkflowWithBubbles }) {
  const [nodes, setNodes, onNodesChange] = useNodesState(
    workflow.bubbles.map((b) => ({
      id: b.id,
      type: "default",
      position: b.position as { x: number; y: number },
      data: { label: `${b.integration ?? b.type}: ${b.config.method ?? ""}` },
    }))
  );
  const [edges, setEdges, onEdgesChange] = useEdgesState(
    workflow.edges.map((e) => ({ id: e.id, source: e.source_bubble_id, target: e.target_bubble_id, animated: true }))
  );

  return (
    <div style={{ height: "70vh" }}>
      <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange} onConnect={(p) => setEdges((eds) => addEdge(p, eds))} fitView>
        <Controls /><Background />
      </ReactFlow>
    </div>
  );
}
```

---

## Step 5: Slack Bot (Pearl) with Bolt SDK

```typescript
// src/slack/pearl.ts
import { App } from "@slack/bolt";
import { parseNaturalLanguage } from "@/lib/nl-to-workflow";
import { WorkflowCompiler } from "@/compiler/workflow-compiler";
import { saveWorkflow, activateWorkflow } from "@/lib/workflow-service";

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN,
});

app.event("app_mention", async ({ event, say }) => {
  const prompt = event.text.replace(/<@[^>]+>/, "").trim();
  await say(`Building workflow: _${prompt}_`);

  try {
    const { bubbles, edges } = await parseNaturalLanguage(prompt, [
      "hubspot", "jira", "notion", "slack", "stripe", "google_workspace",
    ]);
    const workflow = await saveWorkflow({ name: prompt, bubbles, edges });
    const code = new WorkflowCompiler().compile(workflow, bubbles, edges);
    await activateWorkflow(workflow.id);

    await say({ blocks: [
      { type: "section", text: { type: "mrkdwn", text: `*Done!* Workflow live with ${bubbles.length} steps.` } },
      { type: "section", text: { type: "mrkdwn", text: "```" + code.slice(0, 300) + "...```" } },
    ]});
  } catch (err) {
    await say(`Error: ${String(err)}`);
  }
});

export { app as pearlApp };
```

---

## Step 6: Execution Engine with Sandboxed Runtime

```typescript
// src/engine/executor.ts
import { NodeVM } from "vm2";
import { db } from "@/lib/db";
import { WorkflowCompiler } from "@/compiler/workflow-compiler";

export class WorkflowExecutor {
  async execute(workflowId: string, triggerPayload: unknown): Promise<string> {
    const exec = await db.executions.create({ data: { workflow_id: workflowId, status: "running" } });
    const workflow = await db.workflows.findWithBubbles(workflowId);

    try {
      const code = new WorkflowCompiler().compile(workflow, workflow.bubbles, workflow.edges);
      const vm = new NodeVM({ require: { external: true } });
      const mod = vm.run(code, "/tmp/wf.js");
      await mod.run(triggerPayload);
      await db.executions.update({ where: { id: exec.id }, data: { status: "success", finished_at: new Date() } });
    } catch (err) {
      await db.executions.update({ where: { id: exec.id }, data: { status: "failed", error: String(err), finished_at: new Date() } });
      throw err;
    }

    return exec.id;
  }
}
```

---

## Step 7: Integration Connectors + n8n Import + Deployment

**Integration pattern (HubSpot example):**
```typescript
// src/integrations/hubspot.ts
import { Client } from "@hubspot/api-client";
const hs = () => new Client({ accessToken: process.env.HUBSPOT_TOKEN! });

export const hubspotClient = {
  updateContact: (id: string, props: Record<string, string>) =>
    hs().crm.contacts.basicApi.update(id, { properties: props }),
  createDeal: (props: Record<string, string>) =>
    hs().crm.deals.basicApi.create({ properties: props }),
};
```

**n8n workflow importer:**
```typescript
// src/importers/n8n.ts
export function importN8nWorkflow(json: N8nWorkflow) {
  const bubbles = json.nodes.map((n) => ({
    id: n.id, type: mapN8nType(n.type), integration: mapN8nIntegration(n.type),
    config: n.parameters, position: { x: n.position[0], y: n.position[1] },
  }));
  const edges = Object.entries(json.connections ?? {}).flatMap(([src, targets]) =>
    Object.values(targets).flat().flat().map((t) => ({ source: src, target: t.node }))
  );
  return { bubbles, edges };
}
```

**Deploy stack:**
- App: Railway or Fly.io (Next.js + Bolt socket mode)
- DB: Neon or Supabase (Postgres)
- Queue: BullMQ + Redis (Upstash) for async workflow execution
- Webhooks: Vercel edge functions for ultra-low-latency trigger receipt
- Open-source: Apache-2.0, Docker Compose for self-hosting