ai-space/workflow-builder
3
0
Fork 0
mirror of https://github.com/Nikhil-Doye/workflow-builder.git synced 2026-07-22 02:01:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enhance README.md with improved formatting and content updates

Browse Source 
- Updated the introduction to highlight the AI workflow builder's capabilities.
- Enhanced feature sections with icons and clearer descriptions for better readability.
- Added new sections for workflow management, execution, testing, and advanced features with corresponding icons.
- Improved quick start instructions and added visual elements for clarity.
- Included example workflows with icons to illustrate use cases.
- Updated troubleshooting and support sections for better user guidance.
This commit is contained in:
Nikhil-Doye
2025-10-23 17:15:47 -04:00
parent 408ab9b1e2
commit 1efe6db5a2
1 changed files with 149 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+149 -105
View File
@@ -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
---