🤖 React MCP Chatbot

AI-powered React chatbot with intelligent API tool calling

A production-ready chat widget that understands user intent, selects the correct API, executes it, and responds with clean Markdown-formatted answers.

✨ What is React MCP Chatbot?

React MCP Chatbot is a customizable AI chatbot component that connects natural language user requests to real API calls using an LLM-powered agent.

Instead of writing complex conditional logic, you simply define tools (API functions) — the AI automatically decides when and how to call them.

This makes it ideal for real-world, data-driven AI applications.

🎥 Demo

Example: user asks a question → AI decides → API is called → formatted response

🚀 Features

• 🤖 AI-driven tool selection
• 🔌 Pluggable API tools
• 🧠 LLM-powered intent detection
• 🧩 Fully typed (TypeScript)
• 🎨 Modern floating chat UI
• 🌗 Dark & Light themes
• 📐 Highly customizable
• 📝 Markdown responses (tables, lists, code)
• ⚡ Ollama / Groq / OpenAI / Gemini / Deepseek
• 🛠 Optional & validated tool parameters

🧠 How It Works

User Message
     ↓
LLM analyzes intent
     ↓
Tool decision (or no tool)
     ↓
API function executed
     ↓
Markdown-formatted response

📦 Installation

npm install react-mcp-chatbot

or

yarn add react-mcp-chatbot

⚡ Quick Start

import { MCPAgent } from "react-mcp-chatbot";

<MCPAgent
  provider="ollama" // or "groq"
  providerURL="http://localhost:11434"
  model="llama3"
  tools={tools}
/>

🛠 Defining API Tools

import type { MCPTool } from "react-mcp-chatbot";

const weatherTool: MCPTool = {
  name: "get_weather",
  description: "Get current weather for a city",
  parameters: {
    city: {
      type: "string",
      description: "City name",
    },
    units: {
      type: "string",
      optional: true,
      description: "metric or imperial",
    },
  },
  call: async ({ city, units }) => {
    const res = await fetch(
      `https://api.example.com/weather?q=${city}&units=${units ?? "metric"}`
    );
    return res.json();
  },
};

🎨 UI Customization

<MCPAgent
  title="Support Assistant"
  align="right"
  theme="dark"
  width={420}
  height={640}
  primaryColor="#6366f1"
  borderRadius={20}
  placeholder="Ask me anything…"
/>

🧭 Use Cases

• AI customer support bots
• Internal admin dashboards
• API copilots
• SaaS onboarding assistants
• Analytics chatbots
• Developer tools
• Portfolio projects

📜 License

MIT © Tigran Zakharyan

⭐ Star the Project

If this project helped you or inspired you, please consider giving it a star ⭐
It helps a lot and motivates further development.