auto-flow

Make a automatic workflow

Comment

💡 Inspiration

The idea for Auto-Timetable came from observing the countless hours people spend on repetitive tasks like scheduling meetings, managing calendars, prioritizing tasks, and responding to routine emails. We realized that many of these workflows follow predictable patterns that could be automated with AI assistance.

Our vision was to create a platform where anyone—regardless of technical expertise—could describe what they want to automate in plain English, and have AI generate a complete, visual workflow that executes their requirements automatically.

🚀 What it does

Auto-Timetable (now AutoFlow) is an intelligent workflow automation platform that:

  • Converts natural language descriptions into visual workflows - Simply describe what you want to automate through our AI chat assistant, and watch as it generates a complete workflow with properly connected nodes
  • Provides 20+ specialized node types organized into five categories:
    • 🟢 Input/Output Layer: File uploads, HTTP requests, database connections, webhooks
    • 🟣 AI & LLM Layer: GPT-4 integration, autonomous agents, knowledge retrieval, question classification
    • 🟠 Logic Layer: Conditional branching (IF/ELSE), loops, iterations
    • 🔵 Transform Layer: Code execution (JavaScript/Python), string processing, math calculations, template rendering
    • 🟡 Utilities Layer: Delays, screen capture, variable operations
  • Features a professional drag-and-drop visual editor built with React Flow, supporting complex workflow graphs with multiple connections and real-time validation
  • Includes 8+ pre-built templates for common use cases like schedule optimization, conflict resolution, multi-campus synchronization, and predictive analytics
  • Real-time workflow execution with visual progress tracking and detailed logging
  • Interactive AI chat assistant that helps you refine and customize your workflows with context-aware suggestions

🏗️ How we built it

1. Architecture Design Phase

We started by identifying the core requirements for a workflow automation platform:

  • Visual node-based interface for intuitive workflow creation
  • Extensible processor system for handling different node types
  • Type-safe data flow between nodes
  • AI integration for natural language workflow generation

2. Core Workflow Engine

Built using React Flow, we created:

  • Custom Node Components: Developed 20+ specialized node types in src/components/nodes/, each with unique visual styling and configuration options
  • Base Node System: Created BaseNode.tsx as a foundation, providing consistent styling, handle positioning, and status indicators
  • Node Registry: Implemented src/processors/index.ts to manage all node types and their processors

3. State Management

  • Central store (useWorkflowStore) for nodes, edges, and workflow state
  • Real-time UI updates
  • Undo/redo support for editing

4. AI Integration

Developed the AI chat system in AIChatPanel.tsx:

  • Natural language parsing to understand user intent
  • Template-based workflow generation with progressive node placement
  • Context-aware suggestions based on conversation history
  • Mock AI service in src/utils/aiMock.ts for development

5. Template System

Created comprehensive templates in src/templates/smartScheduleTemplates.ts:

  • Genetic Algorithm Optimization: Multi-objective schedule optimization using NSGA-II
  • Neural Network Predictor: Deep learning for pattern recognition
  • Adaptive Scheduling: Real-time constraint adjustment
  • Each template includes complete workflow definitions with nodes, edges, and metadata

6. Processor Architecture

Built a robust processing system:

  • BaseProcessor: Abstract base class for all processors
  • Specialized processors for each node type:
    • LLMProcessor: Handles AI model integration
    • CodeProcessor: Executes JavaScript/Python code safely
    • HttpRequestProcessor: Manages API calls
    • IfElseProcessor: Conditional logic evaluation
  • Input validation and schema definition for each processor

7. UI/UX Polish

  • Implemented Tailwind CSS for consistent, responsive design
  • Added animations and transitions for smooth user experience
  • Created TopBar.tsx with workflow controls and Eval Mode toggle
  • Designed TemplatesPage.tsx for browsing and loading templates

🎯 Challenges we ran into

1. Complex Node Connection Logic

Challenge: Managing multiple input/output handles for nodes like IF/ELSE (which has 2 outputs) and ensuring valid connections between incompatible node types.

Solution: Implemented connection validation in the workflow store, checking node schemas and data types before allowing connections. Created multiple handle IDs (input-1, input-2, output-1, output-2) in BaseNode.tsx.

2. AI Workflow Generation

Challenge: Converting natural language descriptions into functional workflows with proper node placement and connections.

Solution: Created a template-based approach with progressive node placement. The AI assistant in AIChatPanel.tsx uses predefined workflow patterns and adds nodes sequentially with delays to create a smooth animation effect.

3. Type Safety Across the System

Challenge: Maintaining TypeScript type safety across nodes, processors, and data flow while keeping the system flexible for extensions.

Solution: Defined comprehensive type definitions in src/types/index.ts including NodeSchema, NodeProcessor, ExecutionContext, and configuration interfaces for each node type.

4. Real-time Execution Visualization

Challenge: Showing workflow execution progress without blocking the UI and providing meaningful feedback.

Solution: Implemented a status system (idle, running, success, error) for each node, with visual indicators in the node UI. Added LogPanel.tsx for detailed execution logs.

