MCP Chat Client

A modern, feature-rich chat client built with React, TypeScript, and Vite that integrates with Model Context Protocol (MCP) servers to provide intelligent AI-powered conversations with access to various tools and resources.

Demo

Chat app

Features

• 🤖 AI-Powered Chat: Seamless integration with AI models through MCP servers
• 🛠️ Tool Integration: Access to various MCP tools and resources
• 🔐 Authentication: Secure user authentication and session management
• 💬 Real-time Chat: Interactive chat interface with typing indicators
• 📚 Conversation History: Persistent chat history and conversation management
• 🎨 Modern UI: Beautiful, responsive interface built with modern design principles
• 🔧 MCP Server Management: Add, configure, and manage multiple MCP servers

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: SCSS with modern CSS features
• Backend: Cloudflare Workers
• Caching: Cloudflare Workers KV
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• State Management: React Context + Custom Hooks
• Build Tool: Vite with SWC for fast refresh

Prerequisites

• Node.js 18+
• npm or yarn
• Cloudflare account (for deployment)
• Supabase account (for database and auth)

Installation

1. Clone the repository

   git clone 
   cd mcp-chat-client
   

2. Install dependencies

   npm install
   

3. Set up environment variables Create a .env file in the root directory:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   

4. Configure Supabase

   • Set up a new Supabase project
   • Configure authentication providers
   • Set up the required database tables

5. Configure Cloudflare Workers

   • Update wrangler.json with your Cloudflare account details
   • Configure environment variables in Cloudflare dashboard

Development

Start Development Server

npm run dev

The application will be available at http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

Deploy to Cloudflare Workers

npm run deploy

Project Structure

src/
├── components/          # React components
│   ├── chat/          # Chat interface components
│   ├── mcp/           # MCP server management
│   ├── tools-wrapper/  # Tool integration components
│   └── ...            # Other UI components
├── contexts/           # React contexts
├── hooks/              # Custom React hooks
├── services/           # API and external service integrations
└── util/               # Utility functions

worker/                 # Cloudflare Workers backend
├── backend/            # Backend logic
│   ├── mcp/           # MCP server implementations
│   ├── conversations/  # Chat conversation handling