Agent Workflow Builder

An open-source, visual workflow builder for creating AI-powered agent workflows, similar to N8N or sim.ai, built with React Flow and modern web technologies.

🚀 Features

Visual Workflow Editor

• Drag & Drop Interface: Intuitive node-based workflow creation
• Real-time Connection: Connect nodes with visual edges
• Node Palette: Easy access to all available node types
• Responsive Design: Works on desktop and tablet devices

AI-Powered Node Types

• 🌐 Web Scraping: Extract data from websites
• 🤖 LLM Task: General language model operations
• 🧠 Embedding Generator: Create vector embeddings
• 🔍 Similarity Search: Find similar content in vector stores
• 📋 Structured Output: Parse and structure data with schemas
• 📥 Data Input: Workflow entry points
• 📤 Data Output: Workflow exit points

Workflow Management

• Save & Load: Persistent workflow storage
• Import/Export: Share workflows as JSON files
• Version Control: Track workflow changes
• Workflow Library: Manage multiple workflows

Execution & Testing

• Real-time Execution: Step-by-step workflow processing
• Visual Feedback: Live status indicators for each node
• Test Interface: Run workflows with sample data
• Execution Logs: Detailed execution history and debugging
• Error Handling: Clear error messages and recovery

Advanced Features

• Configurable Parameters: Customize each node's behavior
• Data Flow Visualization: See data passing between nodes
• Execution Results: View and export workflow outputs
• Modular Architecture: Easy to extend with new node types

🛠️ Technology Stack

• Frontend: React 18 + TypeScript
• Visual Editor: React Flow
• Styling: Tailwind CSS
• State Management: Zustand
• Icons: Lucide React
• Notifications: React Hot Toast

📦 Installation

1. Clone the repository

   git clone https://github.com/your-username/agent-workflow-builder.git
   cd agent-workflow-builder
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm start
   

4. Open your browser Navigate to http://localhost:3000

🎯 Quick Start

Creating Your First Workflow

1. Start the Application

   • Open the app in your browser
   • Click "New Workflow" to create your first workflow

2. Add Nodes

   • Click "Show Node Palette" to reveal available node types
   • Drag nodes from the palette onto the canvas
   • Connect nodes by dragging from output handles to input handles

3. Configure Nodes

   • Click on any node to open its configuration panel
   • Set parameters like URLs, prompts, model settings, etc.
   • Customize node labels for better organization

4. Test Your Workflow

   • Use the Testing Panel to provide sample input data
   • Click "Run Test" to execute the workflow
   • View results in real-time as each node processes

5. Save and Export

   • Click "Save" to persist your workflow
   • Use "Export" to download your workflow as a JSON file
   • Share workflows by importing JSON files

Example Workflow: Web Scraping + AI Analysis

1. Add a Data Input node - Set it to provide a URL
2. Add a Web Scraping node - Configure it to scrape the URL
3. Add an LLM Task node - Set up a prompt to analyze the scraped content
4. Add a Data Output node - To capture the final result
5. Connect the nodes in sequence
6. Test with a sample URL and see the results

🏗️ Architecture

Project Structure

src/
├── components/           # React components
│   ├── nodes/           # Node type components
│   ├── WorkflowEditor.tsx
│   ├── WorkflowList.tsx
│   ├── NodeConfiguration.tsx
│   ├── ExecutionPanel.tsx
│   └── TestingPanel.tsx
├── store/               # State management
│   └── workflowStore.ts
├── types/               # TypeScript definitions
│   └── index.ts
├── utils/               # Utility functions
│   └── workflowSerialization.ts
└── App.tsx             # Main application

Key Components

• WorkflowEditor: Main visual editor using React Flow
• NodeConfiguration: Modal for configuring node parameters
• ExecutionPanel: Real-time execution monitoring
• TestingPanel: Test interface with sample data
• workflowStore: Centralized state management with Zustand

🔧 Configuration

Node Types and Parameters

Each node type supports specific configuration options:

Web Scraping Node

• url: Target website URL
• selector: CSS selector for content extraction
• maxLength: Maximum content length to extract

LLM Task Node

• prompt: The prompt to send to the language model
• model: AI model selection (GPT-3.5, GPT-4, Claude, etc.)
• temperature: Response creativity (0-2)
• maxTokens: Maximum response length

Embedding Generator

• model: Embedding model selection
• dimensions: Vector dimensions

Similarity Search

• vectorStore: Target vector database
• topK: Number of similar results to return
• threshold: Similarity threshold (0-1)

🚀 Deployment

Build for Production

npm run build

Deploy to Vercel

npm install -g vercel
vercel --prod

Deploy to Netlify

npm run build
# Upload the 'build' folder to Netlify

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS for styling
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

🐛 Troubleshooting

Common Issues

Nodes not connecting?

• Ensure you're dragging from output handles to input handles
• Check that nodes are properly positioned

Workflow not executing?

• Verify all required node parameters are configured
• Check the execution panel for error messages

Import/Export not working?

• Ensure you're using valid JSON format
• Check browser console for error messages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Flow for the visual editor
• Tailwind CSS for styling
• Lucide React for icons
• Zustand for state management

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@agentworkflowbuilder.com

---

Built with ❤️ for the AI community