@deepbim/chatbot-mcp

v0.1.0

Published

a month ago

A powerful, embeddable AI chatbot component with Model Context Protocol (MCP) support for React and Next.js applications.

0High
0Medium
0Low

duenguyen3008

Chatbot MCP

A powerful, embeddable AI chatbot component with Model Context Protocol (MCP) support for React and Next.js applications.

Features

🤖 AI-Powered Chat Interface - Built with Vercel AI SDK for seamless AI interactions
🔌 MCP Integration - Full support for Model Context Protocol servers
🎨 Customizable UI - Beautiful, responsive design with Tailwind CSS
💬 Thread Management - Persistent conversation threads with local storage
🛠️ Tool Selection - Dynamic MCP tool discovery and selection
📁 File Attachments - Support for uploading and processing files
🎯 Drag & Resize - Flexible positioning and sizing for optimal UX
🌐 Multi-Model Support - Works with various AI models (OpenAI, Anthropic, etc.)
⚡ TypeScript - Fully typed for better developer experience

Installation

npm install @24ktwin-editor/chatbot-mcp
# or
pnpm add @24ktwin-editor/chatbot-mcp

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom

Usage

Basic Integration

import { Chatbot } from '@24ktwin-editor/chatbot-mcp';

function App() {
  return (
    <div>
      <Chatbot />
    </div>
  );
}

Next.js App Router

// app/layout.tsx
import { Chatbot } from '@24ktwin-editor/chatbot-mcp';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Chatbot />
      </body>
    </html>
  );
}

Configuration

The chatbot will automatically check for your backend API at startup. Make sure your API endpoints are configured correctly:

Health Check: /api/v1/health
Chat API: /api/v1/chat

Development

Prerequisites

Node.js 18+
pnpm (recommended) or npm

Setup

# Clone the repository
git clone <repository-url>
cd chatbot-mcp-nextjs

# Install dependencies
pnpm install

# Run development server
pnpm dev

Open http://localhost:3000 to see the demo application.

Building

Build Next.js App

pnpm build
pnpm start

Build as NPM Package

pnpm build:lib

This generates:

dist/index.mjs - ES Module format
dist/index.cjs - CommonJS format
dist/index.d.ts - TypeScript type definitions

Publishing

pnpm publish --access public

Architecture

The chatbot is built with modular components:

Chatbot Container - Main chat interface with message display
Message Bubble - Individual message rendering with entity support
Prompt Input - User input with file attachment support
Settings Dialog - AI model and parameter configuration
MCP Dashboard - MCP server management and tool selection
Chat Sidebar - Thread history and management

Tech Stack

Framework: Next.js 16 with App Router
UI Library: React 19
AI SDK: Vercel AI SDK (@ai-sdk/react)
Styling: Tailwind CSS 4
UI Components: Radix UI
Animations: Framer Motion
Build Tool: Rollup (for library builds)
Language: TypeScript

API Requirements

Your backend should implement the following endpoints:

Health Check

GET /api/v1/health
Response: { status: "ok" }

Chat API

POST /api/v1/chat
Content-Type: application/json

{
  "threadId": "string",
  "messages": [...],
  "modelConfig": {...}
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

MIT License - See LICENSE.md for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.