MCP Assistant

A Web Based MCP Client to access remote MCP's

---

🌟 Features

MCP Protocol Supported transport via SSE and Streamable HTTP Configure and manage multiple servers simultaneously OAuth 2.0 Authorization Server Metadata (RFC8414) and OpenID Connect Discovery 1.0 support Real-time connection status monitoring Tool execution

Agent–User Interaction (AG-UI Protocol) Stream text message events - Real-time message streaming for responsive interactions Backend tool rendering - Visualize tool outputs in chats Tool output streaming - Stream tool results and logs as real-time events Interrupts (human in the loop) - Pause and approve workflows without losing state Shared state - Context-aware responses using MCP tools

---

📦 Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18 or higher
• npm or yarn package manager
• Backend API running (default: http://localhost:8000)
• Google OAuth credentials for authentication

Installation

1. Clone the repository

   git clone <repository-url>
   cd mcp-client

2. Install dependencies

   npm install

3. Configure environment variables

   Create a .env.local file in the root directory:

   # NextAuth Configuration
   NEXTAUTH_SECRET=your_nextauth_secret_here
   NEXTAUTH_URL=http://localhost:3000
   
   # Google OAuth
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   
   # Backend API
   DJANGO_API_URL=http://localhost:8000
   BACKEND_URL=http://localhost:8000

4. Start the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

Production Build

# Build for production
npm run build

# Start production server
npm start

---

🚀 Getting Started with MCP Assistant

Adding an MCP Server

1. Navigate to the MCP servers page
2. Click "Add Server" button
3. Fill in server details:
   • Server name
   • Transport type (SSE/Streamable HTTP)
   • Server URL
   • Optional: OAuth2 configuration
4. Click "Save" to connect

Using the Chat Interface

1. Select connected MCP servers from the sidebar
2. Choose your preferred LLM provider
3. Enter your API key
4. Start chatting - the assistant can use tools from connected MCP servers

---

🤝 Contributing