diff --git a/.gitignore b/.gitignore
index 2fb783ef..2e0165e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ scratch_pad.py
*.html
usecases/
compare_gemini_outputs_v1.py
+node_modules/
diff --git a/README.md b/README.md
index b4995f86..8f1b5ed4 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,51 @@ Flo AI is a Python framework for building structured AI agents with support for
Flo AI is a Python framework that makes building production-ready AI agents and teams as easy as writing YAML. Think "Kubernetes for AI Agents" - compose complex AI architectures using pre-built components while maintaining the flexibility to create your own.
+## π¨ Flo AI Studio - Visual Workflow Designer
+
+**Create AI workflows visually with our powerful React-based studio!**
+
+
-
-
-
-
-
-
-
-
-
Composable AI Agentic Workflow
-
-
-Rootflo is an alternative to Langgraph, and CrewAI. It lets you easily build composable agentic workflows from using simple components to any size, unlocking the full potential of LLMs.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Checkout the docs Β»
-
-
- Github
- β’
- Website
- β’
- Roadmap
-
-
-
-
-
Flo AI π
-
-
- Build production-ready AI agents and teams with minimal code
-
-
-
Flo AI is a Python framework that makes building production-ready AI agents and teams as easy as writing YAML. Think βKubernetes for AI Agentsβ - compose complex AI architectures using pre-built components while maintaining the flexibility to create your own.
-
-
β¨ Features
-
-
- - π Truly Composable: Build complex AI systems by combining smaller, reusable components
- - ποΈ Production-Ready: Built-in best practices and optimizations for production deployments
- - π YAML-First: Define your entire agent architecture in simple YAML
- - π§ Flexible: Use pre-built components or create your own
- - π€ Team-Oriented: Create and manage teams of AI agents working together
- - π RAG Support: Built-in support for Retrieval-Augmented Generation
- - π Langchain Compatible: Works with all your favorite Langchain tools
-
-
-
π Quick Start
-
-
Installation
-
-
pip install flo-ai
-# or using poetry
-poetry add flo-ai
-
-
-
Create Your First AI Team in 30 Seconds
-
-
from flo_ai import Flo, FloSession
-from langchain_openai import ChatOpenAI
-
-# Define your team in YAML
-yaml_config = """
-apiVersion: flo/alpha-v1
-kind: FloRoutedTeam
-name: research-team
-team:
- name: ResearchTeam
- router:
- name: TeamLead
- kind: supervisor
- agents:
- - name: Researcher
- role: Research Specialist
- job: Research latest information on given topics
- tools:
- - name: TavilySearchResults
- - name: Writer
- role: Content Creator
- job: Create engaging content from research
-"""
-
-# Set up and run
-llm = ChatOpenAI(temperature=0)
-session = FloSession(llm).register_tool(name="TavilySearchResults", tool=TavilySearchResults())
-flo = Flo.build(session, yaml=yaml_config)
-
-# Start streaming results
-for response in flo.stream("Write about recent AI developments"):
- print(response)
-
-
-
π Documentation
-
-
Visit our comprehensive documentation for:
-
- - Detailed tutorials
- - Architecture deep-dives
- - API reference
- - Best practices
- - Advanced examples
-
-
-
π Why Flo AI?
-
-
For AI Engineers
-
- - Faster Development: Build complex AI systems in minutes, not days
- - Production Focus: Built-in optimizations and best practices
- - Flexibility: Use our components or build your own
-
-
-
For Teams
-
- - Maintainable: YAML-first approach makes systems easy to understand and modify
- - Scalable: From single agents to complex team hierarchies
- - Testable: Each component can be tested independently
-
-
-
π― Use Cases
-
-
- - π€ Customer Service Automation
- - π Data Analysis Pipelines
- - π Content Generation
- - π Research Automation
- - π― Task-Specific AI Teams
-
-
-
π€ Contributing
-
-
We love your input! Check out our Contributing Guide to get started. Ways to contribute:
-
-
- - π Report bugs
- - π‘ Propose new features
- - π Improve documentation
- - π§ Submit PRs
-
-
-
π License
-
-
Flo AI is MIT Licensed.
-
-
π Acknowledgments
-
-
Built with β€οΈ using:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/studio/README.md b/studio/README.md
new file mode 100644
index 00000000..69ee426c
--- /dev/null
+++ b/studio/README.md
@@ -0,0 +1,354 @@
+# Flo AI Studio
+
+A powerful visual designer for creating YAML-based AI agent workflows. Build complex multi-agent workflows with an intuitive drag-and-drop interface, configure agents with comprehensive forms, set up routing logic, and export everything as production-ready YAML.
+
+## π Overview
+
+Flo AI Studio is a React-based visual editor that makes it easy to design and configure AI workflows for the Flo AI framework. It provides a user-friendly interface for creating complex agent orchestrations without writing code.
+
+## β¨ Features
+
+- **π¨ Visual Workflow Design**: Drag-and-drop interface using React Flow
+- **π€ Agent Management**: Create and edit agents with comprehensive configuration forms
+- **π§ Tool Integration**: Add and configure tools for your agents
+- **π Router Configuration**: Define custom routing logic between workflow nodes
+- **π YAML Export**: Generate production-ready YAML configurations
+- **π Template System**: Quick agent templates for common use cases
+- **βοΈ Configuration Management**: Manage available tools, LLMs, and routers
+- **πΎ State Management**: Robust state management with Zustand
+- **π― TypeScript**: Fully typed for better development experience
+
+## π Quick Start
+
+### Installation
+
+```bash
+# Navigate to flo_studio directory
+cd flo_studio
+
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+```
+
+### Building for Production
+
+```bash
+# Build the application
+pnpm build
+
+# Preview the build
+pnpm preview
+```
+
+## ποΈ Architecture
+
+### Project Structure
+
+```
+flo_studio/
+βββ src/
+β βββ components/ # React components
+β β βββ editors/ # Modal editors (Agent, Edge, Config)
+β β βββ flow/ # React Flow components
+β β βββ sidebar/ # Sidebar components
+β β βββ toolbar/ # Toolbar components
+β β βββ ui/ # Reusable UI components
+β βββ store/ # Zustand store
+β βββ types/ # TypeScript definitions
+β βββ utils/ # Utility functions
+β βββ lib/ # Shared utilities
+βββ public/ # Static assets
+βββ dist/ # Build output
+```
+
+### Key Technologies
+
+- **React 18** - Modern React with hooks and concurrent features
+- **TypeScript** - Type safety and better developer experience
+- **React Flow** - Graph visualization and interaction
+- **Zustand** - Lightweight state management
+- **Tailwind CSS** - Utility-first CSS framework
+- **Radix UI** - Accessible component primitives
+- **React Hook Form** - Form handling with validation
+- **js-yaml** - YAML parsing and generation
+- **Vite** - Fast build tool and dev server
+
+## π― Usage Guide
+
+### Creating Your First Workflow
+
+1. **Start the Application**
+ ```bash
+ pnpm dev
+ ```
+
+2. **Create an Agent**
+ - Click the "Agent" button in the toolbar
+ - Fill in the agent configuration form:
+ - Name and role
+ - Job description
+ - LLM model selection
+ - Tools (optional)
+ - Output parser (optional)
+
+3. **Build the Workflow**
+ - Drag nodes from the sidebar onto the canvas
+ - Connect nodes by dragging from output handles to input handles
+ - Configure edge routers by clicking on connections
+
+4. **Export Configuration**
+ - Click "Export" in the toolbar
+ - Review the generated YAML
+ - Download or copy the configuration
+
+### Agent Configuration
+
+Agents can be configured with:
+
+- **Basic Information**: Name, role, job description
+- **Model Settings**: Provider (OpenAI, Anthropic, etc.), model name, temperature
+- **Tools**: Select from available tools or add custom ones
+- **Output Parser**: Define structured output schemas
+- **Reasoning Pattern**: DIRECT, COT (Chain of Thought), or REACT
+
+### Workflow Features
+
+- **Visual Connections**: Drag to connect agents and tools
+- **Router Functions**: Configure conditional routing between nodes
+- **Start/End Nodes**: Automatically detected based on connections
+- **Validation**: Real-time validation of workflow structure
+
+## π§ Configuration
+
+### Available LLMs
+
+The studio comes pre-configured with popular LLM providers:
+
+- **OpenAI**: GPT-4o, GPT-4o-mini
+- **Anthropic**: Claude-3.5-Sonnet, Claude-3.5-Haiku
+- **Google**: Gemini-2.5-Flash, Gemini-2.5-Pro
+- **Ollama**: Llama2, Llama3 (local models)
+
+### Available Tools
+
+Default tools include:
+
+- **calculator** - Mathematical calculations
+- **web_search** - Web search functionality
+- **file_reader** - File reading and analysis
+- **email_sender** - Email sending capabilities
+- **text_processor** - Text processing and analysis
+- **image_analyzer** - Image analysis and processing
+
+### Router Functions
+
+Pre-configured router functions:
+
+- **default_router** - Simple pass-through routing
+- **content_router** - Routes based on content analysis
+- **classification_router** - Routes based on classification results
+- **sentiment_router** - Routes based on sentiment analysis
+
+## π YAML Export Format
+
+The studio generates YAML compatible with the Flo AI framework:
+
+```yaml
+metadata:
+ name: "My Workflow"
+ version: "1.0.0"
+ description: "Generated with Flo AI Studio"
+ tags: ["flo-ai", "studio-generated"]
+
+arium:
+ agents:
+ - name: "content_analyzer"
+ role: "Content Analyst"
+ job: "Analyze content and extract insights"
+ model:
+ provider: "openai"
+ name: "gpt-4o-mini"
+ settings:
+ temperature: 0.3
+ reasoning_pattern: "COT"
+
+ workflow:
+ start: "content_analyzer"
+ edges:
+ - from: "content_analyzer"
+ to: ["summarizer"]
+ end: ["summarizer"]
+```
+
+## π Integration with Flo AI
+
+Use the exported YAML with the Flo AI framework:
+
+```python
+from flo_ai.arium.builder import AriumBuilder
+
+# Load your exported workflow
+builder = AriumBuilder.from_yaml(yaml_file="my-workflow.yaml")
+
+# Run the workflow
+result = await builder.build_and_run(["Your input here"])
+```
+
+## π οΈ Development
+
+### Adding New Components
+
+1. **Create Component**
+ ```typescript
+ // src/components/MyComponent.tsx
+ import React from 'react';
+
+ export const MyComponent: React.FC = () => {
+ return