Studio: Visual Designer to create AI agents (#121)

* Arium yaml chanegs

* fix readme for format

* Studio first commit

* Custom agent builder

* Basic multi agent routing

* Fix studio, and have first agent created through it to run

* Add studio details in READme

* Adding flo studio imahe

Author: vizsatiz

.gitignore

@@ -21,3 +21,4 @@ scratch_pad.py
 *.html
 usecases/
 compare_gemini_outputs_v1.py
+node_modules/

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!**
+
+<p align="center">
+  <img src="./images/flo-studio-preview.png" alt="Flo AI Studio - Visual Workflow Designer" width="800" />
+</p>
+
+Flo AI Studio is a modern, intuitive visual editor that allows you to design complex multi-agent workflows through a drag-and-drop interface. Build sophisticated AI systems without writing code, then export them as production-ready YAML configurations.
+
+### 🚀 Studio Features
+
+- **🎯 Visual Design**: Drag-and-drop interface for creating agent workflows
+- **🤖 Agent Management**: Configure AI agents with different roles, models, and tools
+- **🔀 Smart Routing**: Visual router configuration for intelligent workflow decisions
+- **📤 YAML Export**: Export workflows as Flo AI-compatible YAML configurations
+- **📥 YAML Import**: Import existing workflows for further editing
+- **✅ Workflow Validation**: Real-time validation and error checking
+- **🔧 Tool Integration**: Connect agents to external tools and APIs
+- **📋 Template System**: Quick start with pre-built agent and router templates
+
+### 🏃‍♂️ Quick Start with Studio
+
+1. **Start the Studio**:
+   ```bash
+   cd studio
+   pnpm install
+   pnpm dev
+   ```
+
+2. **Design Your Workflow**:
+   - Add agents, routers, and tools to the canvas
+   - Configure their properties and connections
+   - Test with the built-in validation
+
+3. **Export & Run**:
+   ```bash
+   # Export YAML from the studio, then run with Flo AI
+   python -c "
+   from flo_ai.arium import AriumBuilder
+   builder = AriumBuilder.from_yaml(yaml_file='your_workflow.yaml')
+   result = await builder.build_and_run(['Your input here'])
+   "
+   ```
+
 ## ✨ Features
 
 - 🔌 **Truly Composable**: Build complex AI systems by combining smaller, reusable components

flo_ai/examples/example.py

@@ -0,0 +1,143 @@
+"""
+Example of running a Flo AI workflow with snake_case agent names
+Generated from Flo AI Studio
+"""
+
+import asyncio
+from flo_ai.arium import AriumBuilder
+from flo_ai.tool.base_tool import Tool
+
+# Set your OpenAI API key
+# os.environ["OPENAI_API_KEY"] = "your-api-key-here"
+
+
+# Create a simple web search tool
+async def web_search_function(query: str) -> str:
+    """Simple web search simulation - replace with actual search API"""
+    return f"Web search results for '{query}': Found relevant articles about the topic including latest developments, applications, and ethical considerations. [This is a mock search - integrate with real search API like Google, Bing, or DuckDuckGo]"
+
+
+# Create the tool instance
+web_search_tool = Tool(
+    name='web_search',
+    description='Search the web for information on a given topic',
+    function=web_search_function,
+    parameters={
+        'query': {
+            'type': 'string',
+            'description': 'The search query to look up information about',
+        }
+    },
+)
+
+# YAML workflow definition (exported from Flo AI Studio)
+workflow_yaml = """
+metadata:
+  name: New 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 key insights, themes, and important information.
+      model:
+        provider: openai
+        name: gpt-4o-mini
+      settings:
+        temperature: 0.7
+        max_retries: 3
+        reasoning_pattern: DIRECT
+    - name: researcher
+      role: Research Specialist
+      job: Research topics and gather comprehensive information using available tools.
+      model:
+        provider: openai
+        name: gpt-4o
+      tools:
+        - web_search
+    - name: summarizer
+      role: Summary Generator
+      job: Create concise, actionable summaries from analysis and content.
+      model:
+        provider: openai
+        name: gpt-4o-mini
+  routers:
+    - name: smart_router
+      type: smart
+      routing_options:
+        researcher: If there is not enough information & deep research needs to be done
+        summarizer: If we have enough information and its time to summarize
+      model:
+        provider: openai
+        name: gpt-4o-mini
+      settings:
+        temperature: 0.3
+        fallback_strategy: first
+  workflow:
+    start: content_analyzer
+    edges:
+      - from: content_analyzer
+        to: [researcher, summarizer]
+        router: smart_router
+      - from: researcher
+        to: [summarizer]
+    end:
+      - summarizer
+"""
+
+
+async def main():
+    """Run the workflow"""
+    print('🚀 Starting Flo AI Workflow...')
+    print('📋 Workflow: Content Analysis with Smart Routing')
+    print('-' * 50)
+
+    try:
+        # Create tools dictionary (required format for AriumBuilder)
+        tools = {'web_search': web_search_tool}
+
+        # Create Arium builder from YAML
+        builder = AriumBuilder.from_yaml(yaml_str=workflow_yaml, tools=tools)
+
+        # Example input for the workflow
+        user_input = [
+            """I need to understand the current trends in artificial intelligence and machine learning. 
+            Specifically, I'm interested in:
+            1. Latest developments in large language models
+            2. Applications in healthcare and finance
+            3. Ethical considerations and regulations
+            
+            Please provide a comprehensive analysis and summary."""
+        ]
+
+        print('📝 Input:')
+        print(user_input[0])
+        print('\n' + '=' * 50)
+        print('🔄 Processing workflow...')
+        print('=' * 50 + '\n')
+
+        # Build and run the workflow
+        result = await builder.build_and_run(user_input)
+
+        print('✅ Workflow Result:')
+        print('-' * 30)
+        if isinstance(result, list):
+            for i, message in enumerate(result):
+                print(f'{i+1}. {message}')
+        else:
+            print(result)
+
+    except Exception as e:
+        print(f'❌ Error running workflow: {str(e)}')
+        print('\n💡 Make sure you have:')
+        print('1. Set your OPENAI_API_KEY environment variable')
+        print('2. Installed flo-ai: pip install flo-ai')
+        print('3. All required dependencies')
+
+
+if __name__ == '__main__':
+    asyncio.run(main())