Drag.ai MCP Chatbbot
AI-MCP Orchestratorβ β ChatGPT-style Agentic System integrating LangChain, LangGraph, FastMCP, and Google MCP SDK, with 10 MCP tools, toggleable UI, persistent memory, and reactive visuals.
Ask AI about Drag.ai MCP Chatbbot
Powered by Claude Β· Grounded in docs
I know everything about Drag.ai MCP Chatbbot. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
π€ AI-MCP Orchestrator
Next-Generation Agentic AI System with 17+ MCP Tools
A production-ready ChatGPT-style system integrating LangChain, LangGraph, FastMCP, and Google Gemini 2.0 Flash with 17+ powerful MCP tools, intelligent routing, persistent memory, and a beautiful reactive UI.
Features β’ Architecture β’ Installation β’ Usage β’ API Docs
π Table of Contents
- Overview
- Key Features
- System Architecture
- MCP Tools
- Technology Stack
- Installation
- Configuration
- Usage Guide
- API Documentation
- Project Structure
- Development
- Troubleshooting
- Contributing
- License
π Overview
AI-MCP Orchestrator is a sophisticated agentic AI system that combines the power of Google's Gemini 2.0 Flash model with an extensive suite of Model Context Protocol (MCP) tools. Built on LangChain and LangGraph, it provides intelligent tool routing, multi-step reasoning, and seamless integration with external services.
What Makes It Special?
- π― 17+ MCP Tools - From web search to system monitoring, weather to translation
- π§ Intelligent Routing - Automatically selects the right tools for each query
- π LangGraph Pipeline - Multi-agent orchestration with state management
- πΎ Persistent Memory - Conversation history and context retention
- π¨ Beautiful UI - Modern, responsive interface with real-time updates
- β‘ Real-time WebSocket - Streaming responses and live tool execution
- π§ Toggleable Tools - Enable/disable tools on-the-fly
- π Analytics Dashboard - Monitor system performance and tool usage
β¨ Features
π€ AI Capabilities
- Multi-turn Conversations with context awareness
- Tool Chaining - Combine multiple tools in a single query
- Intelligent Fallbacks - Graceful degradation when tools fail
- Streaming Responses - Real-time token-by-token output
- Memory Management - Short-term and long-term context
π οΈ MCP Tools Suite
- Web Search - DuckDuckGo integration
- File Management - Read, write, organize files
- Database Operations - MongoDB CRUD operations
- Email Automation - Send and manage emails
- Google Drive - Cloud storage integration
- Workflow Automation - Schedule and execute tasks
- Knowledge Base - Store and retrieve information
- Analytics - Data analysis and visualization
- API Integration - Connect to external APIs
- Weather/Climate - Real-time weather data
- Wikipedia - Encyclopedia search and retrieval
- Python Execution - Safe code execution sandbox
- Screen Monitoring - Screenshots and display info
- System Monitoring - CPU, memory, disk metrics
- Calculator - Math operations and unit conversion
- Translator - Multi-language translation
π¨ User Interface
- ChatGPT-style Interface - Familiar and intuitive
- Tool Status Cards - Visual tool management
- Animated Particles - Dynamic background effects
- Dark Theme - Eye-friendly design
- Responsive Layout - Works on all devices
- Message History - Scroll through past conversations
- Typing Indicators - Real-time feedback
ποΈ Architecture
High-Level System Design
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β FRONTEND (React) β
β ββββββββββββββββ ββββββββββββββββ ββββββββββββββββ β
β β Chat UI β β Tool Panel β β Analytics β β
β ββββββββ¬ββββββββ ββββββββ¬ββββββββ ββββββββ¬ββββββββ β
β β β β β
β ββββββββββββββββββββ΄βββββββββββββββββββ β
β β β
β WebSocket / REST API β
ββββββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββββββββββ
β BACKEND (FastAPI) β
β ββββββββββββββββββββββββββββ΄βββββββββββββββββββββββββββ β
β β API Layer (Routes) β β
β β β’ Chat Routes β’ MCP Routes β’ Memory Routes β β
β ββββββββββββββββββββββββ¬βββββββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββ΄βββββββββββββββββββββββββββββββ β
β β LangGraph Orchestration Pipeline β β
β β ββββββββββββ ββββββββββββ ββββββββββββ β β
β β β Router ββ β Executor ββ β Aggregatorβ β β
β β ββββββββββββ ββββββββββββ ββββββββββββ β β
β ββββββββββββββββββββββββ¬βββββββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββ΄βββββββββββββββββββββββββββββββ β
β β Tool Registry (17 Tools) β β
β β ββββββββββ ββββββββββ ββββββββββ ββββββββββ β β
β β βWeb Srchβ βFile Mgrβ βDatabaseβ β Email β ... β β
β β ββββββββββ ββββββββββ ββββββββββ ββββββββββ β β
β ββββββββββββββββββββββββ¬βββββββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββ΄βββββββββββββββββββββββββββββββ β
β β Services & Integrations β β
β β β’ Database Service (MongoDB) β β
β β β’ Gemini AI Service (Google) β β
β β β’ Memory Service (Context Management) β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββββββββββ
β EXTERNAL SERVICES β
β ββββββββββββ ββββββββββββ ββββββββββββ ββββββββββββ β
β β Gemini β β MongoDB β β Google β β APIs β β
β β 2.0 Flashβ β β β Drive β β β β
β ββββββββββββ ββββββββββββ ββββββββββββ ββββββββββββ β
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
LangGraph Pipeline Flow
User Query
β
βββββββββββββββββ
β Query Router β β Analyzes query and selects appropriate tools
βββββββββ¬ββββββββ
β
βββββββββββββββββ
β Tool Executor β β Executes selected MCP tools in parallel/sequence
βββββββββ¬ββββββββ
β
βββββββββββββββββ
β Aggregator β β Combines results from multiple tools
βββββββββ¬ββββββββ
β
βββββββββββββββββ
β Response Gen β β Generates natural language response
βββββββββ¬ββββββββ
β
User Response
Data Flow Architecture
ββββββββββββββββ
β User Input β
ββββββββ¬ββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 1. WebSocket Connection Established β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 2. Query Preprocessing β
β β’ Tokenization β
β β’ Context Injection β
β β’ Memory Retrieval β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 3. Tool Selection (Router) β
β β’ Keyword Matching β
β β’ Semantic Analysis β
β β’ Multi-tool Detection β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 4. Tool Execution β
β β’ Parallel Execution β
β β’ Error Handling β
β β’ Result Caching β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 5. Response Generation β
β β’ Result Aggregation β
β β’ Gemini 2.0 Processing β
β β’ Streaming Output β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββββββββββββ
β 6. Memory Update β
β β’ Conversation Storage β
β β’ Context Update β
ββββββββ¬ββββββββββββββββββββββββββββββββ
β
ββββββββββββββββ
β User Responseβ
ββββββββββββββββ
π§° MCP Tools (17)
1. Web Search π
- Provider: DuckDuckGo
- Actions: Search web, get snippets, extract URLs
- Use Cases: Research, fact-checking, current events
2. File Manager π
- Actions: Read, write, delete, list files
- Supported: Text, JSON, CSV, Markdown
- Use Cases: Document management, data processing
3. Database ποΈ
- Provider: MongoDB
- Actions: CRUD operations, queries, aggregations
- Use Cases: Data storage, retrieval, analytics
4. Email π§
- Protocol: SMTP
- Actions: Send emails, attachments, templates
- Use Cases: Notifications, reports, communication
5. Google Drive βοΈ
- Actions: Upload, download, share, organize
- Use Cases: Cloud storage, collaboration
6. Automation β‘
- Actions: Schedule tasks, workflows, triggers
- Use Cases: Recurring tasks, batch processing
7. Memory π§
- Actions: Store, recall, search context
- Use Cases: Conversation history, user preferences
8. Analytics π
- Actions: Data analysis, visualization, trends
- Use Cases: Business intelligence, reporting
9. Knowledge Base π
- Actions: Store articles, search, categorize
- Use Cases: Documentation, wiki, FAQs
10. API Integration π
- Actions: REST calls, webhooks, OAuth
- Use Cases: Third-party integrations
11. Climate/Weather π€οΈ
- Provider: Python Weather API
- Actions: Current weather, forecasts, climate data
- Use Cases: Travel planning, weather alerts
12. Wikipedia π
- Actions: Search, summaries, full articles
- Use Cases: Research, definitions, learning
13. Python Code π»
- Actions: Execute code, validate syntax, analyze
- Use Cases: Calculations, data processing, automation
14. Screen Monitor π₯οΈ
- Actions: Screenshots, display info, resolution
- Use Cases: Documentation, troubleshooting
15. System Monitor π
- Actions: CPU, memory, disk, network stats
- Use Cases: Performance monitoring, diagnostics
16. Calculator π’
- Actions: Math operations, unit conversions
- Use Cases: Calculations, conversions, equations
17. Translator π
- Actions: Translate text, detect language
- Supported: 12+ languages
- Use Cases: Multilingual communication
π§ Technology Stack
Backend
- Framework: FastAPI 0.120.0
- AI/ML:
- Google Gemini 2.0 Flash
- LangChain (latest)
- LangGraph (latest)
- Database: MongoDB (Motor async driver)
- WebSocket: FastAPI WebSockets
- Validation: Pydantic v2
Frontend
- Framework: React 18
- Build Tool: Vite
- Styling: TailwindCSS
- Animations: Framer Motion
- Icons: Lucide React
- HTTP Client: Axios
DevOps
- Environment: Python 3.13+
- Package Manager: pip, npm
- Process Manager: Uvicorn
- Logging: Python logging with colors
π¦ Installation
Prerequisites
- Python 3.13+
- Node.js 18+
- MongoDB (local or cloud)
- Git
Step 1: Clone Repository
git clone https://github.com/yourusername/ai-mcp-orchestrator.git
cd ai-mcp-orchestrator
Step 2: Backend Setup
cd backend
# Create virtual environment
python -m venv venv
# Activate virtual environment
# Windows:
venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate
# Install dependencies
pip install -r requirements.txt
Step 3: Frontend Setup
cd frontend
# Install dependencies
npm install
Step 4: Environment Configuration
Create .env file in backend/ directory:
# API Keys
GEMINI_API_KEY=your_gemini_api_key_here
OPENAI_API_KEY=
# Model Configuration
GEMINI_MODEL=gemini-2.0-flash-exp
TEMPERATURE=0.7
MAX_TOKENS=8192
# Database
MONGODB_URL=mongodb://localhost:27017
DATABASE_NAME=ai_mcp_orchestrator
# Server
HOST=0.0.0.0
PORT=8000
DEBUG=True
# CORS (comma-separated)
CORS_ORIGINS=http://localhost:3000,http://localhost:5173
# MCP Configuration
MCP_TIMEOUT=30
MAX_CONCURRENT_TOOLS=5
Step 5: Start MongoDB
# Windows (if installed as service)
net start MongoDB
# Linux/Mac
sudo systemctl start mongod
# Or use MongoDB Atlas (cloud)
π Usage Guide
Starting the Application
Option 1: Manual Start
Terminal 1 - Backend:
cd backend
python main.py
Terminal 2 - Frontend:
cd frontend
npm run dev
Option 2: Using Start Scripts
Windows:
start.bat
Linux/Mac:
chmod +x start.sh
./start.sh
Accessing the Application
- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- API Docs: http://localhost:8000/docs
- Health Check: http://localhost:8000/health
Using the Chat Interface
- Open http://localhost:3000
- Enable Tools - Click "MCP Tools" button and toggle desired tools
- Start Chatting - Type your query in the input box
- View Results - See AI responses with tool execution details
Example Queries
π Web Search:
"Search for latest AI news"
π€οΈ Weather:
"What's the weather in Tokyo?"
π Wikipedia:
"Tell me about quantum computing"
π» Python Code:
"Run this code: print('Hello World')"
π System Monitor:
"Show me my CPU usage"
π’ Calculator:
"Calculate 25 * 4 + 10"
π Translator:
"Translate 'Good morning' to Spanish"
π Multi-Tool:
"Search for Python tutorials and save the results to a file"
π API Documentation
REST Endpoints
Chat API
POST /api/chat/message
{
"message": "Your query here",
"session_id": "optional-session-id",
"active_tools": ["web_search", "calculator"]
}
Response:
{
"response": "AI generated response",
"tools_used": ["web_search"],
"execution_time": 1.23,
"session_id": "session-123"
}
MCP Tools API
GET /api/mcp/tools
{
"tools": [
{
"name": "web_search",
"description": "Search the web",
"enabled": true
}
]
}
POST /api/mcp/tools/{tool_name}/toggle
{
"enabled": true
}
Memory API
GET /api/memory/history?session_id=123&limit=10
DELETE /api/memory/clear?session_id=123
WebSocket API
Connect: ws://localhost:8000/api/ws/chat
Send Message:
{
"type": "message",
"content": "Your query",
"session_id": "session-123"
}
Receive Response:
{
"type": "response",
"content": "AI response",
"tools_used": ["web_search"],
"done": true
}
π Project Structure
ai-mcp-orchestrator/
βββ backend/
β βββ config.py # Configuration settings
β βββ main.py # FastAPI application entry
β βββ requirements.txt # Python dependencies
β β
β βββ routes/ # API route handlers
β β βββ chat_routes.py
β β βββ mcp_routes.py
β β βββ memory_routes.py
β β βββ websocket_routes.py
β β
β βββ services/ # Business logic services
β β βββ db_service.py
β β βββ gemini_service.py
β β βββ memory_service.py
β β
β βββ mcp_tools/ # 17 MCP tool implementations
β β βββ web_search_mcp.py
β β βββ file_manager_mcp.py
β β βββ climate_mcp.py
β β βββ wikipedia_mcp.py
β β βββ ... (13 more)
β β
β βββ langgraph_pipeline/ # LangGraph orchestration
β β βββ graph_builder.py
β β βββ router.py
β β βββ executor.py
β β βββ aggregator.py
β β
β βββ utils/ # Utility functions
β βββ tool_registry.py
β βββ helpers.py
β
βββ frontend/
β βββ package.json
β βββ vite.config.js
β βββ tailwind.config.js
β β
β βββ src/
β β βββ App.jsx # Main application
β β βββ main.jsx # Entry point
β β β
β β βββ components/ # React components
β β β βββ ChatInterface.jsx
β β β βββ MCPToolPanel.jsx
β β β βββ MCPCard.jsx
β β β βββ ParticleBackground.jsx
β β β
β β βββ context/ # React context
β β β βββ MCPContext.jsx
β β β
β β βββ services/ # API services
β β β βββ api.js
β β β
β β βββ styles/ # CSS styles
β β βββ index.css
β β
β βββ public/ # Static assets
β
βββ README.md # This file
βββ UPDATE_SUMMARY.md # Recent updates
βββ .gitignore
π οΈ Development
Adding a New MCP Tool
- Create tool file:
backend/mcp_tools/your_tool_mcp.py
class YourTool:
def __init__(self):
self.name = "your_tool"
self.description = "Tool description"
self.enabled = True
async def execute(self, action: str, **kwargs):
# Implementation
return {"success": True, "data": "result"}
def get_schema(self):
return {
"name": self.name,
"description": self.description,
"parameters": {...}
}
- Register in
__init__.py:
from .your_tool_mcp import YourTool
__all__ = [..., "YourTool"]
-
Add to tool registry:
utils/tool_registry.py -
Add keywords:
langgraph_pipeline/router.py -
Add frontend icon:
frontend/src/components/MCPCard.jsx
Running Tests
# Backend tests
cd backend
pytest
# Frontend tests
cd frontend
npm test
Code Formatting
# Backend
black backend/
flake8 backend/
# Frontend
npm run lint
npm run format
π Troubleshooting
Common Issues
1. CORS Error
Error: CORS policy blocked
Solution: Check CORS_ORIGINS in .env matches your frontend URL
2. MongoDB Connection Failed
Error: Could not connect to MongoDB
Solution:
- Ensure MongoDB is running
- Check
MONGODB_URLin.env - Try:
mongodb://localhost:27017or MongoDB Atlas URL
3. Gemini API Error
Error: Invalid API key
Solution:
- Get API key from https://ai.google.dev
- Update
GEMINI_API_KEYin.env
4. Module Not Found
ModuleNotFoundError: No module named 'fastapi'
Solution:
cd backend
pip install -r requirements.txt
5. Port Already in Use
Error: Address already in use
Solution:
- Change
PORTin.env - Or kill process:
lsof -ti:8000 | xargs kill -9(Mac/Linux)
Logs Location
- Backend: Console output with colored logging
- Frontend: Browser console (F12)
- MongoDB: Check MongoDB logs
π€ Contributing
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
Contribution Guidelines
- Follow existing code style
- Add tests for new features
- Update documentation
- Keep commits atomic and well-described
π License
This project is licensed under the MIT License - see the LICENSE file for details.
π Acknowledgments
- Google - Gemini 2.0 Flash API
- LangChain - AI orchestration framework
- FastAPI - Modern Python web framework
- React - UI library
- MongoDB - Database solution
π Support
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: your.email@example.com
πΊοΈ Roadmap
- Add more MCP tools (20+ target)
- Voice input/output support
- Multi-user authentication
- Tool marketplace
- Mobile app (React Native)
- Docker containerization
- Kubernetes deployment
- Advanced analytics dashboard
- Plugin system for custom tools
- RAG (Retrieval Augmented Generation)
Built with β€οΈ by the AI-MCP Team
β Star us on GitHub if you find this useful!
