README.md

---
title: FlowLab
emoji: 🏢
colorFrom: pink
colorTo: green
sdk: gradio
sdk_version: 5.33.1
app_file: app.py
pinned: false
short_description: AI app builder using Workflows
tags:
  - custom-component-track
---

# 🎨 FlowForge - Visual AI App Builder

**Build AI apps with visual workflows - no code required**

**FlowLab automatically creates custom Gradio apps for your workflows, you can also design the layout of your gradio apps**

A powerful visual workflow builder that transforms drag-and-drop designs into production-ready AI applications. Create sophisticated AI workflows through an intuitive interface and deploy them instantly to Modal.

Create your own AI apps, be it MCP Agents, AI agents, AI workflows, RAG and more all with a simple UI and a lot of customization options. This App uses Llama Index Backend in all nodes. 

The App also can deploy models directly from huggingface.

**Feel free to reach out to me if you have any doubts or are unable to run the App. - jaya11vibhav@gmail.com**

## 🏷️ Tags
`custom-component-track`

## 🚀 Live Demo
🔗 **[Try FlowForge Live](https://huggingface.co/spaces/Agents-MCP-Hackathon/FlowLab)**

## 📹 Demo Video
🎥 **[Watch FlowForge in Action](https://youtu.be/CWke5xgyPLQ)**
**Shows the complete workflow creation, design, and deployment process**

# Tools used - 

### 1) Modal - For app deployment (The workflow can automatically deploy apps onto Modal on its own).
### 2) Nebius - API for LLMs and Image Generation Models
### 3) Anthropic - LLMs
### 4) OpenAI - LLMs
### 5) HuggingFace - Spaces, Models (Supports multiple models from huggingface)
### 6) Gradio - Custom Components

## ✨ What is FlowLab?

FlowForge revolutionizes AI app development by providing a visual, no-code interface for creating sophisticated AI workflows. Instead of writing complex code, users simply drag and drop components, connect them visually, and deploy production-ready applications.

### 🎯 Key Features

- **🎨 Visual Workflow Builder**: Drag-and-drop interface powered by SvelteFlow
- **🧠 25+ AI Components**: Pre-built nodes for OpenAI, Anthropic, RAG, search, and more  
- **🎪 Custom UI Designer**: Optional visual interface designer for your apps
- **⚡ Instant Deployment**: One-click deployment to Modal with auto-scaling
- **🔧 No Code Required**: Build production AI apps without programming
- **🤖 AI-Powered Generation**: Uses Claude to generate optimized Python code

## 🛠️ Technical Innovation

### Custom Gradio Components
FlowForge introduces several cutting-edge custom Gradio components:

1. **WorkflowBuilder Component**: A sophisticated visual editor built with Svelte and TypeScript
   - Real-time workflow validation
   - Dynamic property panels  
   - Advanced connection system
   - Export capabilities

2. **GradioDesigner Component**: Visual UI designer for creating custom interfaces
   - Drag-and-drop UI building
   - Component property editing
   - Layout management

3. **IFrameComponent**: Seamless app preview integration

### AI Agent Architecture
The system acts as an intelligent agent that:
- **Analyzes** user-created workflows
- **Generates** optimized Python/Gradio code using Claude
- **Validates** workflow integrity and completeness
- **Deploys** applications with proper resource allocation
- **Monitors** deployment status and provides feedback

## 🎯 Supported Workflow Types

### 🤖 AI & Language Processing
- **ChatModel**: OpenAI, Anthropic integration
- **Prompt Engineering**: Dynamic prompt templates
- **Text Generation**: Hugging Face models
- **ReAct Agents**: LlamaIndex-powered reasoning agents

### 📚 RAG & Knowledge Systems  
- **Knowledge Base**: Document ingestion and indexing
- **RAG Query**: Semantic search and retrieval
- **Vector Storage**: Persistent knowledge management

### 🌐 API & Web Integration
- **Web Search**: Real-time search capabilities
- **API Requests**: REST API integration
- **Webhooks**: Event-driven triggers

### 🎨 Multimodal Capabilities
- **Image Generation**: DALL-E, Stable Diffusion, Nebius
- **Speech Processing**: Text-to-speech and speech-to-text
- **Vision Models**: Image analysis and understanding

### 🤝 MCP Integration (Future)
- **MCP Connections**: Model Context Protocol servers
- **MCP Agents**: Standardized tool integration
- **Cross-Platform**: Compatible with Claude Desktop, Cursor

## 🏗️ How It Works

### 1. 🎨 Create Workflow
Simply drag and drop nodes and fill in the parameters. Then click on save workflow. 

### 2. 🖌️ Design Interface (Optional)
Optional step, here you can use the modified workflow component to design the layout of your AI app. Simply drag and drop the nodes which represent the gradio component and design them as you like it.

### 3. 🚀 Deploy Application
Update the Modal Configuration according to your app's needs, if unsure simply click on "Build and Deploy App" and the LLM will take care of the deployment for you.

Done!!

Takes about 1 to 5 minutes depending on the complexity of the workflow. 

Once done you will receive a URL to your app fully deployed on Modal. You can also view your app in the IFrame in the same window.

Feel free to explore!

Thank You!