multi-agent

CrewAI-Visualizer

Name: CrewAI-Visualizer
Author: Eng-Elias

Interactive user interface for CrewAI package.

398 stars96 forksTypeScriptUpdated 4/11/2025100% free · open source

What it does

CrewAI-Visualizer provides an interactive user interface for the CrewAI package, allowing users to visualize and interact with multi-agent systems.

When to use it

•When you need to visualize the behavior of multiple agents in a system
•When you want to debug and understand the interactions between agents
•When you need to demonstrate the capabilities of your multi-agent system to stakeholders

Ready-to-paste prompt

Open 'http://localhost:3000' and navigate to the 'Simulation' tab to visualize a predefined scenario, such as a 'Simple Pursuit' scenario

Heads up: Make sure you have Node.js (14 or later) and npm installed on your system before attempting to install and run CrewAI-Visualizer

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/crewai-visualizer && curl -fsSL https://workflowstacks.com/api/skills/crewai-visualizer/claude-skill -o ~/.claude/skills/crewai-visualizer/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How CrewAI-Visualizer works

Codeflow

Free to inspect

CrewAI-Visualizer is a medium TypeScript project (~3.1k lines across 42 code files). Expect some technical setup — comfortable with a terminal, or ask a developer. Last commit 17 months ago, MIT license, no tests found.

Size

Medium codebase

~3.1k lines · 42 code files · 26 min skim

Setup

Some technical setup

Comfortable with a terminal? 20–40 min. Otherwise ask a dev.

Runs on

Node.js

Needs API keys (.env)

TypeScript 91%JavaScript 4%Python 2%CSS 1%Batchfile 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
.env.template
The API keys and settings you must provide
4
src/app/layout.tsx
Inside src/ — the main logic begins here

What's in each folder

src/Core code — the actual logic36 files

prisma/Folder6 files

public/Images & static assets4 files

READMENo tests foundThin docsNo CIMIT licenseLast update 17 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/crewai-visualizer && curl -fsSL https://workflowstacks.com/api/skills/crewai-visualizer/claude-skill -o ~/.claude/skills/crewai-visualizer/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

Eng-Elias

Language

TypeScript