Complete User & Developer Guide · Voice, Browser & Cultural AI Studio

Welcome to Browsevibe

Browsevibe is a visual, multiplayer AI workflow studio that combines Wispr Flow voice-to-workflow control, self-healing cloud stealth browsers (Browserbase + Stagehand v4), Qloo's Taste AI™ cultural affinity graph, Google Gemini synthesis, and Trigger.dev durable execution. This guide walks you through everything from creating your first workflow in 60 seconds to mastering every node.

Launch Canvas Studio Jump to 60-Second Quickstart Browse All 12 Nodes

Video guides

Watch how to build workflows

Short walkthroughs for creating a workflow, using a starter template, and passing data between nodes.

Create a simple workflow

Learn the basic steps for creating a workflow.

Startup Subculture & Competitor Positioning

See how the template compares subculture audiences and competitor positioning.

Pass data between nodes

Learn how to use one node’s output as another node’s input.

Section 01

60-Second Quickstart: Your First Workflow

There are three ways to create and run a workflow in Browsevibe. Pick whichever fits your style:

Fastest (Recommended)

Option A: 1-Click Starter Blueprint

Open /launch and click one of the 5 starter templates (e.g., Web-to-Taste Auto-Discovery).
Or inside any open canvas, go to the right sidebar → Toolbar tab → Starter Workflow Blueprints.
Click the Run button (▶) in the top-right header to execute immediately.

Try a Starter Template

Natural Language

Option B: Ask the AI Agent Builder

Click + New workflow on /launch.
In the right sidebar, switch to the AI tab.
Type a prompt like: “Find Tokyo venues aligned with Radiohead & Haruki Murakami and synthesize a VIP itinerary.”
Click Apply to canvas (or toggle Live Sync On) and hit Run!

Learn AI Builder Tricks

Visual Control

Option C: Build Step-by-Step on Canvas

Open the right sidebar → Toolbar tab and click nodes to add them to the canvas.
Drag from a node's right handle to the next node's left handle to connect them.
Click any node to configure its fields in the Editor tab and insert upstream {{ }} tokens.

See How Data Piping Works

Section 02

How Browsevibe Works: Bi-Directional Taste & Web Loops

Standard LLMs hallucinate cultural taste, while recommendation APIs cannot browse live websites. Browsevibe bridges both in two directions:

Direction 1: Taste ➔ Live Web Action

Start with Cultural Taste, Verify & Act on the Live Web

Resolve favorite artists, films, or authors in Qloo Taste Seeds ➔ get cross-domain venues or brands via Qloo Recommendations ➔ launch a Stagehand Cloud Browser to check live menus, reviews, or pricing ➔ send a curated brief via Send Email.

Qloo Taste Seeds→Qloo Local / Recommend→Open URL & Extract→Send Email

Direction 2: Live Web ➔ Taste Auto-Discovery

Scrape Any Live Webpage, Auto-Resolve into Qloo Taste Graph

Open any live URL (e.g., a festival lineup, roster page, or Wikipedia article) with Open URL ➔ use Stagehand Extract to pull names ➔ pipe {{ extract.data }} directly into Qloo Taste Seeds (which auto-parses JSON and lists) ➔ generate brand matches & an AI Sponsorship Pitch.

Open URL→Stagehand Extract→Qloo Auto-Resolve→AI Synthesizer

Section 03

Interactive Node Catalog (All 12 Nodes)

Filter by category or search fields and outputs. Click any {{ step.output }} chip to copy its output property name.

Start

type: "start"

trigger

Configurable Fields (0)

No inputs required — triggers on manual click.

Outputs for Downstream Piping (0)

Starts execution pipeline.

Schedule Trigger

type: "schedule"

trigger

Configurable Fields (10)

Repeat(frequency)*Run on(dateTime)*Run at(time)*Day of week(weekday)*Day of month(monthday)*Cron pattern(cron)*Timezone(timezone)*

Outputs for Downstream Piping (0)

Starts execution pipeline.

Open URL

type: "open-url"

action

Configurable Fields (1)

URL(url)*

Outputs for Downstream Piping (2)

Act

