MCP Client

A custom Model Context Protocol (MCP) Client interface with integrated LLM agent chat capabilities built with Next.js and the Vercel AI SDK.

Overview

This project provides a web-based interface for connecting to remote MCP servers and executing tools through both manual interaction and AI-powered chat agents. The architecture prioritizes simplicity and reliability through stateless connections and real-time tool integration.

Features

Core Functionality

• Remote MCP Server Integration: Connect to MCP servers like Jira, Confluence, GitHub, Slack, Postgres, and more
• AI Agent Chat: LLM-powered conversation interface using Vercel AI SDK
• Multi-LLM Support: Compatible with Google AI Studio (Gemini) and AWS Bedrock (Claude)
• Tool Discovery & Execution: Retrieve, display, and execute MCP tools with form-based interfaces
• Permission System: Multi-level tool execution permissions with risk assessment
• Real-time Updates: Instant UI updates for tool selection changes

User Interface

• Responsive Design: Works across desktop and mobile devices
• Dark/Light Mode: Theme toggle with custom OKLCH color palette
• Resizable Panels: Split interface between chat and MCP control panels
• Inline Permissions: Tool execution approval directly within chat interface

Getting Started

Prerequisites

• Node.js 18+
• npm/yarn/pnpm/bun

Environment Variables

Set up your AI provider credentials:

# For AWS Bedrock (Claude)
AWS_ACCESS_KEY_ID=your_aws_access_key
AWS_SECRET_ACCESS_KEY=your_aws_secret_key
AWS_REGION=us-east-1

# For Google AI Studio (Gemini)
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key

Installation & Development

npm install
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Architecture

Stateless MCP Connection Approach

This project implements a stateless Model Context Protocol (MCP) client architecture, similar to typical MCP Inspectors, prioritizing simplicity and reliability over performance optimization.

Key Principles

1. No Persistent Connections: Each MCP operation (testConnection, callTool, listTools, etc.) creates a fresh connection, performs the action, and disconnects immediately.

2. Configuration Management:

   • MCP server configurations (URL, bearer token) are stored in localStorage per service
   • No server-side connection pools or session management
   • Each request passes the current config to establish a new connection

3. Component Architecture:

   • ServiceTabs: Manages UI tab state only, no connection state
   • ServerConfiguration: Handles test connection results only (not persistent connections)
   • MCP Client Hooks: Provides complete API interface for all MCP operations