v0 App

What You'll Need

Node.js 18 or higher
A Next.js project (recommended) or any TypeScript project
Workflow DevKit installed in your project

Quick Start

Follow these steps to add your first workflow step:

1. Configure the Registry (Optional)

npx shadcn@latest init -u https://workflow-registry.vercel.app

This saves the registry URL so you don't have to use the full URL each time.

2. Add Your First Step

npx shadcn@latest add send-slack-message

Or use the full URL if you haven't configured the registry:

npx shadcn@latest add https://workflow-registry.vercel.app/r/send-slack-message

3. Add Multiple Steps

npx shadcn@latest add send-slack-message send-email generate-ai-content

The CLI will download all steps and install their dependencies automatically.

4. Use the Step in a Workflow

workflows/notify-team.ts

import { sendSlackMessage } from '../steps/send-slack-message';

export async function notifyTeam(message: string) {
  'use workflow';

  // This step will automatically retry on failures
  const result = await sendSlackMessage({
    channel: '#general',
    text: message,
  });

  return result;
}

5. Configure Environment Variables

Add the required environment variables to your .env file:

SLACK_BOT_TOKEN=xoxb-your-token-here

Understanding Workflow Steps

Workflow steps are functions marked with the 'use step' directive. This directive tells the Workflow DevKit to handle retries, error handling, and state persistence automatically.

Key Concepts

Automatic Retries: Steps automatically retry on transient failures (network errors, rate limits). You don't need to write retry logic.
FatalError: Use FatalError for errors that shouldn't retry (invalid configuration, 4xx errors). The workflow will stop instead of retrying.
Durability: Each step's execution is tracked. If a workflow crashes and restarts, completed steps won't re-execute.

Getting Started