src="https://img.shields.io/github/stars/TigranZakharyan/react-mcp-chatbot?style=flat"
alt="GitHub stars"
/>

🤖 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.