🤖 An intelligent customer service chatbot with MCP (Model Context Protocol) integration for accessing business data and providing automated support.
This customer service bot provides automated support for businesses by intelligently accessing company datasets through the Model Context Protocol (MCP). It can answer customer inquiries about services, orders, products, and more by querying structured business data in real-time.
- Data-Driven Responses: Access customer records, service history, inventory, and business information
- Multi-LLM Support: Works with both local (Ollama) and cloud-based (OpenRouter) language models
- Tool-Calling Architecture: Automatic data retrieval without manual intervention
- Real-Time Monitoring: Complete visibility into data queries and system operations
- Clean Interface: Filtered chat experience with technical details in separate monitoring panel
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ React UI │ │ LLM Provider │ │ Business Data │
│ │ │ │ │ │
│ • Chat Interface│◄──►│ • Ollama │◄──►│ • Customer DB │
│ • Provider Setup│ │ • OpenRouter │ │ • Service Logs │
│ • MCP Monitoring│ │ • Tool Calling │ │ • Product Info │
└─────────────────┘ └─────────────────┘ └─────────────────┘
▲ ▲ ▲
│ │ │
└───────────────────────┼───────────────────────┘
│
┌─────────────────┐
│ MCP Proxy │
│ │
│ • Protocol Hub │
│ • Data Bridge │
│ • Tool Registry │
└─────────────────┘
- Node.js 18+
- npm or yarn
- (Optional) Ollama for local models
- (Optional) OpenRouter API key for cloud models
- Clone the repository
git clone <repository-url>
cd customer-service-bot- Install dependencies
# Frontend
cd app && npm install
# MCP Server
cd ../server && npm install
# MCP Tools
cd ../mcp-servers/repair-files && npm install- Configure your data source
# Set your business data directory (use absolute path on your system)
export REPAIR_FILES_ROOT="$(pwd)/data"# From project root
./scripts/start-all.sh- Start MCP Proxy Server
cd server
REPAIR_FILES_ROOT="$(pwd)/../data" npm start- Start Frontend
cd app
npm run dev- Access the application
- Frontend: http://localhost:5173
- MCP Proxy: http://localhost:8787
- ✅ Intelligent Query Processing: Multi-iteration reasoning for complex customer requests
- ✅ Real-Time Data Access: Live querying of business databases and files
- ✅ Multi-Provider Support: Choice between local and cloud-based language models
- ✅ Enhanced Monitoring: Detailed logging of all data operations
- ✅ Clean Chat Interface: Customer-focused view with technical details hidden
- ✅ Tool Call Visualization: See exactly what data is being accessed
- ✅ Parameter Tracking: Monitor search queries and file access patterns
- ✅ Error Handling: Graceful degradation with helpful error messages
- ✅ Iteration Control: Automatic continuation until customer question is fully answered
# Install Ollama
curl -fsSL https://ollama.com/install.sh | sh
# Pull a model
ollama pull qwen3:8b
# Model will be available at localhost:11434- Get API key from OpenRouter
- In the application, select "OpenRouter" provider
- Enter your API key
- Choose a model (e.g.,
anthropic/claude-3.5-sonnet)
The bot can be configured to access various business data sources:
// Example data structure
data/
├── customers.json // Customer records
├── services.csv // Service history
├── products/ // Product information
├── orders/ // Order tracking
└── knowledge-base/ // FAQ and policiesOrder Status Inquiry
Customer: "What's the status of my order #12345?"
Bot: [Accesses order database] → "Your order #12345 was shipped yesterday and will arrive tomorrow via UPS."
Product Information
Customer: "Do you have brake pads for a 2018 Honda Civic?"
Bot: [Searches inventory] → "Yes, we have OEM brake pads in stock for your 2018 Civic. Part #BP-HC18, $89.99."
Service History
Customer: "When was my last oil change?"
Bot: [Queries service records] → "Your last oil change was on March 15th, 2024. Based on your driving, the next one is due around June 15th."
customer-service-bot/
├── app/ # React frontend
│ ├── src/
│ │ ├── components/ # UI components
│ │ ├── lib/ # Core logic
│ │ └── styles/ # CSS styles
├── server/ # MCP proxy server
├── mcp-servers/ # MCP tool implementations
├── data/ # Sample business data
└── docs/ # Documentation
# Run tests
npm test
# Type checking
npm run type-check
# Linting
npm run lint
# Build for production
npm run build- Create MCP tool for your data source
- Register tool in MCP server
- Update system prompt with tool descriptions
- Test with sample queries
# Build frontend
cd app && npm run build
# Build server
cd ../server && npm run build
# Deploy to your hosting platformREPAIR_FILES_ROOT="./data" # Relative to project root
OPENROUTER_API_KEY="your-api-key"
MCP_SERVER_PORT=8787
FRONTEND_PORT=5173- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 📖 Documentation: Wiki
- 🐛 Bug Reports: Issues
- 💬 Discussions: Discussions
- 📧 Email: support@example.com
- Model Context Protocol for the integration framework
- Anthropic for MCP development
- React and TypeScript for the frontend
- Ollama for local LLM support
Version: 1.0.0 | Last Updated: December 2024