https://github.com/nxdun/ai-agents-dashboard
this dashboard is for managing AI agents and workflow
https://github.com/nxdun/ai-agents-dashboard
Last synced: 3 months ago
JSON representation
this dashboard is for managing AI agents and workflow
- Host: GitHub
- URL: https://github.com/nxdun/ai-agents-dashboard
- Owner: nxdun
- License: mit
- Created: 2025-03-13T14:41:22.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-13T15:21:44.000Z (3 months ago)
- Last Synced: 2025-03-13T16:28:04.671Z (3 months ago)
- Language: JavaScript
- Size: 912 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Modern, intelligent multi-agent system monitoring & management
[](https://reactjs.org/)
[](https://tailwindcss.com/)
[](LICENSE)
## 🔍 Overview
AgentFlow Dashboard provides a sophisticated interface for monitoring and managing AI agents and workflows in a multi-agent system. Built with React and TailwindCSS, it offers a responsive, feature-rich experience with real-time monitoring capabilities.
## 🖼️ Screenshots
| Light Mode | Dark Mode |
|------------|-----------|
|  |  |
## 🚀 Key Features
- **Intuitive Dashboard** — Comprehensive overview of your AI ecosystem
- **Workflow Management** — Create, monitor, and manage complex agent workflows
- **Real-time Monitoring** — Live tracking of agent activities and system health
- **Model Integration** — Connect and test different language models
- **Health Monitoring** — System-wide health metrics and component status
- **Dark/Light Mode** — Fully customizable interface with theme support
- **Responsive Design** — Optimized for desktop and mobile devices
## ⚙️ Quick Setup
```bash
# Clone the repository
git clone https://github.com/nxdun/ai-agents-dashboard
# Navigate to project directory
cd ai-agents-dashboard
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your API endpoint
# Start development server
npm run dev
# Build for production
npm run build
```
## 🏗️ Architecture
Project Structure
```
src/
├── components/ # Reusable UI components
│ ├── CreateWorkflowModal.jsx
│ ├── ModelTestModal.jsx
│ ├── NavBar.jsx
│ ├── RealtimeMonitor.jsx
│ ├── Sidebar.jsx
│ └── ...
├── context/ # React context providers
│ └── DarkModeContext.jsx
├── pages/ # Application views
│ ├── Activities.jsx
│ ├── Agents.jsx
│ ├── Dashboard.jsx
│ ├── Health.jsx
│ ├── Models.jsx
│ └── Workflows.jsx
├── services/ # API integration
├── utils/ # Helper functions
├── App.jsx # Main component
└── main.jsx # Entry point
```
Technology Stack
- **Frontend Framework:** React 19
- **Routing:** React Router 7
- **Styling:** TailwindCSS
- **Icons:** Lucide React
- **HTTP Client:** Axios
- **Build Tool:** Vite
## 🎨 Customization
### Theming
The dashboard uses TailwindCSS for styling with a custom color palette. Modify tailwind.config.js to customize:
```js
// tailwind.config.js
export default {
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': {
// Your custom color palette
500: '#6366f1',
600: '#4f46e5',
// ...
},
// ...
}
}
}
}
```
### Adding New Pages
1. Create a new page component in `src/pages/`
2. Add the route in App.jsx
3. Add a navigation item in Sidebar.jsx
## 🔌 API Integration
Configure your API endpoint in the `.env` file:
```
REACT_APP_API_BASE_URL=http://localhost:8000/api
REACT_APP_ENABLE_MOCK_DATA=false
REACT_APP_ENABLE_ANALYTICS=true
REACT_APP_DEFAULT_THEME=system
```
## 📊 Main Dashboard Features
- **Status Cards** — Quick overview of agents, models, workflows, and activities
- **Recent Workflows** — Monitor and access recently executed workflows
- **System Health** — Real-time health metrics including uptime and response times
- **Component Status** — Individual service status with health indicators
## 📱 Responsive Design
AgentFlow Dashboard is fully responsive:
- **Desktop** — Full-featured experience with sidebar navigation
- **Tablet** — Optimized layout with collapsible sidebar
- **Mobile** — Touch-friendly interface with mobile navigation
## 🧩 Core Components
- **Workflow Creation** — Step-by-step workflow builder with validation
- **Real-time Monitor** — Live activity logs and progress tracking
- **Model Testing** — Interactive testing interface for language models
- **Health Dashboard** — Comprehensive system status monitoring
## 📄 License
MIT License
---
Made with ❤️ by the AgentFlow (@nxdun)