type: "act"

action

Configurable Fields (1)

Instruction(instruction)*

Outputs for Downstream Piping (3)

Extract

type: "extract"

action

Configurable Fields (1)

Instruction(instruction)*

Outputs for Downstream Piping (1)

Observe

type: "observe"

action

Configurable Fields (1)

Instruction(instruction)*

Outputs for Downstream Piping (1)

AI Cultural Synthesizer

type: "ai-synthesize"

action

Configurable Fields (3)

Deliverable format(format)*Synthesis goal(instruction)*Upstream data & signals(contextData)*

Outputs for Downstream Piping (4)

Send Email

type: "send-email"

action

Configurable Fields (4)

Send with(provider)*Recipient email(to)*Subject(subject)*Body(body)*

Outputs for Downstream Piping (1)

Qloo Taste Seeds

type: "qloo-search"

action

Configurable Fields (2)

Favorite(s) or Extracted Web Text(query)*Category(entityType)*

Outputs for Downstream Piping (7)

Qloo Recommendations

type: "qloo-recommend"

action

Configurable Fields (6)

Taste seed IDs or names(entityIds)*Recommend category(targetType)*City / Location (Optional)(city)Mood / Vibe Signals (Optional)(vibeTags)Exclude / Dislike Seeds (Optional)(negativeSeeds)Result count(limit)

Outputs for Downstream Piping (7)

Qloo Local Discovery

type: "qloo-local"

action

Configurable Fields (4)

Taste seed IDs or names(entityIds)*City(city)*Venue Mood / Tags (Optional)(vibeTags)Result count(limit)

Outputs for Downstream Piping (7)

Qloo Taste Overlap

type: "qloo-compare"

action

Configurable Fields (4)

Profile A (Seeds or IDs)(firstSeeds)*Profile B (Seeds or IDs)(secondSeeds)*Bridge Category(targetType)*City (Optional)(city)

Outputs for Downstream Piping (6)

Qloo Audience Persona

type: "qloo-demographics"

action

Configurable Fields (1)

Brand, Artist, or Seed IDs(entityIds)*

Outputs for Downstream Piping (4)

Section 04

Dynamic Data Piping (`{{ nodeId.outputPath }}`)

Every action node produces structured outputs that downstream nodes can reference dynamically. You never have to type raw UUIDs by hand!

How to Connect & Pipe Data in 3 Steps:

Step 1 · Wire the Edge

Drag an edge from the upstream node's right handle to the downstream node's left handle on the canvas.

Step 2 · Focus a Target Field

Click the downstream node to open the Editor tab in the right sidebar, then click inside the input or textarea where you want data inserted.

Step 3 · Click a Connection Chip

Under the Connections panel at the bottom of the Editor tab, click any output chip (e.g. Selected entity IDs or Top pick name) to insert the token automatically.

Common Piping Patterns:

• Stagehand Extract ➔ Qloo Taste Seeds: {{ <extractNodeId>.data }}
• Qloo Taste Seeds ➔ Qloo Recommendations: {{ <seedsNodeId>.entityIds }}
• Qloo Local Discovery ➔ Open URL: https://www.google.com/search?q={{ <localNodeId>.searchQuery }}
• AI Cultural Synthesizer ➔ Send Email Body: {{ <synthesizeNodeId>.summary }}

Section 05

Wispr Flow Voice Studio & Conversational AI Builder

Build, edit, and configure workflows hands-free using Wispr Flow Desktop on the canvas or chat in the AI sidebar tab.

Floating Wispr Flow Voice Bar (⌘K / Ctrl+K)

Press ⌘K (or click Speak with Wispr Flow at the bottom of the canvas), hold your Wispr Flow Desktop hotkey, and speak any workflow. With Auto-Build On, the studio detects when Wispr Flow finishes pasting your dictated sentence and automatically builds & live-syncs the workflow onto the canvas hands-free!

One-Shot Vibe Dictation & Spoken {{ }} Tokens

