CrewAI React Frontend

A modern React-based web application to interact with CrewAI Enterprise (AMP) crews via REST API, featuring a chat interface and crew execution capabilities for the Bellcorp POC crew.

Features

• 🤖 Interactive Chat Interface - Real-time communication with CrewAI agents
• 🚀 Crew Execution - Dynamic form generation and crew kickoff
• 📊 Status Monitoring - Real-time execution status and progress tracking
• 🎨 Modern UI - Clean, enterprise-grade design with Tailwind CSS
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile

Tech Stack

• React 18+ - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Query - Data fetching and state management
• Lucide React - Beautiful icon library
• React Toastify - Toast notifications

Prerequisites

• Node.js 18+ and npm
• CrewAI Enterprise API credentials (base URL and bearer token)

Installation

1. Clone the repository (or navigate to the project directory)

2. Install dependencies:

   npm install

3. Configure environment variables:

   Create a .env file in the root directory:

   VITE_CREWAI_BASE_URL=https://your-bellcorp-crew.crewai.com
   VITE_CREWAI_BEARER_TOKEN=your_bearer_token_here

   Replace with your actual CrewAI Enterprise API credentials.

Development

Start the development server:

npm run dev

The application will be available at http://localhost:5173

Building for Production

Build the application:

npm run build

Preview the production build:

npm run preview

Project Structure

src/
├── components/
│   ├── ChatInterface/      # Chat interface component
│   ├── CrewRunner/          # Crew execution form
│   ├── StatusMonitor/       # Status monitoring
│   └── shared/              # Shared UI components
├── services/
│   └── crewai-api.js       # API service layer
├── hooks/
│   ├── useCrewExecution.js  # Crew execution hook
│   └── useStatusPolling.js  # Status polling hook
├── contexts/
│   └── CrewContext.jsx      # Global state context
├── utils/
│   └── config.js           # Configuration utilities
├── App.jsx                 # Main app component
├── main.jsx                # Entry point
└── index.css               # Global styles

Usage

1. Configure Environment: Set up your .env file with CrewAI API credentials

2. Run the App: Start the development server

3. Execute a Crew:

   • Fill in the required inputs in the Crew Runner form
   • Click "Run Crew" to start execution
   • Monitor progress in the Status Monitor
   • View results in the Chat Interface

4. Monitor Execution:

   • Real-time status updates via polling
   • Execution logs and traces
   • JSON result output with copy functionality

API Integration

The application integrates with CrewAI Enterprise REST API:

• GET /inputs - Fetch crew input schema
• POST /kickoff - Start crew execution
• GET /{kickoff_id}/status - Get execution status
• POST /resume - Resume crew execution (if needed)

Customization

Colors

The color palette can be customized in tailwind.config.js:

colors: {
  primary: '#3B82F6',
  'poc-green': '#10B981',
  'prod-purple': '#8B5CF6',
  // ... more colors
}

Polling Interval

Adjust the status polling interval in src/hooks/useStatusPolling.js (default: 3 seconds)

Troubleshooting

Environment variables not loading:

• Make sure your .env file is in the root directory
• Restart the dev server after changing environment variables
• Variables must start with VITE_ prefix

API connection issues:

• Verify your bearer token is correct
• Check that the base URL is accessible
• Look for CORS issues in the browser console

Build errors:

• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Clear build cache: rm -rf dist

License

MIT

Support

For issues and questions, please refer to the CrewAI Enterprise documentation or contact support.