diff --git a/README.md b/README.md index 7ac64ee..1989dd6 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,26 @@ # Agent Workflow Builder +> **AI workflow builder that turns plain English into complex automation pipelines with drag-and-drop magic โœจ** + An open-source, visual workflow builder for creating AI-powered agent workflows, similar to N8N or Zapier, built with React Flow and modern web technologies. Create sophisticated automation workflows with AI models, web scraping, and data processing capabilities. +**๐Ÿš€ Build AI workflows without code: describe, drag, drop, execute. Like Zapier but smarter!** + ## ๐Ÿš€ Features -### Visual Workflow Editor +### ๐ŸŽจ 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 -- **Variable Substitution**: Use `{{nodeId.output}}` or `{{nodelabel.output}}` to pass data between nodes +_Turn ideas into workflows with zero coding_ -### AI-Powered Node Types +- **๐ŸŽฏ 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 +- **๐Ÿ”— Smart Variable Substitution**: Use `{{nodeId.output}}` or `{{nodelabel.output}}` to pass data between nodes + +### ๐Ÿค– AI-Powered Node Types + +_Pre-built intelligence for every automation need_ - **๐ŸŒ Web Scraping**: Extract data from websites using Firecrawl AI - **๐Ÿค– LLM Task**: General language model operations (DeepSeek, OpenAI) @@ -22,71 +30,83 @@ An open-source, visual workflow builder for creating AI-powered agent workflows, - **๐Ÿ“ฅ Data Input**: Workflow entry points (text, JSON, CSV, URL, PDF) - **๐Ÿ“ค Data Output**: Workflow exit points with multiple formats -### AI Copilot Assistant +### ๐Ÿง  AI Copilot Assistant -- **Natural Language Processing**: Describe workflows in plain English -- **Intelligent Workflow Generation**: AI creates workflows from descriptions -- **Contextual Suggestions**: Get smart recommendations based on your workflow -- **Validation & Optimization**: Automatic workflow validation and improvement tips -- **Mixed Intent Analysis**: Handle complex, multi-step workflow requirements +_Your AI assistant that reads your mind and builds workflows_ -### Workflow Management +- **๐Ÿ—ฃ๏ธ Natural Language Processing**: Describe workflows in plain English +- **โœจ Intelligent Workflow Generation**: AI creates workflows from descriptions +- **๐Ÿ’ก Contextual Suggestions**: Get smart recommendations based on your workflow +- **๐Ÿ” Validation & Optimization**: Automatic workflow validation and improvement tips +- **๐ŸŽฏ Mixed Intent Analysis**: Handle complex, multi-step workflow requirements -- **Save & Load**: Persistent workflow storage in browser -- **Import/Export**: Share workflows as JSON files -- **Version Control**: Track workflow changes with timestamps -- **Workflow Library**: Manage multiple workflows with search and filtering -- **Demo Workflows**: Pre-built example workflows to get started +### ๐Ÿ“ Workflow Management -### Execution & Testing +_Organize, share, and scale your automations_ -- **Real-time Execution**: Step-by-step workflow processing with live updates -- **Visual Feedback**: Live status indicators for each node (idle, running, success, error) -- **Test Interface**: Run workflows with sample data and custom inputs -- **Execution Logs**: Detailed execution history and debugging information -- **Error Handling**: Clear error messages and recovery suggestions -- **Performance Monitoring**: Track execution times and resource usage +- **๐Ÿ’พ Save & Load**: Persistent workflow storage in browser +- **๐Ÿ“ค Import/Export**: Share workflows as JSON files +- **๐Ÿ“Š Version Control**: Track workflow changes with timestamps +- **๐Ÿ“š Workflow Library**: Manage multiple workflows with search and filtering +- **๐ŸŽฏ Demo Workflows**: Pre-built example workflows to get started -### Advanced Features +### โšก Execution & Testing -- **Configurable Parameters**: Customize each node's behavior and settings -- **Data Flow Visualization**: See data passing between nodes in real-time -- **Execution Results**: View and export workflow outputs in multiple formats -- **Modular Architecture**: Easy to extend with new node types -- **PDF Processing**: Upload and process PDF documents with text extraction -- **API Integration**: Seamless integration with DeepSeek, OpenAI, and Firecrawl APIs +_See your workflows come to life in real-time_ + +- **๐Ÿš€ Real-time Execution**: Step-by-step workflow processing with live updates +- **๐Ÿ‘๏ธ Visual Feedback**: Live status indicators for each node (idle, running, success, error) +- **๐Ÿงช Test Interface**: Run workflows with sample data and custom inputs +- **๐Ÿ“‹ Execution Logs**: Detailed execution history and debugging information +- **๐Ÿ› ๏ธ Error Handling**: Clear error messages and recovery suggestions +- **๐Ÿ“Š Performance Monitoring**: Track execution times and resource usage + +### ๐Ÿ”ง Advanced Features + +_Enterprise-grade capabilities for complex automations_ + +- **โš™๏ธ Configurable Parameters**: Customize each node's behavior and settings +- **๐ŸŒŠ Data Flow Visualization**: See data passing between nodes in real-time +- **๐Ÿ“Š Execution Results**: View and export workflow outputs in multiple formats +- **๐Ÿงฉ Modular Architecture**: Easy to extend with new node types +- **๐Ÿ“„ PDF Processing**: Upload and process PDF documents with text extraction +- **๐Ÿ”Œ API Integration**: Seamless integration with DeepSeek, OpenAI, and Firecrawl APIs ## ๐Ÿ› ๏ธ Technology Stack -- **Frontend**: React 18 + TypeScript -- **Visual Editor**: React Flow v11 -- **Styling**: Tailwind CSS with custom animations -- **State Management**: Zustand -- **Icons**: Lucide React -- **Notifications**: React Hot Toast -- **AI Integration**: +_Built with modern, battle-tested technologies_ + +- **โš›๏ธ Frontend**: React 18 + TypeScript +- **๐ŸŽจ Visual Editor**: React Flow v11 +- **๐Ÿ’… Styling**: Tailwind CSS with custom animations +- **๐Ÿ—ƒ๏ธ State Management**: Zustand +- **๐ŸŽฏ Icons**: Lucide React +- **๐Ÿ”” Notifications**: React Hot Toast +- **๐Ÿค– AI Integration**: - DeepSeek API (primary LLM) - OpenAI API (alternative LLM) - Firecrawl AI (web scraping) -- **PDF Processing**: Browser-based PDF.js -- **Build Tool**: Create React App +- **๐Ÿ“„ PDF Processing**: Browser-based PDF.js +- **๐Ÿ”จ Build Tool**: Create React App -## ๐Ÿ“ฆ Installation +## ๐Ÿš€ Quick Start -1. **Clone the repository** +_Get up and running in under 5 minutes_ + +1. **๐Ÿ“ฅ Clone the repository** ```bash git clone https://github.com/Nikhil-Doye/workflow-builder.git cd workflow-builder ``` -2. **Install dependencies** +2. **๐Ÿ“ฆ Install dependencies** ```bash npm install ``` -3. **Configure API Keys** (Optional but recommended) +3. **๐Ÿ”‘ Configure API Keys** _(Optional but recommended)_ - The app will prompt you to configure API keys on first launch - You can also configure them later through the settings menu @@ -95,18 +115,18 @@ An open-source, visual workflow builder for creating AI-powered agent workflows, - **Firecrawl API**: For web scraping functionality - **OpenAI API**: Alternative LLM provider -4. **Start the development server** +4. **โ–ถ๏ธ Start the development server** ```bash npm start ``` -5. **Open your browser** +5. **๐ŸŒ Open your browser** Navigate to `http://localhost:3000` -## ๐ŸŽฏ Quick Start +## ๐ŸŽฏ How to Use -### Method 1: AI Copilot (Recommended) +### Method 1: AI Copilot (Recommended) ๐Ÿค– 1. **Start the Application** @@ -125,7 +145,7 @@ An open-source, visual workflow builder for creating AI-powered agent workflows, - Click "Run Test" to execute the workflow - View results in real-time as each node processes -### Method 2: Manual Workflow Creation +### Method 2: Manual Workflow Creation ๐ŸŽจ 1. **Add Nodes** @@ -150,23 +170,29 @@ An open-source, visual workflow builder for creating AI-powered agent workflows, - Use "Export" to download your workflow as a JSON file - Share workflows by importing JSON files -### Example Workflows +### ๐Ÿ’ก Example Workflows -#### Web Scraping + AI Analysis +#### ๐ŸŒ Web Scraping + AI Analysis + +_Extract data from websites and analyze with AI_ 1. **Data Input** โ†’ **Web Scraping** โ†’ **LLM Task** โ†’ **Data Output** 2. Configure the Web Scraping node with a URL 3. Set up the LLM Task with a prompt like "Analyze this content: {{scraper.output}}" 4. Test with a sample URL -#### Document Processing Pipeline +#### ๐Ÿ“„ Document Processing Pipeline + +_Process PDFs and extract structured data_ 1. **Data Input (PDF)** โ†’ **LLM Task** โ†’ **Structured Output** โ†’ **Data Output** 2. Upload a PDF document 3. Extract and process the text with AI 4. Structure the output according to a JSON schema -#### Embedding & Search Workflow +#### ๐Ÿ” Embedding & Search Workflow + +_Find similar content using vector search_ 1. **Data Input** โ†’ **Embedding Generator** โ†’ **Similarity Search** โ†’ **Data Output** 2. Create embeddings from input text @@ -175,7 +201,9 @@ An open-source, visual workflow builder for creating AI-powered agent workflows, ## ๐Ÿ—๏ธ Architecture -### Project Structure +_Scalable, modular design for enterprise use_ + +### ๐Ÿ“ Project Structure ``` src/ @@ -217,20 +245,22 @@ src/ โ””โ”€โ”€ App.tsx # Main application ``` -### Key Components +### ๐Ÿ”ง Key Components -- **WorkflowEditor**: Main visual editor using React Flow with drag-and-drop functionality -- **CopilotPanel**: AI-powered workflow generation and assistance -- **NodeConfiguration**: Modal for configuring node parameters and settings -- **ExecutionPanel**: Real-time execution monitoring with live status updates -- **TestingPanel**: Test interface with sample data and custom inputs -- **WorkflowList**: Workflow management with search, filtering, and CRUD operations -- **workflowStore**: Centralized state management with Zustand for workflow data -- **Services**: Modular service layer for AI APIs, web scraping, and PDF processing +- **๐ŸŽจ WorkflowEditor**: Main visual editor using React Flow with drag-and-drop functionality +- **๐Ÿค– CopilotPanel**: AI-powered workflow generation and assistance +- **โš™๏ธ NodeConfiguration**: Modal for configuring node parameters and settings +- **โšก ExecutionPanel**: Real-time execution monitoring with live status updates +- **๐Ÿงช TestingPanel**: Test interface with sample data and custom inputs +- **๐Ÿ“š WorkflowList**: Workflow management with search, filtering, and CRUD operations +- **๐Ÿ—ƒ๏ธ workflowStore**: Centralized state management with Zustand for workflow data +- **๐Ÿ”Œ Services**: Modular service layer for AI APIs, web scraping, and PDF processing ## ๐Ÿ”ง Configuration -### API Keys Setup +_Set up your AI integrations in minutes_ + +### ๐Ÿ”‘ API Keys Setup The application requires API keys for full functionality: @@ -333,7 +363,9 @@ The workflow builder now supports intuitive variable substitution using node lab ## ๐Ÿš€ Deployment -### Build for Production +_Deploy to your favorite platform_ + +### ๐Ÿ“ฆ Build for Production ```bash npm run build @@ -374,77 +406,81 @@ Note: API keys are currently stored in browser localStorage for security. ## ๐Ÿค Contributing +_Help us make automation accessible to everyone_ + 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** +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 +### ๐Ÿ“‹ Development Guidelines -- Follow TypeScript best practices -- Use Tailwind CSS for styling -- Write meaningful commit messages -- Add tests for new features -- Update documentation as needed +- โœ… 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 +_Quick fixes for common issues_ -**API Key Issues** +### ๐Ÿ”ง Common Issues + +**๐Ÿ”‘ API Key Issues** - Ensure API keys are properly configured in the settings - Check that API keys have the correct format (sk-... for AI, fc-... for Firecrawl) - Verify API keys have sufficient credits/permissions -**Nodes not connecting?** +**๐Ÿ”— Nodes not connecting?** - Ensure you're dragging from output handles (bottom) to input handles (top) - Check that nodes are properly positioned and not overlapping - Verify the workflow has a clear data flow path -**Workflow not executing?** +**โšก Workflow not executing?** - Verify all required node parameters are configured - Check the execution panel for detailed error messages - Ensure all nodes are properly connected in sequence - Check that variable substitutions are correct (e.g., `{{nodeId.output}}` or `{{nodelabel.output}}`) -**Web Scraping Issues** +**๐ŸŒ Web Scraping Issues** - Verify the target URL is accessible and not blocked - Check Firecrawl API key and credits - Try different output formats or content selectors - Ensure the website allows scraping (check robots.txt) -**LLM Task Issues** +**๐Ÿค– LLM Task Issues** - Verify AI API key is valid and has credits - Check that prompts are properly formatted - Ensure variable substitutions in prompts are correct - Try different models or adjust temperature settings -**Import/Export not working?** +**๐Ÿ“ค Import/Export not working?** - Ensure you're using valid JSON format - Check browser console for error messages - Verify the workflow structure is complete -**PDF Processing Issues** +**๐Ÿ“„ PDF Processing Issues** - Ensure the PDF file is not password-protected - Check file size limits (large files may timeout) - Verify the PDF contains extractable text (not just images) -### Getting Help +### ๐Ÿ†˜ Getting Help -- Check the **Execution Panel** for detailed error messages and logs -- Use the **Testing Panel** to debug with sample data -- Review the **AI Copilot** suggestions for workflow improvements -- Check browser console for technical error details +- ๐Ÿ” Check the **Execution Panel** for detailed error messages and logs +- ๐Ÿงช Use the **Testing Panel** to debug with sample data +- ๐Ÿค– Review the **AI Copilot** suggestions for workflow improvements +- ๐Ÿ–ฅ๏ธ Check browser console for technical error details ## ๐Ÿ“„ License @@ -452,6 +488,8 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file ## ๐Ÿ™ Acknowledgments +_Built with amazing open-source tools_ + - [React Flow](https://reactflow.dev/) for the visual editor - [Tailwind CSS](https://tailwindcss.com/) for styling - [Lucide React](https://lucide.dev/) for icons @@ -462,26 +500,32 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file ## ๐Ÿ“š Additional Resources -- [Getting Started Guide](GETTING_STARTED.md) - Detailed setup and first workflow tutorial -- [Variable Substitution Examples](src/examples/variableSubstitutionExample.md) - Learn how to pass data between nodes -- [Demo Workflows](public/demo-workflows.json) - Pre-built example workflows +_Everything you need to master workflow automation_ + +- ๐Ÿ“– [Getting Started Guide](GETTING_STARTED.md) - Detailed setup and first workflow tutorial +- ๐Ÿ”— [Variable Substitution Examples](src/examples/variableSubstitutionExample.md) - Learn how to pass data between nodes +- ๐ŸŽฏ [Demo Workflows](public/demo-workflows.json) - Pre-built example workflows ## ๐Ÿ“ž Support -- **Issues**: [GitHub Issues](https://github.com/your-username/agent-workflow-builder/issues) -- **Discussions**: [GitHub Discussions](https://github.com/your-username/agent-workflow-builder/discussions) -- **Documentation**: Check the Getting Started guide and examples +_We're here to help_ + +- ๐Ÿ› **Issues**: [GitHub Issues](https://github.com/your-username/agent-workflow-builder/issues) +- ๐Ÿ’ฌ **Discussions**: [GitHub Discussions](https://github.com/your-username/agent-workflow-builder/discussions) +- ๐Ÿ“š **Documentation**: Check the Getting Started guide and examples ## ๐Ÿ”ฎ Roadmap -- [ ] More AI model integrations (Claude, Gemini) -- [ ] Advanced workflow templates -- [ ] Team collaboration features -- [ ] Workflow scheduling and automation -- [ ] Custom node development SDK -- [ ] Workflow analytics and monitoring -- [ ] Database integrations -- [ ] API endpoint creation +_What's coming next_ + +- [ ] ๐Ÿค– More AI model integrations (Claude, Gemini) +- [ ] ๐Ÿ“‹ Advanced workflow templates +- [ ] ๐Ÿ‘ฅ Team collaboration features +- [ ] โฐ Workflow scheduling and automation +- [ ] ๐Ÿ› ๏ธ Custom node development SDK +- [ ] ๐Ÿ“Š Workflow analytics and monitoring +- [ ] ๐Ÿ—„๏ธ Database integrations +- [ ] ๐Ÿ”Œ API endpoint creation ---