FlowDrop - Visual Workflow Editor

A powerful visual workflow editor built with SvelteKit that enables drag-and-drop creation of complex workflows with AI integration, data processing, and automation capabilities.

• Visual Workflow Editor: Drag-and-drop interface for building complex workflows
• AI Integration: OpenAI, Anthropic, and other AI model integrations
• Data Processing: Advanced data manipulation and transformation nodes
• HTTP Integration: Webhook and API request capabilities
• File Operations: Upload, download, and file processing
• Conditional Logic: Advanced branching and decision-making nodes
• Real-time Execution: Live workflow execution with status monitoring
• SvelteKit Application: Full-featured web application with SSR support
• Node.js Server: Standalone server deployment

fd-node-demo/
├── src/                          # SvelteKit application source
│   ├── routes/                   # SvelteKit routes
│   │   ├── api/                  # API endpoints
│   │   │   ├── flowdrop/         # FlowDrop API
│   │   │   └── workflows/        # Workflow API
│   │   ├── workflow/             # Workflow pages
│   │   └── +page.svelte          # Home page
│   ├── lib/                      # Shared components and utilities
│   │   ├── components/           # Svelte components
│   │   ├── services/             # Business logic services
│   │   ├── stores/               # Svelte stores
│   │   └── types/                # TypeScript type definitions
│   └── app.html                  # HTML template
├── static/                       # Static assets
├── build/                        # Built application (after npm run build)
└── dist/                         # Compiled TypeScript

1. SvelteKit Framework: Full-stack web application framework
2. Visual Editor: XYFlow-based drag-and-drop workflow editor
3. API Layer: RESTful API for workflow operations
4. Node Runtime: Execution engine for workflow nodes
5. State Management: Svelte stores for application state

• AI Models: OpenAI Chat, Embeddings, HuggingFace
• Data Processing: Calculator, Dataframe Operations, Data Operations
• Input/Output: Text Input, Chat Output, File Upload
• HTTP Operations: URL Fetch, HTTP Request, Webhook
• Conditional Logic: Conditional nodes, Loop operations
• Utility: DateTime, Regex Extractor, Split Text
• Storage: Save to File, Chroma Vector Store

• Node.js 18+
• npm or pnpm

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

   The application will be available at http://localhost:5173

3. Build for production:

   npm run build

4. Start production server:

   npm start

   The production server will run on port 3000 by default (configurable via PORT environment variable)

Start the development server with hot module replacement:

npm run dev

# Or specify a different port
npm run dev -- --port 3000

Build and run the application in production mode:

# Build the application
npm run build

# Start the Node.js server
npm start

# With custom port
PORT=8080 npm start

FlowDrop includes production-ready Docker configuration and automated builds via GitHub Actions.

# Pull from GitHub Container Registry
docker pull ghcr.io/OWNER/REPO:latest

# Run the container
docker run -d \
  -p 3000:3000 \
  -e PUBLIC_API_BASE_URL=https://api.example.com/flowdrop \
  ghcr.io/OWNER/REPO:latest

# Quick start with Docker Compose
docker-compose up -d

# Or build and run manually
docker build -t flowdrop:latest .
docker run -d -p 3000:3000 --name flowdrop flowdrop:latest

See .github/DOCKER_DEPLOYMENT.md for GitHub Actions deployment documentation

1. Navigate to the root URL
2. Create a new workflow or edit an existing one
3. Use the visual editor to build your workflow

1. Add Nodes: Drag nodes from the palette to the canvas
2. Configure Nodes: Set parameters and configuration for each node
3. Connect Nodes: Create connections between node inputs and outputs
4. Test Execution: Use the execution panel to test your workflow
5. Save & Deploy: Save your workflow for later use

• OpenAI Chat: GPT model integration
• OpenAI Embeddings: Text embedding generation
• HuggingFace Embeddings: Alternative embedding models
• Simple Agent: Basic AI agent implementation

• Calculator: Mathematical operations
• Dataframe Operations: Advanced data manipulation
• Data Operations: General data processing
• Data to Dataframe: Data format conversion

• Text Input: User input collection
• Text Output: Display text results
• Chat Output: Chat interface output
• File Upload: File upload handling

• URL Fetch: HTTP GET requests
• HTTP Request: Full HTTP client
• Webhook: Webhook endpoint handling

• Conditional: If/else logic branching
• Loop: Iterative operations
• Split Text: Text segmentation

• DateTime: Date/time operations
• Regex Extractor: Pattern matching
• Conversation Buffer: Chat history management
• Structured Output: Formatted output generation

1. Create Node Class:

   <?php
   
   namespace Drupal\flowdrop\Plugin\FlowDropNodeProcessor;
   
   use Drupal\flowdrop\Attribute\FlowDropNodeProcessor;
   
   #[FlowDropNodeProcessor(
     id: "my_custom_node",
     label: new \Drupal\Core\StringTranslation\TranslatableMarkup("My Custom Node")
   )]
   class MyCustomNode extends AbstractFlowDropNodeProcessor {
   
     public function execute(array $inputs, array $config): array {
       // Your node logic here
       return ['result' => 'processed data'];
     }
   
     public function getConfigSchema(): array {
       return [
         'type' => 'object',
         'properties' => [
           'mySetting' => ['type' => 'string'],
         ],
       ];
     }
   }

2. Implement Required Methods:

   • execute(): Main node logic
   • getConfigSchema(): Configuration schema
   • getInputSchema(): Input validation schema
   • getOutputSchema(): Output schema
   • validateInputs(): Input validation

This is a SvelteKit application with a comprehensive development setup:

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run check        # Type check
npm run test         # Run tests
npm run lint         # Lint code
npm run format       # Format code

If you need to build FlowDrop as a library for integration with other systems:

npm run build:drupal      # Build IIFE bundle for Drupal
npm run build:production  # Build standalone library bundle

The application exposes the following API endpoints:

• GET /api/workflows - List workflows
• POST /api/workflows - Create workflow
• GET /api/workflows/{id} - Get workflow
• PUT /api/workflows/{id} - Update workflow
• DELETE /api/workflows/{id} - Delete workflow

• GET /api/flowdrop/nodes - List available node types
• POST /api/flowdrop/nodes - Create/register new node
• GET /api/flowdrop/nodes/{id} - Get node details

• GET /api/flowdrop/port-config - Get port configuration for nodes

Each node type defines its configuration schema:

interface NodeConfigSchema {
	type: "object";
	properties: {
		[key: string]: {
			type: string;
			title?: string;
			description?: string;
			default?: unknown;
		};
	};
}

• CSRF protection enabled on all API routes
• Input validation on all endpoints
• Type-safe API with TypeScript
• Error handling and logging
• Secure server-side rendering

npm run test:unit

npm run test:e2e

npm run check

The application supports the following environment variables:

• PORT - Server port (default: 3000)
• HOST - Server host (default: 0.0.0.0)
• ORIGIN - Application origin for CSRF protection

Create a .env file in the project root:

PORT=3000
HOST=0.0.0.0
ORIGIN=http://localhost:3000

Not accepting contributions until the project stabilizes. Stay tuned.

For issues and questions:

• Check the API documentation in API.md
• Review the security guidelines if available
• Create an issue in the project repository

• Framework: SvelteKit 2.x with Svelte 5
• Language: TypeScript 5.x
• Build Tool: Vite 6.x
• Workflow Editor: @xyflow/svelte
• Icons: @iconify/svelte
• Styling: CSS with modern features
• Server: Node.js with adapter-node
• Testing: Vitest + Playwright

FlowDrop - Visual workflow automation with SvelteKit.