🚀 OpenCrewStudio | Visual Agent Sandbox for CrewAI

OpenCrewStudio is a premium, local-first visual playground designed to compose, simulate, and export multi-agent crews for the CrewAI framework. It bridges the gap between low-code visual builder designs and production-grade python development.

Built with React 19, TypeScript, TailwindCSS v4, and Vite, the application integrates a background process manager that automatically compiles visual designs into python projects and executes them locally in a dedicated virtual environment.

🎨 Key Features & Capabilities

1. 📂 Pre-configured Blueprints

Kickstart agent orchestrations with professional, industry-oriented templates:

• SEO Content Writer Crew: A two-agent sequential crew designed to research topics and write professional technical drafts in markdown.
• LinkedIn Post Creator Crew: A three-agent crew that researches trends, drafts scroll-stopping posts, and localized them using TranslateGemma.
• Local Privacy Software Engineering Factory: Design, code, and verify software systems locally using a 3-agent offline crew (using Ollama).
• BIST Stock Analyst Crew: A Turkish-localized crew that queries DuckDuckGo search and Yahoo Finance dynamically to analyze stock tickers (e.g. THYAO.IS, ASELS.IS) and issues SPK-compliant investment advisories.
• Autonomous SaaS Startup Factory: A 5-agent hierarchical crew mapping a CEO, CTO, Tech Lead, and Developers delegating code tasks.

2. 🗺️ Interactive Visual Canvas

A drag-and-drop orchestration sandbox powered by Framer Motion:

• Lay out agent nodes and task nodes on a grid.
• Visually organize components into logical workspaces using Custom Canvas Groupings.
• Link tasks to performing agents and map execution sequences (e.g. task dependencies, sequential vs. hierarchical processes).

3. 👥 Agent & Task Studios

• Agent Studio: Define agent roles, goals, backstories, and select models across 9+ providers. Set LLM temperature, verbosity, memory, and tool bindings.
• Task Studio: Configure task descriptions, expected outputs, performing agents, asynchronous execution, and task context dependencies (defining task order).

4. 🛠️ Custom Python Tool Studio

Write custom python functions directly in the editor. These functions are automatically exported as @tool annotated code blocks inside the output python project and imported into the execution environment.

5. ⚡ Live Run Console (Local execution)

Execute crews directly from the browser:

• Dynamic creation of a localized execution folder (temp_run).
• Auto-provisioning of a Python Virtual Environment (.venv) using the highest available system python executable (compatible with Python 3.10 through 3.13).
• Auto-synchronization of package dependencies via requirements.txt based on the tools selected (e.g. yfinance, duckduckgo-search, crewai-tools, beautifulsoup4).
• Real-time event streaming (Server-Sent Events) of stdout and stderr execution logs directly to the browser console.
• Interactive prompt input binding at runtime.

6. 💬 Agent Playground (Ollama Chat)

Chat with individual agents or custom models using your local Ollama instance. The playground automatically identifies tickers in user queries to fetch real-time Yahoo Finance data or runs queries on DuckDuckGo search before feeding the request to the agent, creating a powerful local assistant playground.

7. 📤 Production Code Exporter

Export the workspace as a production-ready python package including:

• crew.py: Class definition using the @CrewBase framework.
• main.py: Runner script with input parameters.
• config/agents.yaml & config/tasks.yaml: Clean YAML configurations.
• requirements.txt: Package dependency manifest.
• .env: API keys and configurations.
• All packaged cleanly into a single .zip file.

⚙️ Architecture & Technical Stack

graph TD
    UI[React Web UI] -->|REST API / SSE| DevServer[Vite Dev Server + Runner Plugin]
    DevServer -->|Generate Workspace| TempRun[temp_run/ Folder]
    TempRun -->|Create| Venv[.venv / Virtual Env]
    TempRun -->|Sync Requirements| Pip[pip install]
    TempRun -->|Write Scripts| PyFiles[crew.py, main.py, YAML configs]
    DevServer -->|Spawn Process| PythonRunner[python src/main.py]
    PythonRunner -->|Stream Logs| DevServer
    DevServer -->|Server-Sent Events| UI
    UI -->|API Requests| Ollama[Local Ollama API /tags /chat]

Technical Specs:

• Frontend Framework: React 19 (Functional components, Hooks, Context, LocalStorage state synchronization)
• Language: TypeScript
• Styles: Vanilla CSS with TailwindCSS v4
• Vite Dev Server Plugin: Spawns subprocesses, proxies local/remote API calls, manages the python environment lifecycle, and communicates with the frontend via Server-Sent Events (SSE).
• Virtual Workspace: Dynamic file writing inside vite-runner.ts to manage the python execution backend.

🚀 Getting Started

Prerequisites

Make sure you have the following installed on your local machine:

1. Node.js (v18 or higher)
2. Python (v3.10 to v3.13)
3. (Optional) Ollama running locally on port 11434 for local offline models.

Installation

1. Clone the repository and navigate into the folder:

   git clone <repository-url>
   cd opencrewstudio
   

2. Install the node packages:

   npm install
   

3. Launch the development server (which spins up the React frontend and the Vite runner plugin):

   npm run dev
   

4. Open your browser and navigate to http://localhost:5173 (or the port specified in terminal).

🔧 LLM Provider Integration

Configure settings in the Provider Settings panel to connect to your models:

• OpenAI: Set API Key and model (default: gpt-4o-mini).
• Anthropic: Set API Key and model (default: claude-3-5-sonnet).
• Google Gemini: Set API Key and model (default: gemini-2.5-flash).
• Ollama: Configure your Ollama instance base URL (default: http://localhost:11434). The dashboard will automatically fetch your local models lists.
• DeepSeek, Groq, Grok (xAI), LM Studio, and AWS Bedrock are fully supported and customizable.
• Serper API Key: Required for high-fidelity Google searches via the SerperDevTool.

📂 Project Structure

├── comfy.api.json          # Workflow configuration settings
├── index.html              # HTML markup template
├── package.json            # React/Vite project configuration
├── vite.config.ts          # Vite configuration embedding the runner plugin
├── vite-runner.ts          # Vite Dev Server plugin: Python project setup & SSE execution proxy
├── src/
│   ├── main.tsx            # App bootstrapping entry point
│   ├── App.tsx             # Main layout, tab navigation, and global state management
│   ├── App.css             # Main styling configurations
│   ├── index.css           # Global CSS and TailwindCSS directives
│   ├── components/         # Frontend modular components
│   │   ├── Sidebar.tsx            # App sidebar navigation
│   │   ├── LandingView.tsx        # Getting started dashboard
│   │   ├── TemplatesView.tsx      # Pre-configured workspace blueprints
│   │   ├── VisualCanvas.tsx       # Drag-and-drop Framer Motion grid builder
│   │   ├── AgentStudio.tsx        # Agent creation & management panel
│   │   ├── TaskStudio.tsx         # Task creation & management panel
│   │   ├── ToolStudio.tsx         # Custom python tool designer
│   │   ├── RunConsole.tsx         # Real-time console logs & pipeline stats
│   │   ├── CodeExporter.tsx       # Preview and package ZIP exporter
│   │   └── ProviderSettings.tsx   # LLM Keys & Endpoints configuration panel
│   ├── types/
│   │   └── studio.ts              # TypeScript definitions for Agents, Tasks, Crews, and Logs
│   └── utils/
│       └── defaults.ts            # Default templates, model lists, and initial workspace values
└── temp_run/               # Git-ignored local python execution directory (automatically generated)

🛡️ License

This project is open-source and available under the Apache 2.0 License.