Learn how a single Copy All button turns the Vercel Workflow DevKit’s development cycle into a rapid iteration loop with v0.
Introduction
Workflow Lab is an open-source Next.js template built on the Vercel Workflow DevKit. It’s an interactive lab where you run durable workflows and see their output in real-time. But the defining feature isn’t the visualization – it’s what happens when you click Copy All.
The entire template is designed around one idea: every output should be structured for v0. When you click Copy All, the clipboard contains a complete, labeled snapshot of the run – workflow config, expected output, step states, raw JSON, readable summaries, and console logs – in a format v0 can parse immediately. One paste gives the agent full context to validate results, diagnose failures, or extend the workflow.
This is what I mean by “v0-first output.” Instead of designing a tool that shows you information and hoping you can convey that information to v0, the tool produces output that’s already optimized for the v0 agent.
The Copy All Design
Copy All is not a “copy to clipboard” button. It’s a structured export designed for AI consumption.
When you click it, here’s what lands on the clipboard:
=== WORKFLOW ===
type: data-pipeline
{ "sources": ["api-alpha", "api-beta"], "validationMode": "strict" }
=== EXPECTED OUTPUT ===
AI report: Full analytical report via AI Gateway
Stats: Record counts, validation, aggregation
=== SELECTED RUN ===
id: wrun_01KHWF6FCA9RF4MJDXXRB35ZSR
status: completed
type: data-pipeline
startedAt: 2026-02-20T08:48:52Z
--- steps ---
[{ "name": "Ingest", "status": "completed", "output": {...} },
{ "name": "Validate", "status": "completed", "output": {...} },
{ "name": "Transform", "status": "completed", "output": {...} },
{ "name": "Aggregate", "status": "completed", "output": {...} },
{ "name": "AI Report", "status": "completed", "output": {...} }]
--- output ---
{ "stats": { "totalFetched": 25, "validRecords": 25, "invalidRecords": 0 },
"aggregation": { "byCategory": {...}, "bySource": {...}, "byDay": {...} },
"report": { "summary": "...", "topCategory": "electronics", "topSource": "api-alpha" } }
--- readable output ---
Sources: api-alpha, api-beta
Fetched: 25 | Valid: 25 | Invalid: 0
By Category:
electronics: 8 records (avg: 299.50)
clothing: 6 records (avg: 49.99)
AI Report (top category: electronics, top source: api-alpha):
The data pipeline processed 25 records across two sources...
=== CONSOLE ===
8:48:52 AM [info] POST /api/workflows/data-pipeline
8:48:53 AM [phase] Phase: Ingesting data from 2 sources
8:48:55 AM [phase] Phase: Validating 25 records (strict mode)
8:48:57 AM [phase] Phase: Aggregating by category, source, and day
8:48:59 AM [phase] Phase: Generating AI analytical report
8:49:00 AM [success] Run completed (8s)
Notice the structure. Labeled sections with === and --- separators. Expected output alongside actual output so v0 can compare. Both raw JSON (for programmatic analysis) and readable summaries (for quick comprehension). Console logs with timestamps so v0 can reconstruct the execution timeline.
This is intentional. The format is designed so v0 can:
- Validate – compare expected vs actual output and confirm the workflow worked correctly
- Diagnose – identify which step failed, what the error was, and what succeeded before it
- Suggest fixes – propose code changes based on the failure mode and step output
- Extend – add new steps to the workflow using the observed data shapes as reference
- Refactor – restructure the workflow based on timing data and step dependencies
Why v0-First Matters for Rapid Iteration
The traditional workflow development cycle looks like this:
- Write workflow code
- Run it
- Read the output
- Manually describe what happened to an AI assistant
- Get suggestions
- Apply changes
- Repeat
Step 4 is the bottleneck. Every time you describe output to v0, you lose fidelity. You forget to mention a step’s status, or you paraphrase an error message, or you don’t include the console timing. v0 asks follow-up questions. You go back to the tool, copy more fragments, paste them in. The context builds slowly and imperfectly.
With Copy All, step 4 becomes: paste. That’s it. v0 has everything. The iteration loop compresses to:
- Run
- Copy All
- Paste into
v0 - Apply the response
- Run again
Each cycle is fast because context transfer is instant and lossless.
The Three Included Workflows
Each workflow demonstrates different DevKit primitives, and each produces v0-optimized Copy All output:
Email Drip Campaign
A three-stage onboarding sequence. AI composes each email via the Vercel AI Gateway, Resend delivers to a real inbox, and durable sleep() timers space the sends. Copy All captures each email’s subject, body, and send timestamp so v0 can evaluate the AI-generated content and suggest improvements.
Data Processing Pipeline
Five-stage pipeline: ingest from multiple sources, validate (strict/lenient modes), normalize, aggregate, and generate an AI analytical report. Uses RetryableError for transient failures and FatalError for permanent ones. Copy All captures per-step record counts, category breakdowns, and the full AI report – v0 can analyze the entire data flow in one paste.
AI Content Agent
Research, outline generation, human approval gate via createHook(), AI-written article, and AI review with a quality score. The human-in-the-loop gate demonstrates hook.suspend() – the workflow genuinely pauses and the lab shows a resume button. Copy All captures the research findings, outline structure, full article text, and review score so v0 can evaluate the content quality and suggest editorial improvements.
Architecture
The lab is a single "use client" page with no external state dependencies. The Copy All logic is inline – it reads the current workflow template, selected run, and console logs, then assembles the structured clipboard output dynamically. This means:
- Any workflow you add to the
WORKFLOW_TEMPLATESarray automatically gets Copy All support - The readable output section adapts per workflow type (emails, data reports, articles)
- The entire lab can be copied into any
Next.jsproject – thev0-first output comes with it
Try It
- v0 template: https://v0.app/templates/workflow-lab-VfaC3JPSzkU
- GitHub: https://github.com/headline-design/workflow-lab
- Live demo: https://v0-workflow-lab.vercel.app
- Workflow DevKit docs: https://useworkflow.dev
If you build a workflow with this template, paste the Copy All output into v0 and see how fast the iteration loop gets. I’d love to hear what you build.