terminalgravity/crewai-visualizer

Interactive user interface for CrewAI package.

CrewAI Simplified App

This application provides a simplified user interface for leveraging the power of CrewAI, a cutting-edge framework for orchestrating role-playing autonomous AI agents. With this app, users can streamline the process of creating and managing AI crews without the need for coding.

Features

• Intuitive UI: The app offers a user-friendly interface, allowing users to easily create and manage AI crews.
• Role-Based Agent Design: Customize agents with specific roles, goals, and tools through a simple form-based approach.
• Task Management: Define tasks and assign them to agents dynamically.
• Sequential and Hierarchical Processes: Choose between sequential or hierarchical processes for task execution, depending on your workflow needs.
• Save Output: Save the output for future reference or analysis.
• Connection to LLM model: for this version I used Gemini model and I plan to add more models in the future.

Getting Started

To get started with the CrewAI Simplified App, follow these simple steps:

1. Installation: Clone the repository and install dependencies using npm or yarn:

   git clone https://github.com/Eng-Elias/CrewAI-Visualizer.git
   cd CrewAI-Visualizer
   npm install

2. Create Python Virtual Enviroment: create Python venv, activate the venv and install the requirements.

   Create venv:

   python -m venv venv

   To activate the virtual environment on Windows:

   .\venv\Scripts\activate

   To activate the virtual environment on Linux or Mac:

   source venv/bin/activate

   Install the requirements:

   pip install -r requirements.txt

3. Configuration: Set up your environment variables in a .env file:

   Just rename .env.template to .env and set your values:

   DATABASE_URL="postgresql://postgres:postgres@localhost:5432/         crew_ai_visualizer?schema=public"
   
   GEMINI_API_KEY=""
   
   PYTHON_SITE_PACKAGES="<The  path of site packages folder in the venv you created in the previous step>"
   
   CREW_AI_PY_FILE="<the path of my crew_ai.py file in on your system. you can find it in src/app/api/graphql/crew_ai.py>"
   

4. Start the Development Server: Run the following command to start the development server:

   npm run dev

5. Access the App: Once the development server is running, access the app in your browser at http://localhost:3000.

Usage

1. Create a New Crew: By adding agents.

2. Customize Agents: Fill in the information for each agent, including role, goal, backstory, tools, allow_deligation, and verbose.

3. Define Missions: Fill mission information including name, crew, verbose, process and add tasks with their details (name, description, agent).

4. Execute Mission: Once your mission is set up, execute it to start the execution process.

5. View Results: View the output of completed missions within the app.

Contributing

We welcome contributions to the CrewAI Simplified App. If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or improvement.
3. Add your feature or improvement.
4. Submit a pull request.

Tech Stack

This app is built using TypeScript, Prisma, GraphQL, Next.js, and node-calls-python to execute Python code from Node.js and get the result in addition to use Gemini as LLM.

License

This application is open-source and is released under the MIT License. See the LICENSE file for details.

To Do

• Add more tools for agents either from LangChain community or create new useful tools.
• Add more LLM options like ChatGPT and local LLMs.

Credits

Special thanks to João Moura the creator of CrewAI for providing the underlying framework for AI crew orchestration.

Support

If you find CrewAI Visualizer helpful and would like to support its development, consider buying me a coffee! Your support will allow me to dedicate more time to enhancing and adding new features to CrewAI Visualizer.

https://www.buymeacoffee.com/eng_elias