In the Node Editor, use the Dictate Vibe with Wispr Flow box to speak one sentence (e.g. “Cozy vinyl bars in Tokyo for fans of Radiohead, avoid tourist traps”) and auto-fill Seeds, Category, City, Vibe Tags, and Exclude fields at once. You can also say “insert entity IDs” or “insert top pick name” in any field to insert upstream {{ }} tokens by voice!

Live Sync vs. Draft Mode

Toggle Live Sync On in the AI header to apply every AI response directly onto your canvas in real time. Or leave it in Draft Mode to inspect NEW and EDITED step diffs before clicking Apply to canvas.

Selected-Node Targeting & In-Place Edits

Click any node on the canvas while using the Wispr Flow Voice Bar or the AI tab. Your spoken or typed instruction is automatically scoped to that node and updates existing nodes in place without creating duplicates.

Section 06

Qloo Taste AI™ Deep Dive & Supported Domains

Browsevibe supports all 10 official Qloo entity categories plus in-editor live entity resolution, mood tags, negative seeds, taste overlap, and audience demographics.

Domain Label	Qloo URN	Example Seeds
Artist / Musician	urn:entity:artist	Radiohead, Daft Punk, Ryuichi Sakamoto
Place / Venue / Dining	urn:entity:place	Blue Bottle, Bar Benfiddich, Dover Street Market
Movie / Film	urn:entity:movie	Spirited Away, Past Lives, Grand Budapest Hotel
TV Show	urn:entity:tv_show	The Bear, Severance, Succession
Book / Author	urn:entity:book	Haruki Murakami, Kafka on the Shore
Brand / Fashion / Lifestyle	urn:entity:brand	Acne Studios, Aesop, Le Labo, Muji
Podcast	urn:entity:podcast	99% Invisible, Acquired, Song Exploder
Video Game	urn:entity:video_game	Disco Elysium, Zelda: Tears of the Kingdom
Travel Destination	urn:entity:destination	Kyoto, Reykjavik, Lisbon
Person / Creator	urn:entity:person	Wes Anderson, Hayao Miyazaki, Greta Gerwig

In-Editor “Verify in Qloo”

When editing a Qloo Taste Seeds node, click Verify in Qloo inside the right sidebar to test your query live and inspect matched Qloo Entity Names, Domains, and UUIDs before running the workflow.

Taste Overlap (`qloo-compare`)

Enter two distinct profiles (e.g., Profile A: Radiohead vs. Profile B: Daft Punk) to compute a Cultural Compatibility % Score and discover shared bridge venues or brands.

Audience Persona (`qloo-demographics`)

Pass any brand, artist, or seed IDs to get age-cohort distributions (24_and_younger through 45_to_54) and gender skew bars inside the Run Console.

Section 07

Live Run Console, Cloud Browser Replay & Taste Constellation

The bottom Run Console streams every step in real time via Trigger.dev and gives you three specialized visualizers:

Live Cloud Browser View

Whenever a workflow runs a browser step (open-url, act, extract, observe), click the Live Browser / Browser Replay tab in the console (or the pulsing LIVE VIEW badge on the active canvas node) to watch the remote Browserbase stealth session live!

Interactive Taste Constellation

On any completed Qloo step, switch between List View and Constellation inside the Qloo Taste Card to explore an interactive SVG radial affinity graph connecting your taste seeds to cross-domain recommendations.

Executive Brief Viewer

Outputs from the AI Cultural Synthesizer render in a dedicated executive card featuring the headline, bulleted key takeaways, narrative body, and recommended next action.

Section 08

5 Pre-Built Starter Blueprints

Every blueprint can be launched in 1 click from /launch or from the right sidebar Toolbar inside any workflow.

Flagship 6-Step

Web-to-Taste Auto-Discovery

Scrapes live cultural entities from a webpage, resolves them into Qloo Taste Seeds automatically, finds aligned lifestyle brands, and writes a sponsorship pitch deck brief.

Start → Open URL (Wikipedia) → Stagehand Extract → Qloo Taste Seeds → Qloo Brand Match → AI Sponsorship Pitch

Launch from /launch

Full Agent Pipeline

Autonomous Cultural Concierge

Turns Radiohead & Haruki Murakami into hyper-local Tokyo venue recommendations, verifies the top venue on the live web, and emails a bespoke itinerary.

