[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [v0](/c/v0/59) # Workflow Lab: Building v0-first outputs with the Vercel Workflow DevKit 40 views · 2 likes · 4 posts Aaron (@ussaaron) · 2026-02-24 · ♥ 2  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: ```bash === 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: 1. **Validate** – compare expected vs actual output and confirm the workflow worked correctly 2. **Diagnose** – identify which step failed, what the error was, and what succeeded before it 3. **Suggest fixes** – propose code changes based on the failure mode and step output 4. **Extend** – add new steps to the workflow using the observed data shapes as reference 5. **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: 1. Write workflow code 2. Run it 3. Read the output 4. Manually describe what happened to an AI assistant 5. Get suggestions 6. Apply changes 7. 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: 1. Run 2. **Copy All** 3. Paste into `v0` 4. Apply the response 5. 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_TEMPLATES` array 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.js` project – the `v0`-first output comes with it ## Try It - **v0 template:** [https://v0.app/templates/workflow-lab-VfaC3JPSzkU](https://v0.app/templates/workflow-lab-VfaC3JPSzkU) - **GitHub:** [https://github.com/headline-design/workflow-lab](https://github.com/headline-design/workflow-lab) - **Live demo:** [https://v0-workflow-lab.vercel.app](https://v0-workflow-lab.vercel.app) - **Workflow DevKit docs:** [https://useworkflow.dev](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. Pauline P. Narvas (@pawlean) · 2026-02-24 We seriously need to get you on a Community Live Session to show this off! Aaron (@ussaaron) · 2026-02-24 yeah, this one is a banger. It extends the capabilities of the v0 agent in a really cool way. Community Backoffice (@community-backoffice) · 2026-03-06 Hey! To help debug your v0 project, could you share your **v0 chat link**? It looks like `https://v0.app/chat/...` — you can copy it from your browser's address bar while in the chat. You'll also need to unlist the chat so our team can view it — here's how: https://v0.app/docs/sharing This helps the team reproduce what you're seeing much faster. Thanks!