Using Workflow Lab with v0

Workflow Lab is built to work hand-in-hand with the v0 agent. Run workflows, capture their full output, and feed it back to v0 for validation, debugging, and iteration.

Core concept

The run-copy-paste loop

Every workflow run produces structured output: step states, raw JSON, readable summaries, and console logs. The Copy All button captures all of it in a single clipboard operation. You paste it into v0, and the agent can validate results, diagnose failures, or extend the workflow based on real data.

Run

Start a workflow from the lab. Watch steps complete in real-time.

Copy All

One click captures the full run state: steps, output, JSON, and console.

Paste to v0

Feed the output to v0. It validates, debugs, or extends your workflow.

Reference

What Copy All captures

The clipboard output is structured so v0 can parse it immediately. Each section is delimited with headers, and the data is formatted for both human and machine readability.

clipboard-output.txt

=== WORKFLOW ===
type: data-pipeline
{
  "sources": ["api-alpha", "api-beta", "api-gamma"],
  "options": { "strict": false }
}

=== EXPECTED OUTPUT ===
AI report: Full analytical report via AI Gateway
Durable timers: sleep(5s) between emails (dev)

=== SELECTED RUN ===
id: wrun_01KHWF6FCA9RF4MJDXXRB35ZSR
status: completed
type: data-pipeline
startedAt: 2/20/2026, 8:48:52 AM

--- steps ---
[{ "name": "Ingest", "status": "completed", ... }]

--- output ---
{ "stats": { "totalFetched": 25, ... }, ... }

--- readable output ---
Sources: api-alpha, api-beta, api-gamma
Fetched: 25 | Valid: 25 | Invalid: 0

By Category:
  engineering: 8 records (avg: 66.38)
  support: 3 records (avg: 48.67)

AI Report (top category: engineering):
Processed 25 records across 3 sources...

=== CONSOLE ===
8:48:52 AM [info] POST /api/workflows/data-pipeline
8:48:55 AM [info] [wrun_01KH] transform: Transforming...
8:49:00 AM [success] Run wrun_01KH completed (8s)

Walkthrough

Step by step

Pick a workflow preset

The lab sidebar has three built-in presets: Email Drip Campaign, Data Pipeline, and AI Content Agent. Each uses different Workflow DevKit primitives so you can see them in action.

Start the run

Click Start Run. The workflow executes against real services: AI Gateway for generation, Resend for email delivery, durable sleep for timing. The pipeline visualization updates in real-time as each step completes.

Watch step progression

The console panel at the bottom logs phase transitions, status changes, and timing. The step cards above show individual step status and output details as they resolve.

Copy the full output

Once the run completes (or fails), click Copy All. This captures everything: the workflow config, expected output, run metadata, all step states with their outputs, the full raw JSON, a human-readable summary of the results, and the console log history.

Copy All is the bridge between the lab and v0. The structured format gives v0 complete context about what happened, what the data looks like, and where things went wrong if they did.

Paste into v0 and iterate

Paste the clipboard into your v0 conversation. From here you can ask v0 to:

Validate the output against expected results
Debug a failed step using the error and console logs
Extend the workflow with new steps or different logic
Build a new workflow inspired by the patterns you see
Refactor step functions for better error handling

Run again to verify

After v0 makes changes to your workflow code, go back to the lab and start another run. Copy All again, paste it, and let v0 confirm the fix or continue iterating. Each cycle tightens the feedback loop.

Beyond the demos

Building your own workflows

The three included presets are starting points. The lab is designed to support any workflow you build with the Workflow DevKit. The architecture has two parts: the workflow file and the API route.

1. Define your workflow

lib/workflows/my-workflow.ts

import { sleep } from "workflow"
import { generateText } from "ai"

async function fetchData(url: string) {
  "use step"
  const res = await fetch(url)
  return res.json()
}

async function processWithAI(data: unknown) {
  "use step"
  const { text } = await generateText({
    model: "openai/gpt-4o-mini",
    prompt: `Analyze: ${JSON.stringify(data)}`,
  })
  return { analysis: text }
}

export async function myWorkflow(input: {
  url: string
}) {
  "use workflow"
  const data = await fetchData(input.url)
  await sleep("10s")
  return await processWithAI(data)
}

2. Add the API route

app/api/workflows/my-workflow/route.ts

import { start } from "workflow"
import { myWorkflow } from "@/lib/workflows/my-workflow"
import { NextResponse } from "next/server"

export async function POST(req: Request) {
  const body = await req.json()
  const run = await start(myWorkflow, [body])
  return NextResponse.json({
    runId: run.id,
    status: "started",
  })
}

3. Register it in the lab

Add your workflow to the WORKFLOW_TEMPLATES array in lib/workflows/types.ts and add matching entries in WORKFLOW_PHASES for the pipeline visualization. The lab UI, polling, Copy All, and console logging all work automatically from there.

Architecture

Standalone or copy into your own app

Workflow Lab is intentionally built as a self-contained route. The lab lives entirely under /workflow-lab and has no dependencies on the landing page, docs, or anything else outside of its own route, the workflow files, and the shared API routes. This makes it easy to use in two ways:

Use it standalone

Deploy this repo as-is. The landing page introduces the project, the docs page explains usage, and the lab is your test bench. This is the fastest way to start experimenting with the Workflow DevKit and the v0 feedback loop.

Copy the lab into your own Next.js app

Drop the following into your existing project and the lab works immediately. No other pages or layout changes are required.

Files to copy

your-project/

app/workflow-lab/page.tsx      # The full lab UI
app/api/workflows/
  email-drip/route.ts          # Start + status routes
  content-agent/route.ts
  data-pipeline/route.ts
  runs/[runId]/route.ts        # Sideband polling route

lib/workflows/
  types.ts                     # Templates, phases, types
  email-drip.ts                # Workflow implementations
  content-agent.ts
  data-pipeline.ts

components/theme-toggle.tsx    # Optional dark mode toggle

The lab page is a single "use client" component with no external state dependencies. It reads workflow templates from types.ts, starts runs via the API routes, and polls for status updates. Everything you add to the templates array and the phases map automatically appears in the UI, including the preset selector, step pipeline, readable output panel, and Copy All formatting.

Because the lab is a self-contained route, it stays out of the way of your actual application. You can keep it in your project permanently as a workflow development tool, or remove it before shipping to production. Either way, the workflow files and API routes it depends on are the same ones your production app uses.

Why this works

Structured output for AI agents

Complete context in one paste

v0 gets the workflow config, every step's status and output, the full JSON payload, a readable summary, and the console history. No back-and-forth asking "what did you see?"

Real data, not mocks

Every run hits real services. AI Gateway generates real text. Resend delivers real emails. The data pipeline ingests, transforms, and aggregates real records. v0 validates against actual results.

Error traces included

When a step fails, Copy All captures the error message, the step that failed, which steps succeeded before it, and the console logs leading up to the failure. v0 can pinpoint the root cause immediately.

Iterative by design

Each run is persisted per workflow tab. You can run multiple iterations, compare outputs, and copy any run's state at any time. The per-tab isolation means testing one workflow doesn't affect another.

Try it now

Open the lab, run a workflow, and paste the output into v0.

Open the Lab Workflow DevKit Docs