Vercel Workflow Examples

repository·main·Indexed 19 days ago

https://github.com/vercel/workflow-examples

A collection of practical examples and integration templates for the Workflow DevKit. Includes demonstrations of the Actor Pattern, AI SDK workflow patterns (Sequential, Parallel, Routing, Orchestrator/Worker, and Evaluator Loop), an Astro workflow starter, a Birthday Card Generator using Vercel AI Gateway, FFmpeg audio processing, and Bun runtime integration.

Tokens
15.7K
Snippets
59
Records
84
Agent score
66%

What's inside vercel-workflow-examples

  1. Overview of the Kitchen Sink example

    main
    The kitchen-sink directory contains a comprehensive collection of workflow patterns designed to demonstrate all core capabilities of the Workflow DevKit. It serves as a reference implementation for developers looking to understand common patterns and best practices when building with the Workflow DevKit.
  2. Overview of Birthday Card Generator

    main

    The Birthday Card Generator is an AI-powered application that uses Vercel Workflow and AI Gateway to generate custom birthday cards. It combines image generation and text generation into a single resilient workflow.

    Core Workflow

    1. Generate Image: Uses Google Gemini 2.5 Flash Image via AI Gateway.
    2. Generate Message: Uses GPT-5-nano via AI Gateway.
    3. Result: Returns both the image and the personalized text to the UI.

    Key Features

    • Resilient Processing: Automatic retries for transient failures in workflow steps.
    • Serverless Architecture: Powered by Vercel Workflow.
    • Zero-Config AI: Uses Vercel AI Gateway, meaning no manual AI API keys are required in your environment variables.
  3. Explore Workflow DevKit examples

    main
    The workflow-examples repository provides various implementations of the Workflow DevKit to demonstrate different use cases and patterns. You can explore these examples to understand how to implement specific logic like AI patterns, media processing, or complex business flows.
  4. AI SDK Workflow Patterns implemented in this project

    main

    This project demonstrates several common AI agent patterns using the Workflow DevKit to provide fault tolerance, step-by-step execution, and observability. The implemented patterns are:

    • Sequential Workflow: Multi-step AI processing featuring quality checks and conditional regeneration.
    • Parallel Workflow: Concurrent AI operations (such as parallel code reviews) with result aggregation.
    • Routing Workflow: Dynamic routing to different AI models or prompts based on input classification.
    • Orchestrator/Worker: A coordinated system where one agent orchestrates and others execute specialized tasks.
    • Evaluator Loop: Iterative AI improvement using evaluation and refinement cycles.
  5. Understand the Birthday Card Generator Workflow Architecture

    main

    The application uses a sequential orchestration pattern to generate content. The main orchestrator is located in workflows/generate-birthday-card.ts.

    Workflow Steps

    1. Generate Image (workflows/generate-image.ts)

    • Model: Google Gemini 2.5 Flash Image.
    • Routing: Vercel AI Gateway.
    • Resilience: Includes automatic retry handling for transient failures.

    2. Generate Message (workflows/generate-message.ts)

    • Model: GPT-5-nano.
    • Routing: Vercel AI Gateway.
    • Resilience: Includes automatic retry handling for transient failures.

    Orchestration Details

    The orchestrator (generate-birthday-card.ts) manages the execution of these steps and provides:

    • Logging: Comprehensive event and timing logs.
    • Error Handling: Proper error propagation across steps.
    • Metrics: Performance tracking and duration metrics for the entire workflow.
  6. Implement the Actor Pattern with Vercel Workflows

    main

    The Actor Pattern is a concurrency model where each actor maintains an isolated state and processes events sequentially. In Vercel Workflows, an actor is implemented as a workflow run that uses a hook as an async iterator to process incoming messages in a loop.

    Core Workflow Logic

    1. Initialize State: Start the workflow with an initial state.
    2. Create a Hook: Use defineHook to create a type-safe hook. The hook should be created outside the loop using a deterministic token (e.g., `actor_name:${actorId}`) to allow the workflow to resume and process events sequentially.
    3. Event Loop: Use a for await...of loop on the hook to process events one by one. Inside the loop, fetch the current state, compute the new state based on the event, and persist the new state.
    // 1. Define the hook type once
    const counterActorHook = defineHook<CounterEvent>();
    
    // 2. Inside the workflow, create the hook outside the loop
    const receiveEvent = counterActorHook.create({
      token: `counter_actor:${actorId}`,
    });
    
    // 3. Use the hook as an async iterator to process events sequentially
    for await (const event of receiveEvent) {
      const state = await getState(actorId);
      const newState = await computeNewState(state, event);
      await setState(actorId, newState);
    }
  7. Key concepts in the Flight Booking App

    main

    The Flight Booking App demonstrates several core capabilities of the Workflow and AI SDK integration:

    • DurableAgent: Provided by @workflow/ai, this enables automatic retries, fault tolerance, and stream reconnection for AI SDK applications.
    • Multi-turn conversations: The agent maintains conversation state across tool-calling loops and multiple LLM interactions.
    • Stream reconnection: Uses WorkflowChatTransport to allow clients to reconnect to in-progress workflows after network failures.
    • Tool execution: Demonstrates real-world agent patterns using tools for searching flights, checking status, airport info, booking, and baggage management.
    • PostgreSQL World: A persistence layer for managing workflow state on custom infrastructure.
  8. How the FFmpeg audio compression workflow works

    main

    The audio compression service uses Workflow DevKit to orchestrate a multi-step process within an isolated Vercel Sandbox. This ensures secure and reliable processing of heavy tasks like FFmpeg transcoding.

    Workflow Lifecycle:

    1. createSandbox: Provisions a new, isolated Vercel Sandbox instance.
    2. setupFfmpeg: Downloads and installs the FFmpeg binary inside the sandbox.
    3. transcode: Writes the uploaded input file to the sandbox and executes the FFmpeg command to compress the audio.
    4. streamOutput: Streams the resulting compressed file from the sandbox back to the workflow.
    5. stopSandbox: Cleans up and terminates the sandbox instance.

    Finally, the Express server streams the compressed bytes directly from the workflow response to the client.

  9. Run SvelteKit Workflow Starter locally

    main

    After installing dependencies, start the development server using pnpm dev. You can test the workflow by sending a POST request to the /api/signup endpoint using curl.

    pnpm dev
    
    # In a new terminal, invoke the workflow:
    curl -X POST --json '{"email":"hello@example.com"}' http://localhost:3000/api/signup
  10. Deploying the Postgres World

    main

    The Postgres world is incompatible with Vercel deployments.

    When deploying to Vercel, workflows are automatically configured to use the Vercel World with zero configuration. If you require the Postgres World, you must deploy to an environment off-Vercel. (Note: Specific off-Vercel deployment instructions are coming soon).