FlowAI — Design skill for Claude Code

FlowAI - Visual Agentic Workflow Builder

Build, execute, and deploy LangGraph agentic workflows through a visual drag-and-drop interface.

Features

• 🎨 Visual Workflow Builder - Drag-and-drop interface powered by ReactFlow
• 🤖 Multi-LLM Support - OpenAI, Anthropic, Google Gemini
• 🔧 Extensible Nodes - LLMs, Tools, APIs, MCPs, Control Flow
• ⚡ Real-time Execution - Watch your workflows run with live visualization
• 🚀 Deploy Anywhere - Export to Docker, Cloud Run, Lambda
• 💾 State Management - Built on LangGraph with checkpointing and memory

Visual Overview


Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Python 3.11+
• Docker and Docker Compose
• PostgreSQL 15+
• Redis 7+

Development Setup

1. Set up environment variables:

# Backend (.env in backend/ directory)
cp backend/.env.example backend/.env
# Edit backend/.env and add your API keys:
# OPENAI_API_KEY=your-key-here
# DATABASE_URL=postgresql://flowai:flowai@localhost:5432/flowai
# REDIS_URL=redis://localhost:6379/0

1. Clone and install dependencies:

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

1. Start infrastructure (PostgreSQL + Redis):

docker-compose up -d

1. Run database migrations:

cd backend
alembic upgrade head

1. Start development servers:

# Terminal 1 - Frontend
cd frontend
npm run dev

# Terminal 2 - Backend
cd backend
uvicorn app.main:app --reload

1. Open your browser:

• Frontend: http://localhost:3000
• Backend API: http://localhost:8000
• API Docs: http://localhost:8000/docs

Project Structure

flowAI/
├── frontend/              # React + TypeScript + ReactFlow
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── feat