TaskMind - Multi-Provider AI Agent

TaskMind is a sophisticated AI agent that treats user prompts as tasks to be executed. It provides structured reasoning, supports multiple AI providers (OpenAI, Grok, Copilot), and includes cost tracking and performance monitoring. The project includes both a robust backend API and a professional frontend dashboard.

🚀 Features

Backend

Multi-Provider Support: Seamlessly switch between OpenAI, Grok (xAI), and GitHub Copilot
Structured Reasoning: Three-step reasoning process (Analysis → Planning → Execution)
Cost Tracking: Real-time cost estimation and monitoring
Clean Architecture: Built with SOLID principles and design patterns
RESTful API: Easy integration with any application
Comprehensive Logging: Detailed execution logs and performance metrics
Type Safety: Full TypeScript support with strict typing

Frontend Dashboard

Professional UI/UX: Clean, responsive design with configurable themes
Real-time Task Management: Submit, monitor, and review AI agent tasks
Structured Reasoning Display: View the complete reasoning process with step-by-step breakdown
Provider Configuration: Switch between AI providers and models
Task History: Detailed execution history with cost tracking
Mobile Responsive: Optimized for desktop, tablet, and mobile devices

🏗️ Architecture

Backend Architecture

TaskMind follows clean architecture principles with:

Strategy Pattern: For cost calculation and provider selection
Template Method Pattern: For the reasoning process
Dependency Inversion: Provider-agnostic design
Single Responsibility: Each class has one clear purpose
Open/Closed Principle: Easy to extend with new providers

Frontend Architecture

The frontend follows modern React patterns with:

Component-Based Design: Reusable, modular components
Type Safety: Comprehensive TypeScript interfaces
State Management: React hooks for local state management
API Abstraction: Clean service layer for backend communication
Responsive Design: Mobile-first approach with Tailwind CSS
Error Handling: Comprehensive error states and user feedback

📋 Prerequisites

Node.js 18+
npm or yarn
API keys for your chosen providers

🛠️ Installation

Backend Setup

Clone the repository:

git clone <repository-url>
cd TaskMind

Install dependencies:

npm install

Set up environment variables:

cp env.example .env

Configure your API keys in .env:

# OpenAI (Required for default setup)
OPENAI_API_KEY=your_openai_api_key_here

# Grok (Optional)
GROK_API_KEY=your_grok_api_key_here

# Copilot (Optional)
COPILOT_API_KEY=your_copilot_api_key_here

Start the backend server:

npm run dev

The backend will be available at http://localhost:3000

Frontend Setup

Navigate to the frontend directory:

cd frontend

Install dependencies:

npm install

Start the frontend development server:

npm run dev

The dashboard will be available at http://localhost:3001

🚀 Quick Start

Using the Dashboard (Recommended)

Start both services:

# Terminal 1 - Backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

Open the dashboard: Navigate to http://localhost:3001
Submit your first task: Use the form to submit a prompt and see the AI agent in action

Using the API Directly

# Test OpenAI
curl -X POST http://localhost:3000/agent/task \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Explain quantum computing in simple terms",
    "provider": "openai",
    "model": "gpt-4o-mini"
  }'

📡 API Usage

Submit a Task

Single Request (Recommended)

Send provider, model, and prompt in one request:

# OpenAI
curl -X POST http://localhost:3000/agent/task \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Explain quantum computing in simple terms",
    "provider": "openai",
    "model": "gpt-4o-mini"
  }'

# Grok
curl -X POST http://localhost:3000/agent/task \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "What are the benefits of renewable energy?",
    "provider": "grok",
    "model": "grok-4-latest"
  }'

# Copilot
curl -X POST http://localhost:3000/agent/task \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "How does machine learning work?",
    "provider": "copilot",
    "model": "copilot-chat"
  }'

Switch Providers

curl -X POST http://localhost:3000/agent/provider \
  -H "Content-Type: application/json" \
  -d '{
    "provider": "grok",
    "model": "grok-4-latest"
  }'

Get Configuration

curl http://localhost:3000/agent/config

Get History

curl http://localhost:3000/agent/history

🎨 Dashboard Features

Task Management

Submit Tasks: Easy-to-use form with provider and model selection
Real-time Processing: Live status updates during task execution
Task History: Complete history with detailed reasoning steps
Cost Tracking: Real-time cost estimation and monitoring

Provider Management

Multi-Provider Support: Switch between OpenAI, Grok, and Copilot
Model Selection: Choose from available models for each provider
Status Monitoring: Real-time provider availability status
Configuration Management: Update settings without restart

User Experience

