Introducing My Independent Project: CrewAI Visual Editor

General
1

Hello CrewAI Community,

I’m thrilled to share with you my latest independent project, the CrewAI Visual Editor. This tool is designed to simplify the process of creating and managing CrewAI crews through a visual, node-based interface. Whether you’re a developer or just exploring CrewAI, this editor aims to make your experience more intuitive and efficient.

Here’s a link:
https://glenwrhodes.github.io/crew_editor/

Key Features:

  • Drag-and-Drop Interface: Easily create and connect nodes to build your crew structure.
  • Real-Time Visualization: Watch your crew setup come to life as you build it.
  • YAML and Python Export: Seamlessly export your configurations for further development or deployment.
  • Built with Modern Technologies: Utilizing React, TypeScript, and Vite for a smooth and responsive experience.

Getting Started:

  1. Clone the Repository: Access the latest version from my GitHub repository.
  2. Install Dependencies: Use npm or yarn to install the necessary packages.
  3. Run the Development Server: Start building your crew with the easy-to-use interface.

How It Works:

  • Begin with a Node: Start by placing a Begin Node on the canvas.
  • Add Tasks and Agents: Drag Task and Agent Nodes onto the canvas and connect them to define your crew’s workflow.
  • Configure Node Properties: Fill in the details for each node to customize your crew’s behavior.
  • Export Your Setup: Use the export functionality to generate YAML and Python scripts for your crew.

Join the Discussion:

I would love to hear your feedback and see how you’re using the CrewAI Visual Editor in your projects. Please feel free to share your experiences, suggestions, and any questions you might have here on the forums.

Thank you for your interest in my project. I look forward to seeing the amazing crews you create with the CrewAI Visual Editor!

Feel free to contribute to this project:
https://github.com/glenwrhodes/crew_editor

Best regards,
Glen

4 Likes
2

Hi Glen,

It’s nice project to me. Is it able to make hierarchical process as well?
it looks some feature is not controlled. are you planning to upgrade more ?

Thanks,
KHAN

3

Yes, this is something I plan on adding!

2 Likes
4

Major Update: The CrewAI Visual Editor has been completely overhauled

Hey everyone – big update to the visual editor at CrewAI Visual Editor

Since the original post, the editor has been rebuilt from the ground up. Here’s what’s new:

Redesigned Node System

  • Compact, color-coded nodes (amber for agents, teal for tasks, green for start) instead of bulky form-in-node cards

  • Dedicated Properties Panel on the right side for editing – select any node and edit all its fields without cluttering the canvas

Full CrewAI Feature Support

  • 50+ built-in tools from the complete crewai_tools catalog (Firecrawl, Selenium, NL2SQL, vector DBs, S3, MCP adapters, and more)

  • Custom tool definitions – define your own Python tools or MCP Server tools in Crew Settings, and they appear in the agent tool picker alongside built-ins

  • LLM selection with 60+ models across OpenAI (GPT-4.1/5.x, o3/o4), Anthropic (Claude 3.7, Sonnet/Opus 4-4.6), Google Gemini (2.5/3), xAI Grok (3/4), Mistral, Groq, and OpenRouter

  • Crew Settings – process type (sequential/hierarchical), memory, cache, planning with planner LLM, manager LLM for hierarchical

  • Crew Input Variables – define {topic}, {company}, etc. that get interpolated into agent/task configs at runtime via crew.kickoff(inputs={…})

4 Ready-to-Use Templates

  • Research & Analysis Team

  • Content Production Pipeline

  • Marketing Campaign Team

  • Software Development Team

Each comes with fully configured agents (personalities, backstories, tools, LLMs) and task chains with proper {placeholder} variables.

Editor UX

  • Undo/Redo (Ctrl+Z/Y)

  • Node duplication (Ctrl+D)

  • Save/Load with proper modals (no more browser alerts)

  • Tabbed YAML + Python export with copy and download buttons

  • MiniMap for navigating large crews

  • Keyboard shortcuts throughout

  • Welcome screen with template quick-start when canvas is empty

Export generates production-ready code – agents.yaml, tasks.yaml, and crew.py with proper tool imports, MCP adapter setup, and a commented kickoff example showing how to pass your input variables.

Still fully open source, no backend, runs entirely in the browser: GitHub - glenwrhodes/crew_editor

Would love feedback on what else would be useful!

1 Like
5

@Glen_Rhodes How is it different from CrewAI AMP? Is not it doing the same thing?

6

Thank you for supporing the communty. What type of feedback would you like?

7

General feedback, usability, if it’s helping people, any feature requests. It’s also open source so feel free to do PR’s. Thanks for your response!