Mayank00480/mcp-server

MCP ChatBot - Free AI Chatbot with Tool Calling

A free, open-source chatbot built with React and Node.js that implements the Model Context Protocol (MCP) for tool calling capabilities. This chatbot can work without any paid API keys and includes multiple free LLM providers.

Features

• 🤖 Multiple Free LLM Providers:

  • Mock LLM (no API key required)
  • Hugging Face Inference API (free tier)
  • Ollama (local models)

• 🛠️ MCP Tool Calling:

  • Web search using DuckDuckGo API
  • Weather information using OpenWeatherMap
  • Mathematical calculations

• 🎨 Modern React UI:

  • Real-time server status
  • Provider selection
  • Tool availability display
  • Responsive design

• 🔧 Easy Setup:

  • No paid API keys required to start
  • Simple configuration
  • Docker support (coming soon)

Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone and install dependencies:

   git clone <your-repo-url>
   cd mcp-chatbot
   npm install
   

2. Start the development servers:

   # Start both React app and MCP server
   npm run dev
   
   # Or start them separately:
   npm start          # React app (port 3000)
   npm run server     # MCP server (port 3001)
   

3. Open your browser: Navigate to http://localhost:3000

Configuration

Environment Variables (Optional)

Create a .env file in the root directory for enhanced functionality:

# Hugging Face API (free tier)
HUGGINGFACE_API_KEY=your_huggingface_token

# OpenWeatherMap API (free tier)
OPENWEATHER_API_KEY=your_openweather_token

Getting Free API Keys

1. Hugging Face:

   • Go to Hugging Face
   • Create a free account
   • Generate a new token
   • Free tier includes 30,000 requests/month

2. OpenWeatherMap:

   • Go to OpenWeatherMap
   • Sign up for a free account
   • Get your API key
   • Free tier includes 1,000 calls/day

Usage

Basic Chat

The chatbot works out of the box with the Mock LLM provider, which requires no API keys:

1. Select "Mock LLM (Free)" from the provider dropdown
2. Start chatting - the bot will respond with helpful information

Using Tools

The chatbot can automatically detect when you want to use tools:

• Web Search: "Search for the latest news about AI"
• Weather: "What's the weather like in London?"
• Calculations: "Calculate 15 * 23 + 7"

Switching Providers

1. Mock LLM: Works immediately, no setup required
2. Hugging Face: Add your API key to .env file
3. Ollama: Install Ollama locally and run models

Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React Frontend│    │   MCP Server    │    │  External APIs  │
│   (Port 3000)   │◄──►│   (Port 3001)   │◄──►│  (Free Tiers)   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                              │
                              ▼
                       ┌─────────────────┐
                       │   MCP Tools     │
                       │  - Web Search   │
                       │  - Weather      │
                       │  - Calculator   │
                       └─────────────────┘

MCP Tools

Available Tools

1. search_web

   • Description: Search the web for current information
   • Parameters: query (string)
   • Uses: DuckDuckGo Instant Answer API

2. get_weather

   • Description: Get current weather information
   • Parameters: location (string)
   • Uses: OpenWeatherMap API

3. calculate

   • Description: Perform mathematical calculations
   • Parameters: expression (string)
   • Uses: Safe JavaScript evaluation

Adding New Tools

To add a new MCP tool:

1. Define the tool in server/mcp-server.js:

   const mcpTools = {
     your_tool: {
       name: "your_tool",
       description: "Description of your tool",
       inputSchema: {
         type: "object",
         properties: {
           param1: { type: "string", description: "Parameter description" }
         },
         required: ["param1"]
       }
     }
   };
   

2. Implement the tool:

   const toolImplementations = {
     your_tool: async (params) => {
       // Your tool implementation
       return { success: true, result: "Tool result" };
     }
   };
   

Development

Project Structure

mcp-chatbot/
├── src/
│   ├── components/
│   │   └── ChatBot.jsx          # Main chatbot component
│   ├── assets/
│   │   └── Manifest.json        # MCP configuration
│   └── App.js                   # React app entry
├── server/
│   └── mcp-server.js            # MCP server implementation
├── package.json                 # Dependencies and scripts
└── README.md                    # This file

Available Scripts

• npm start - Start React development server
• npm run server - Start MCP server
• npm run dev - Start both servers concurrently
• npm run build - Build for production
• npm test - Run tests

Troubleshooting

Common Issues

1. Server not connecting:

   • Ensure the MCP server is running on port 3001
   • Check if port 3001 is available
   • Restart both servers with npm run dev

2. API errors:

   • Verify your API keys are correct
   • Check if you've exceeded free tier limits
   • Use Mock LLM provider for testing

3. Tool not working:

   • Check the browser console for errors
   • Verify the tool is properly implemented
   • Test the tool endpoint directly

Debug Mode

Enable debug logging by setting the environment variable:

DEBUG=true npm run dev

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Acknowledgments

• Model Context Protocol for the MCP specification
• Hugging Face for free inference API
• OpenWeatherMap for weather data
• DuckDuckGo for search API

Roadmap

• Docker containerization
• More LLM providers (Anthropic, Cohere)
• Additional MCP tools (file operations, database queries)
• WebSocket support for real-time chat
• User authentication and chat history
• Mobile app (React Native)