Start → Qloo Taste Seeds → Qloo Local (Tokyo) → Open URL (Live Web Check) → Send VIP Email

Launch from /launch

Cross-Domain

Brand Affinity Scout

Maps film aesthetics (Wes Anderson, Studio Ghibli) to high-affinity fashion & lifestyle brands for partnership scouting.

Start → Cinema Aesthetic Seeds → Qloo Brand Recommendations → Send Email Report

Launch from /launch

Positioning & Competitor Research

Startup Subculture & Competitor Positioning

Compare how three cultural subcultures respond to a startup’s product, research competitors for each audience, and create a positioning brief.

Startup URL → Product Positioning → 3 Subculture Branches → Competitor Research → Positioning Brief

Launch from /launch

Local Discovery

Local Hotspots Explorer

Fast 3-step pipeline that turns musical taste into explainable dining, coffee, and nightlife picks in any city.

Start → Favorite Artist Seed → Qloo Local Discovery (New York)

Launch from /launch

Section 09

Local Setup, Environment Keys & Troubleshooting

Running Browsevibe locally requires two processes: the Next.js app server and the Trigger.dev background worker.

Terminal 1 — Next.js Studio App

npm install
npm run db:push
npm run dev

Terminal 2 — Trigger.dev Durable Worker

npx trigger.dev@latest dev

Required Environment Variables (.env)

# Database (Neon Serverless Postgres)
DATABASE_URL="postgresql://..."

# Qloo Taste AI™ API
QLOO_API_KEY="your_qloo_hackathon_api_key"
QLOO_BASE_URL="https://hackathon.api.qloo.com"

# Google Gemini API (AI Builder, Cultural Synthesizer & Stagehand)
GEMINI_API_KEY="AIzaSy..."

# Browserbase & Stagehand v4 (Cloud Stealth Browsers)
BROWSERBASE_API_KEY="bb_live_..."

# Trigger.dev v4 (Background Execution & Realtime Streams)
TRIGGER_SECRET_KEY="tr_dev_..."

# Liveblocks (Multiplayer Canvas & Presence)
LIVEBLOCKS_SECRET_KEY="sk_dev_..."

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."

# Email Delivery (Resend or Gmail App Password)
RESEND_API_KEY="re_..."
RESEND_FROM_EMAIL="Browsevibe <onboarding@resend.dev>"

Welcome to Browsevibe

Watch how to build workflows

Create a simple workflow

Startup Subculture & Competitor Positioning

Pass data between nodes

60-Second Quickstart: Your First Workflow

Option A: 1-Click Starter Blueprint

Option B: Ask the AI Agent Builder

Option C: Build Step-by-Step on Canvas

How Browsevibe Works: Bi-Directional Taste & Web Loops

Start with Cultural Taste, Verify & Act on the Live Web

Scrape Any Live Webpage, Auto-Resolve into Qloo Taste Graph

Interactive Node Catalog (All 12 Nodes)

Start

Schedule Trigger

Open URL

Act

Extract

Observe

AI Cultural Synthesizer

Send Email

Qloo Taste Seeds

Qloo Recommendations

Qloo Local Discovery

Qloo Taste Overlap

Qloo Audience Persona

Dynamic Data Piping ({{ nodeId.outputPath }})

How to Connect & Pipe Data in 3 Steps:

Wispr Flow Voice Studio & Conversational AI Builder

Qloo Taste AI™ Deep Dive & Supported Domains

In-Editor “Verify in Qloo”

Taste Overlap (qloo-compare)

Audience Persona (qloo-demographics)

Live Run Console, Cloud Browser Replay & Taste Constellation

5 Pre-Built Starter Blueprints

Web-to-Taste Auto-Discovery

Autonomous Cultural Concierge

Brand Affinity Scout

Startup Subculture & Competitor Positioning

Local Hotspots Explorer

Local Setup, Environment Keys & Troubleshooting

Dynamic Data Piping (`{{ nodeId.outputPath }}`)

Taste Overlap (`qloo-compare`)

Audience Persona (`qloo-demographics`)