MCP Chat Application

A modern chat application that integrates with various Model Context Protocol (MCP) servers, featuring a responsive React frontend and Node.js/Express backend.

🚀 Features

• Multi-User Support: Each user gets their own chat sessions
• MCP Server Integration: Connect to different MCP servers including GitHub Copilot
• Google GenAI Integration: Leverage Google's AI capabilities
• Real-time Chat: Interactive chat interface with message history
• Responsive Design: Built with modern web technologies for all devices
• Secure: User authentication and token management

🛠 Tech Stack

Frontend

• React 19 with TypeScript
• Vite for fast development and building
• TailwindCSS for styling
• Radix UI components
• React Router for navigation
• Axios for API requests

Backend

• Node.js with Express
• TypeScript
• Google GenAI SDK
• Model Context Protocol (MCP) SDK
• CORS enabled for frontend communication

📦 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Google API key (for GenAI features)

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

3. Create a .env file in the server directory with your configuration:

   GOOGLE_API_KEY=your_google_api_key

4. Start the development server:

   npm run dev

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to http://localhost:5173

🌟 Usage

1. Enter a username to start a new session
2. Configure your MCP server access tokens
3. Create a new chat
4. Start chatting with the AI assistant

📂 Project Structure

mcp-project/
├── frontend/               # Frontend React application
│   ├── src/
│   │   ├── components/     # React components
│   │   └── ...
│   ├── public/             # Static assets
│   └── package.json        # Frontend dependencies
│
├── server/                 # Backend server
│   ├── src/
│   │   ├── mcp-client.ts  # MCP client implementation
│   │   └── index.ts       # Main server file
│   └── package.json        # Backend dependencies
└── README.md              # This file

🖼️ Video Demo

Click on the below thumbnail to watch the video.