Astro

This guide shows you how to install Workflow DevKit in an Astro project.

Install dependencies

Install the workflow package:

npm install workflow

yarn add workflow

pnpm add workflow

Configure Astro

Add the Workflow integration to your Astro config:

astro.config.mjs

import { defineConfig } from 'astro/config';
import { workflow } from 'workflow/astro';

export default defineConfig({
  integrations: [workflow()]
});

The integration automatically:

Adds Vite plugins for workflow transformation and hot reloading
Builds workflow bundles during development
Generates Vercel functions during production builds (when deployed to Vercel)

Enable TypeScript support (Optional)

Add the Workflow TypeScript plugin to your tsconfig.json for IntelliSense:

tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "workflow"
      }
    ]
  }
}

How it works

The Astro integration:

Uses @workflow/rollup for code transformation
Uses @workflow/vite for hot module replacement
Builds workflow bundles during the astro:config:setup hook
Generates Vercel-specific functions during the astro:build:done hook
Automatically discovers workflows in your project

Example workflow

src/workflows/newsletter.ts

import { sleep } from "workflow";

export async function sendNewsletter(subscriberId: string) {
  "use workflow";

  const subscriber = await getSubscriber(subscriberId);
  await sendEmail(subscriber);
  await sleep("7 days");
  await sendFollowUp(subscriber);

  return { status: "sent" };
}

async function getSubscriber(id: string) {
  "use step";
  return { id, email: `user-${id}@example.com` };
}

async function sendEmail(subscriber: { id: string; email: string }) {
  "use step";
  console.log(`Sending newsletter to ${subscriber.email}`);
}

async function sendFollowUp(subscriber: { id: string; email: string }) {
  "use step";
  console.log(`Sending follow-up to ${subscriber.email}`);
}

Triggering workflows

Start workflows from API routes:

src/pages/api/newsletter.ts

import type { APIRoute } from 'astro';
import { start } from 'workflow/api';
import { sendNewsletter } from '../../workflows/newsletter';

export const POST: APIRoute = async ({ request }) => {
  const { subscriberId } = await request.json();
  await start(sendNewsletter, [subscriberId]);
  return Response.json({ message: "Newsletter workflow started" });
};

export const prerender = false;

Deployment

When deploying to Vercel with the Astro Vercel adapter:

npx astro add vercel

The Workflow integration automatically generates the required Vercel functions during the build process.

Getting Started

Installation

Core Concepts

Building AI Agents

How It Works

Deployment

Observability

Testing

Error Reference

How it works

Example workflow

Triggering workflows

Deployment

Next steps

Core Concepts

API Reference

​How it works

​Example workflow

​Triggering workflows

​Deployment

​Next steps

Core Concepts

API Reference

How it works

Example workflow

Triggering workflows

Deployment

Next steps