> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/workflow/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro

> Install and configure Workflow DevKit in your Astro application

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

<Steps>
  <Step title="Install dependencies">
    Install the `workflow` package:

    <CodeGroup>
      ```bash npm theme={null}
      npm install workflow
      ```

      ```bash yarn theme={null}
      yarn add workflow
      ```

      ```bash pnpm theme={null}
      pnpm add workflow
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure Astro">
    Add the Workflow integration to your Astro config:

    ```typescript astro.config.mjs theme={null}
    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)
  </Step>

  <Step title="Enable TypeScript support (Optional)">
    Add the Workflow TypeScript plugin to your `tsconfig.json` for IntelliSense:

    ```json tsconfig.json theme={null}
    {
      "compilerOptions": {
        "plugins": [
          {
            "name": "workflow"
          }
        ]
      }
    }
    ```
  </Step>
</Steps>

## 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

```typescript src/workflows/newsletter.ts theme={null}
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:

```typescript src/pages/api/newsletter.ts theme={null}
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:

```bash theme={null}
npx astro add vercel
```

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

## Next steps

<CardGroup cols={2}>
  <Card title="Core Concepts" href="/concepts/workflows-and-steps">
    Learn about workflows and steps
  </Card>

  <Card title="API Reference" href="/api-reference/integrations/astro">
    View the full Astro API reference
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.