Responsive Design: Works on desktop, tablet, and mobile
Professional UI: Clean, modern interface with configurable themes
Error Handling: User-friendly error messages and recovery options
Loading States: Smooth loading indicators for all operations

🔧 Configuration

Environment Variables

Variable	Description	Default
`DEFAULT_PROVIDER`	Default AI provider	`openai`
`DEFAULT_MODEL`	Default model	`gpt-4o-mini`
`PORT`	Backend server port	`3000`
`LOG_LEVEL`	Logging level	`info`
`NEXT_PUBLIC_API_URL`	Frontend API URL	`http://localhost:3000`

Provider-Specific Configuration

OpenAI

OPENAI_API_KEY=your_key
OPENAI_MODEL=gpt-4o-mini
OPENAI_MAX_TOKENS=4000
OPENAI_TEMPERATURE=0.7

Grok

GROK_API_KEY=your_key
GROK_MODEL=grok-4-latest
GROK_MAX_TOKENS=4000
GROK_TEMPERATURE=0.7
GROK_BASE_URL=https://api.x.ai/v1

Copilot

COPILOT_API_KEY=your_key
COPILOT_MODEL=copilot-chat
COPILOT_MAX_TOKENS=4000
COPILOT_TEMPERATURE=0.7
COPILOT_BASE_URL=https://api.github.com/copilot/v1
COPILOT_ORGANIZATION=your_org
COPILOT_PROJECT=your_project

📊 Cost Tracking

TaskMind automatically tracks costs for all API calls:

{
  "costEstimate": {
    "inputTokens": 150,
    "outputTokens": 300,
    "estimatedCost": 0.000045,
    "currency": "USD",
    "provider": "openai",
    "model": "gpt-4o-mini"
  }
}

🔍 Monitoring

Logs

Application logs: Console output
Agent logs: logs/.agent-log (JSONL format)
Performance metrics: Response times, token usage, costs

Health Check

curl http://localhost:3000/health

📁 Project Structure

TaskMind/
├── src/                      # Backend source code
│   ├── agent.ts             # Core agent logic
│   ├── server.ts            # Express server
│   ├── providers/           # AI provider implementations
│   ├── strategies/          # Design pattern implementations
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
├── frontend/                # Frontend dashboard
│   ├── src/
│   │   ├── app/            # Next.js app directory
│   │   ├── components/     # React components
│   │   ├── lib/           # Utility functions
│   │   ├── services/      # API services
│   │   └── types/         # TypeScript types
│   └── package.json
├── logs/                   # Application logs
├── docs/                   # Documentation
└── tests/                  # Test files

🧪 Testing

Backend Tests

# Test OpenAI integration
npm run test-example

# Test Grok integration
npm run test-grok

# Test single request functionality
npm run test-single

Frontend Testing

The frontend includes comprehensive error handling and user feedback:

Connection Status: Real-time backend connectivity monitoring
Error States: User-friendly error messages and recovery options
Loading States: Smooth loading indicators for all async operations
Form Validation: Client-side validation with helpful error messages

🔄 Roadmap & TODO

🗄️ Phase 1: Database Integration

MongoDB Integration
- Set up MongoDB connection with Mongoose
- Create data models for TaskExecution, User, Session
- Implement persistent storage for task history
- Add data migration scripts
- Implement backup and restore functionality
- Add data indexing for performance optimization

🤖 Phase 2: ChatGPT Expert System (GPTS-like)

🐳 Phase 3: Docker & Deployment

🚀 Phase 4: Advanced Features

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Start for Contributors

Fork the repository

Clone your fork

git clone https://github.com/your-username/TaskMind.git
cd TaskMind

Install dependencies

# Backend
npm install

# Frontend
cd frontend
npm install

Set up environment

cp env.example .env
# Add your API keys to .env

Start development servers

# Terminal 1 - Backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

Create a feature branch

git checkout -b feature/your-feature-name

Submit a pull request

Development Guidelines

Follow our Code Style Guide
Write tests for new features
Update documentation
Use conventional commit messages
Ensure all tests pass before submitting

Need Help?

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Personal Branding

This project demonstrates professional software engineering practices, with focus on clean architecture, modern technologies, and developer-friendly tooling — reinforcing my personal brand as a software engineer.

What This Project Showcases

Full-Stack Development: Complete backend API and frontend dashboard
Clean Architecture: Well-structured, maintainable codebase
Modern Technologies: Latest React, Next.js, TypeScript, and Node.js
Professional UI/UX: Polished, responsive design
Developer Experience: Excellent tooling and documentation
Scalability: Modular design for easy extension
Best Practices: Type safety, error handling, and testing

👨‍💻 Author

Ali Salem - admin@alisalem.me