A React MCP-style AI chatbot component with tool calling and backend integration
npm install react-mcp-chatbot
src="https://img.shields.io/github/stars/TigranZakharyan/react-mcp-chatbot?style=flat"
alt="GitHub stars"
/>
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.
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.
Example: user asks a question β AI decides β API is called β formatted response

User Message
β
LLM analyzes intent
β
Tool decision (or no tool)
β
API function executed
β
Markdown-formatted response
npm install react-mcp-chatbotor
yarn add react-mcp-chatbotimport { MCPAgent } from "react-mcp-chatbot";<MCPAgent
provider="ollama" // or "groq"
providerURL="http://localhost:11434"
model="llama3"
tools={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();
},
};
<MCPAgent
title="Support Assistant"
align="right"
theme="dark"
width={420}
height={640}
primaryColor="#6366f1"
borderRadius={20}
placeholder="Ask me anythingβ¦"
/>
MIT Β© Tigran Zakharyan
If this project helped you or inspired you, please consider giving it a star β
It helps a lot and motivates further development.