[PR #4947] [CLOSED] ??feat: Visual Workflow Designer - Drag-and-Drop AI Workflow Creation System #4839

Closed
opened 2026-02-22 18:36:38 -05:00 by yindo · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/4947
Author: @sangjiexun
Created: 1/30/2026
Status: Closed

Base: masterHead: feature/visual-workflow-designer


📝 Commits (1)

  • 885f381 feat: Visual Workflow Designer - Core Implementation

📊 Changes

3 files changed (+3099 additions, -0 deletions)

View changed files

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/WorkflowSelector/index.jsx (+346 -0)
frontend/src/pages/WorkflowDesigner/index.jsx (+2340 -0)
frontend/src/pages/WorkflowDesigner/nodeTypes.js (+413 -0)

📄 Description

?? Overview

This PR introduces a comprehensive Visual Workflow Designer that enables users to create, manage, and execute complex AI workflows through an intuitive drag-and-drop interface. This feature transforms AnythingLLM from a chat-based AI assistant into a powerful no-code AI automation platform.

??Key Features

?? Visual Workflow Designer

  • Drag-and-Drop Interface: Intuitive canvas-based workflow creation
  • Node-Based Architecture: Modular design with various node types
  • Real-time Preview: Visual feedback during workflow construction
  • Auto-save: Automatic saving to localStorage with history management
  • Undo/Redo: Full version control for workflow editing

?? Supported Node Types

Trigger Nodes

  • Manual Trigger: Start workflows manually
  • Schedule Trigger: Cron-based automation (planned)
  • Webhook Trigger: External system integration (planned)

?? LLM Nodes

  • DeepSeek V3 Integration: Advanced reasoning capabilities
  • Google Gemini Flash: Fast multimodal processing
  • Qwen (??????): Multilingual AI model
  • Configurable Parameters: System prompts, temperature, max tokens

?? Logic Nodes

  • Conditional Branching: Dynamic flow control based on conditions
  • Loop/Iteration: Process data in repetitive cycles
  • JavaScript Code Execution: Custom logic implementation
  • Python Code Execution: (planned)

?? Data Nodes

  • HTTP Request: RESTful API integration
  • Database Query: Database connectivity (planned)
  • RAG Query: Knowledge retrieval from documents

?? Output Nodes

  • Chat Output: Display results in chat interface
  • Image Generation: Create visual content
  • Image Processing: Analyze and modify images

??Workflow Execution Engine

  • Parallel Execution: Support for concurrent node processing
  • Conditional Branching: Dynamic flow control
  • Error Handling: Comprehensive error tracking and logging
  • Execution Logs: Detailed step-by-step execution tracking
  • Result Visualization: Real-time execution results display

?? Workflow Management

  • Save/Load: Persistent workflow storage
  • Import/Export: Share workflows between instances
  • Version Control: Complete undo/redo functionality
  • Workflow Library: Manage multiple workflows

?? AI-Powered Workflow Generation

  • Natural Language Input: Describe workflows in plain language
  • Auto-generation: AI creates workflow structure automatically
  • Smart Suggestions: Context-aware node recommendations

?? Chat Integration

  • Workflow Selector: Choose workflows directly from chat input
  • One-Click Execution: Run workflows with user input
  • Result Integration: Workflow outputs appear in chat history

????Technical Implementation

Frontend Structure

frontend/src/pages/WorkflowDesigner/
????? index.jsx                 # Main workflow designer component
????? nodeTypes.js              # Node type definitions
????? components/               # Sub-components

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/
????? WorkflowSelector/         # Workflow selector in chat
    ????? index.jsx

Backend Endpoints

server/endpoints/
????? agentFlows.js             # Workflow API endpoints
    ????? POST /agent-flows/save
    ????? GET  /agent-flows/list
    ????? GET  /agent-flows/:uuid
    ????? DELETE /agent-flows/:uuid
    ????? POST /agent-flows/:uuid/toggle

Data Storage

  • LocalStorage: Client-side workflow persistence
  • Server Storage: Optional server-side backup
  • Format: JSON-based workflow definition

?? Usage Examples

Example 1: Simple Q&A Workflow

[Manual Trigger] ??[DeepSeek LLM] ??[Chat Output]

Example 2: Conditional Processing

[Manual Trigger] ??[Condition Node] 
                    ??? True ??[LLM Node A] ??[Output]
                    ??? False ??[LLM Node B] ??[Output]

Example 3: Parallel Processing

[Manual Trigger] ??[Fork]
                    ??? [LLM Node 1] ????n                    ??? [LLM Node 2] ????? [Join] ??[Output]
                    ??? [LLM Node 3] ????n```

### Example 4: RAG + LLM Pipeline

[Manual Trigger] ??[RAG Query] ??[DeepSeek LLM] ??[Chat Output]


## ?? Benefits

1. **No-Code AI Workflows**: Create complex AI pipelines without coding
2. **Reusability**: Save and reuse workflows across projects
3. **Flexibility**: Mix and match different AI models and logic
4. **Transparency**: Visual representation of AI processing flow
5. **Debugging**: Step-by-step execution logs for troubleshooting
6. **Scalability**: Support for complex multi-step workflows
7. **Productivity**: Automate repetitive AI tasks
8. **Accessibility**: Lower barrier to AI workflow creation

## ?? Testing

### Manual Testing Checklist
- [x] Create new workflow
- [x] Add and configure nodes
- [x] Connect nodes
- [x] Execute workflow
- [x] Save and load workflow
- [x] Undo/Redo operations
- [x] AI workflow generation
- [x] Workflow selector in chat
- [x] Parallel execution
- [x] Conditional branching
- [x] Error handling

### Browser Compatibility
- [x] Chrome/Edge
- [x] Firefox
- [x] Safari
- [ ] Mobile browsers (planned)

## ?? Future Enhancements

- [ ] Server-side workflow execution
- [ ] Workflow templates marketplace
- [ ] Advanced debugging tools
- [ ] Workflow versioning and rollback
- [ ] Collaborative workflow editing
- [ ] More node types (Email, SMS, Database, etc.)
- [ ] Workflow scheduling and automation
- [ ] Performance metrics and analytics
- [ ] Workflow testing framework
- [ ] API integration for external services

## ?? Breaking Changes

None. This is a new feature that doesn't affect existing functionality.

## ?? Migration Guide

No migration needed. This is an additive feature.

## ?? Documentation

- User guide included in the workflow designer interface
- Tooltips and help text for all node types
- Example workflows provided
- Comprehensive error messages

## ??Validation Checklist

- [x] Code follows project style guidelines
- [x] Self-review completed
- [x] Comments added for complex logic
- [x] Documentation updated
- [x] No new warnings generated
- [x] Manual testing completed
- [x] Performance tested
- [x] Accessibility considered
- [x] Security reviewed

## ?? Impact

This feature significantly expands AnythingLLM's capabilities:
- **From Chat Assistant to AI Platform**: Transforms the application into a comprehensive AI workflow platform
- **Democratizes AI Automation**: Makes complex AI workflows accessible to non-technical users
- **Increases User Engagement**: Provides powerful automation capabilities that keep users engaged
- **Competitive Advantage**: Positions AnythingLLM as a leader in no-code AI automation
- **Extensible Foundation**: Provides a solid foundation for future workflow enhancements

## ?? Related Issues

- Closes #[feature-request-number] (if applicable)
- Addresses community requests for workflow automation

---

**This feature represents a major step forward in making AI automation accessible to everyone, transforming AnythingLLM into a comprehensive no-code AI platform.** ??

---

<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/4947 **Author:** [@sangjiexun](https://github.com/sangjiexun) **Created:** 1/30/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `feature/visual-workflow-designer` --- ### 📝 Commits (1) - [`885f381`](https://github.com/Mintplex-Labs/anything-llm/commit/885f381657941b92ea5df895485999361cfe0cdc) ✨ feat: Visual Workflow Designer - Core Implementation ### 📊 Changes **3 files changed** (+3099 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/WorkflowSelector/index.jsx` (+346 -0) ➕ `frontend/src/pages/WorkflowDesigner/index.jsx` (+2340 -0) ➕ `frontend/src/pages/WorkflowDesigner/nodeTypes.js` (+413 -0) </details> ### 📄 Description ## ?? Overview This PR introduces a comprehensive **Visual Workflow Designer** that enables users to create, manage, and execute complex AI workflows through an intuitive drag-and-drop interface. This feature transforms AnythingLLM from a chat-based AI assistant into a powerful no-code AI automation platform. ## ??Key Features ### ?? **Visual Workflow Designer** - **Drag-and-Drop Interface**: Intuitive canvas-based workflow creation - **Node-Based Architecture**: Modular design with various node types - **Real-time Preview**: Visual feedback during workflow construction - **Auto-save**: Automatic saving to localStorage with history management - **Undo/Redo**: Full version control for workflow editing ### ?? **Supported Node Types** #### Trigger Nodes - **Manual Trigger**: Start workflows manually - **Schedule Trigger**: Cron-based automation (planned) - **Webhook Trigger**: External system integration (planned) #### ?? LLM Nodes - **DeepSeek V3 Integration**: Advanced reasoning capabilities - **Google Gemini Flash**: Fast multimodal processing - **Qwen (??????)**: Multilingual AI model - **Configurable Parameters**: System prompts, temperature, max tokens #### ?? Logic Nodes - **Conditional Branching**: Dynamic flow control based on conditions - **Loop/Iteration**: Process data in repetitive cycles - **JavaScript Code Execution**: Custom logic implementation - **Python Code Execution**: (planned) #### ?? Data Nodes - **HTTP Request**: RESTful API integration - **Database Query**: Database connectivity (planned) - **RAG Query**: Knowledge retrieval from documents #### ?? Output Nodes - **Chat Output**: Display results in chat interface - **Image Generation**: Create visual content - **Image Processing**: Analyze and modify images ### ??**Workflow Execution Engine** - **Parallel Execution**: Support for concurrent node processing - **Conditional Branching**: Dynamic flow control - **Error Handling**: Comprehensive error tracking and logging - **Execution Logs**: Detailed step-by-step execution tracking - **Result Visualization**: Real-time execution results display ### ?? **Workflow Management** - **Save/Load**: Persistent workflow storage - **Import/Export**: Share workflows between instances - **Version Control**: Complete undo/redo functionality - **Workflow Library**: Manage multiple workflows ### ?? **AI-Powered Workflow Generation** - **Natural Language Input**: Describe workflows in plain language - **Auto-generation**: AI creates workflow structure automatically - **Smart Suggestions**: Context-aware node recommendations ### ?? **Chat Integration** - **Workflow Selector**: Choose workflows directly from chat input - **One-Click Execution**: Run workflows with user input - **Result Integration**: Workflow outputs appear in chat history ## ????Technical Implementation ### Frontend Structure ``` frontend/src/pages/WorkflowDesigner/ ????? index.jsx # Main workflow designer component ????? nodeTypes.js # Node type definitions ????? components/ # Sub-components frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/ ????? WorkflowSelector/ # Workflow selector in chat ????? index.jsx ``` ### Backend Endpoints ``` server/endpoints/ ????? agentFlows.js # Workflow API endpoints ????? POST /agent-flows/save ????? GET /agent-flows/list ????? GET /agent-flows/:uuid ????? DELETE /agent-flows/:uuid ????? POST /agent-flows/:uuid/toggle ``` ### Data Storage - **LocalStorage**: Client-side workflow persistence - **Server Storage**: Optional server-side backup - **Format**: JSON-based workflow definition ## ?? Usage Examples ### Example 1: Simple Q&A Workflow ``` [Manual Trigger] ??[DeepSeek LLM] ??[Chat Output] ``` ### Example 2: Conditional Processing ``` [Manual Trigger] ??[Condition Node] ??? True ??[LLM Node A] ??[Output] ??? False ??[LLM Node B] ??[Output] ``` ### Example 3: Parallel Processing ``` [Manual Trigger] ??[Fork] ??? [LLM Node 1] ????n ??? [LLM Node 2] ????? [Join] ??[Output] ??? [LLM Node 3] ????n``` ### Example 4: RAG + LLM Pipeline ``` [Manual Trigger] ??[RAG Query] ??[DeepSeek LLM] ??[Chat Output] ``` ## ?? Benefits 1. **No-Code AI Workflows**: Create complex AI pipelines without coding 2. **Reusability**: Save and reuse workflows across projects 3. **Flexibility**: Mix and match different AI models and logic 4. **Transparency**: Visual representation of AI processing flow 5. **Debugging**: Step-by-step execution logs for troubleshooting 6. **Scalability**: Support for complex multi-step workflows 7. **Productivity**: Automate repetitive AI tasks 8. **Accessibility**: Lower barrier to AI workflow creation ## ?? Testing ### Manual Testing Checklist - [x] Create new workflow - [x] Add and configure nodes - [x] Connect nodes - [x] Execute workflow - [x] Save and load workflow - [x] Undo/Redo operations - [x] AI workflow generation - [x] Workflow selector in chat - [x] Parallel execution - [x] Conditional branching - [x] Error handling ### Browser Compatibility - [x] Chrome/Edge - [x] Firefox - [x] Safari - [ ] Mobile browsers (planned) ## ?? Future Enhancements - [ ] Server-side workflow execution - [ ] Workflow templates marketplace - [ ] Advanced debugging tools - [ ] Workflow versioning and rollback - [ ] Collaborative workflow editing - [ ] More node types (Email, SMS, Database, etc.) - [ ] Workflow scheduling and automation - [ ] Performance metrics and analytics - [ ] Workflow testing framework - [ ] API integration for external services ## ?? Breaking Changes None. This is a new feature that doesn't affect existing functionality. ## ?? Migration Guide No migration needed. This is an additive feature. ## ?? Documentation - User guide included in the workflow designer interface - Tooltips and help text for all node types - Example workflows provided - Comprehensive error messages ## ??Validation Checklist - [x] Code follows project style guidelines - [x] Self-review completed - [x] Comments added for complex logic - [x] Documentation updated - [x] No new warnings generated - [x] Manual testing completed - [x] Performance tested - [x] Accessibility considered - [x] Security reviewed ## ?? Impact This feature significantly expands AnythingLLM's capabilities: - **From Chat Assistant to AI Platform**: Transforms the application into a comprehensive AI workflow platform - **Democratizes AI Automation**: Makes complex AI workflows accessible to non-technical users - **Increases User Engagement**: Provides powerful automation capabilities that keep users engaged - **Competitive Advantage**: Positions AnythingLLM as a leader in no-code AI automation - **Extensible Foundation**: Provides a solid foundation for future workflow enhancements ## ?? Related Issues - Closes #[feature-request-number] (if applicable) - Addresses community requests for workflow automation --- **This feature represents a major step forward in making AI automation accessible to everyone, transforming AnythingLLM into a comprehensive no-code AI platform.** ?? --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-22 18:36:38 -05:00
yindo closed this issue 2026-02-22 18:36:38 -05:00
yindo changed title from [PR #4947] ??feat: Visual Workflow Designer - Drag-and-Drop AI Workflow Creation System to [PR #4947] [CLOSED] ??feat: Visual Workflow Designer - Drag-and-Drop AI Workflow Creation System 2026-06-05 15:20:38 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#4839