workflow-builder-template — AI Agent 工作流中文教程

Prerequisites

• Node.js 18+
• PostgreSQL database
• pnpm package manager

Install dependencies

pnpm install

AI Workflow Builder Template

A template for building your own AI-driven workflow automation platform. Built on top of Workflow DevKit, this template provides a complete visual workflow builder with real integrations and code generation capabilities.

Deploy Your Own

You can deploy your own version of the workflow builder to Vercel with one click:

What happens during deployment:

• Automatic Database Setup: A Neon Postgres database is automatically created and connected to your project
• Environment Configuration: You'll be prompted to provide required environment variables (Better Auth credentials and AI Gateway API key)
• Ready to Use: After deployment, you can start building workflows immediately

Getting Started

Installation

```bash

Build

pnpm build

Environment Variables

Create a .env.local file with the following:

```env

Via API

GET /api/workflows/{id}/generate-code ```

The generated code includes:

• Type-safe TypeScript
• Real integration calls
• Error handling
• Execution logging

API Endpoints

External APIs

Make HTTP requests to any API.

import { callApi } from "@/lib/integrations/api";

await callApi({
  url: "https://api.example.com/endpoint",
  method: "POST",
  body: { data: "value" },
});

Firecrawl (Web Scraping)

Scrape websites and search the web with Firecrawl.

import {
  firecrawlScrapeStep,
  firecrawlSearchStep,
} from "@/lib/steps/firecrawl";

// Scrape a URL
const scrapeResult = await firecrawlScrapeStep({
  url: "https://example.com",
  formats: ["markdown"],
});

// Search the web
const searchResult = await firecrawlSearchStep({
  query: "AI workflow builders",
  limit: 5,
});

AI Gateway (for AI workflow generation)

AI_GATEWAY_API_KEY=your-openai-api-key ```

Workflow Types

Generate Code for a Workflow

```bash

Workflow Management

• GET /api/workflows - List all workflows
• POST /api/workflows - Create a new workflow
• GET /api/workflows/{id} - Get workflow by ID
• PUT /api/workflows/{id} - Update workflow
• DELETE /api/workflows/{id} - Delete workflow

Workflow Execution

• POST /api/workflows/{id}/execute - Execute a workflow
• GET /api/workflows/{id}/executions - Get execution history
• GET /api/workflows/executions/{executionId}/logs - Get detailed execution logs

Integrations

About Workflow DevKit

This template is built on top of Workflow DevKit, a powerful workflow execution engine that enables:

• Native TypeScript workflow definitions with "use workflow" directive
• Type-safe workflow execution
• Automatic code generation from visual workflows
• Built-in logging and error handling
• Serverless deployment support

Learn more about Workflow DevKit at useworkflow.dev