5. Eval Mode Node System

Challenge: Creating a special category of "enhanced" nodes for advanced automation without compromising the core system.

Solution: Developed a separate node definition system in evalModeNodes.ts and created EvalNodeRenderer.tsx to handle rendering of these specialized nodes. Added a confirmation modal in TopBar.tsx to ensure users understand the implications.

🏆 Accomplishments that we're proud of

  1. 20+ Node Types: Created a comprehensive library of specialized nodes covering input/output, AI processing, logic control, data transformation, and utilities.

  2. Professional Visual Editor: Built a production-quality workflow editor with React Flow that rivals commercial automation platforms.

  3. AI-Powered Generation: Successfully implemented natural language to workflow conversion with smooth animations and progressive node placement.

  4. Smart Templates: Developed 8 sophisticated templates including genetic algorithms, neural networks, and multi-objective optimization—showcasing the platform's power for complex scheduling problems.

  5. Type-Safe Architecture: Maintained 100% TypeScript coverage across 50+ files with comprehensive type definitions.

  6. Extensible Processor System: Created a clean architecture that makes adding new node types straightforward (just implement NodeProcessor interface and register in NODE_REGISTRY).

  7. Real-time Collaboration Features: Added UI for inviting collaborators and sharing workflows (in TopBar.tsx).

  8. Responsive Design: Ensured the entire application works seamlessly on different screen sizes with Tailwind CSS.

📚 What we learned

Technical Learnings

  1. React Flow Skills

    • Strong knowledge in node-based UIs, custom nodes, edge handling, and layouts.

  2. State Management

    • Found Zustand often simpler and better than Redux for complex workflow graphs.

  3. TypeScript Practices

    • Generics for flexible processors
    • Discriminated unions for node configs
    • Strict type checks for connections
    • Segregated interfaces for node features

  4. CSS Layouts

    • Mastered flexbox and grid for dynamic nested content without overflow issues.

  5. AI Integration

    • Learned how to design prompts and handle streaming responses for workflow generation.

Design Learnings

  1. Visual Hierarchy: Understood the importance of color coding (different categories) and consistent visual language across node types.

  2. Progressive Disclosure: Learned to show essential information on nodes while hiding complex configurations in the properties panel.

Process Learnings

  1. Iterative Development: Multiple iterations on the chat panel layout (documented in docs/) taught us the value of thorough testing across different content types.

  2. Documentation: Maintained detailed documentation for each fix and feature, making it easier to understand decisions later.

  3. Component Reusability: The BaseNode pattern proved invaluable for maintaining consistency across 20+ node types.

🔮 What's next for AutoFlow

Short-term Goals

  1. Real AI Integration

    • Replace mock AI service in src/utils/aiMock.ts with actual GPT-4 API calls
    • Implement streaming responses for real-time workflow generation
    • Add prompt engineering dashboard for customizing AI behavior

  2. Workflow Execution Engine

    • Build a real processor execution engine to actually run workflows
    • Implement proper error handling and retry logic
    • Add support for async/await and parallel execution

  3. More Node Types

    • Email automation nodes (Gmail, Outlook)
    • Slack/Discord integration nodes
    • Cloud storage nodes (S3, Google Drive, Dropbox)
    • Data visualization nodes

  4. Collaboration Features

    • Real-time collaborative editing (similar to Figma)
    • Version control and workflow history
    • Comments and annotations on nodes
    • Team workspaces and permissions

Medium-term Goals

  1. Marketplace

    • Public template marketplace
    • Community-contributed node types
    • Workflow sharing and remixing
    • Rating and review system

  2. Advanced Scheduling

    • Implement the genetic algorithm optimizer from smartScheduleTemplates.ts
    • Add constraint solver for complex scheduling problems
    • Support for multi-objective optimization
    • Real-time schedule adaptation

  3. Testing & Debugging

    • Workflow testing framework with mock data
    • Step-by-step debugging mode
    • Performance profiling for workflows
    • Automated testing for node processors

  4. Mobile Support

    • Responsive mobile UI for monitoring workflows
    • Mobile app for notifications and approvals
    • Touch-optimized node editing

Long-term Vision

  1. Enterprise Features

    • SSO and advanced authentication
    • Audit logs and compliance reporting
    • SLA monitoring and alerting
    • Custom node development SDK

  2. AI Improvements

    • Multi-modal AI (analyze diagrams, understand screenshots)
    • Workflow optimization suggestions based on execution history
    • Predictive scheduling and resource allocation
    • Natural language workflow queries

  3. Platform Expansion

    • Desktop app (Electron)
    • CLI for workflow execution
    • VS Code extension for developers
    • API for programmatic workflow creation

  4. Education & Community

    • Video tutorials and courses
    • Certification program
    • Annual conference/hackathon
    • Open-source contribution guidelines

Built with ❤️ for the AUTOMATE hackathon

We believe workflow automation should be accessible to everyone, not just developers. AutoFlow is our step toward making that vision a reality.

Built With

Share this project:

Updates