modelcontextprotocol/example-remote-client

Watch

Jerome 438ceb333c

Implement complete InferenceProvider system with OpenRouter integration

## Features
- 🔧 InferenceProvider interface with pluggable architecture
- 🔑 OpenRouter API key and OAuth PKCE authentication providers
- 🛠️ Tool calling support with automatic agent loop execution
- 📱 Interactive test UI with model selection and chat interface
- 🎯 Provider-level filtering to tool-capable models only
- ⚛️ React context with proper state management for UI reactivity

## Components
- Core types and interfaces in src/types/inference.ts
- OpenRouter client with shared utilities for both auth methods
- Two separate providers (composition over inheritance):
  - OpenRouterApiProvider for API key authentication
  - OpenRouterOAuthProvider for OAuth PKCE flow
- React InferenceContext with useInference hook
- Interactive test UI with tool calling demonstration
- OAuth callback routing with proper namespacing

## Tool Calling
- 3 test tools: weather, calculator, time
- Automatic tool execution and agent loop
- Visual tool call display with arguments and results
- Error handling for malformed tool calls

## Bug Fixes
- Fixed model selection UI reactivity issue
- Fixed OAuth popup race condition causing "cancelled" errors
- Proper cleanup of event listeners and intervals

## Documentation
- Comprehensive interface design document
- Implementation strategy and key design decisions
- Testing approach and security considerations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-06-10 17:37:11 +01:00

1.8 KiB

Raw Blame History

Example Remote MCP Client

A React TypeScript application for connecting to multiple MCP (Model Context Protocol) servers and providing a conversational interface with tool calling capabilities.

Features

🔗 Multi-server MCP connections (HTTP/SSE transports)
🤖 Inference provider abstraction (starting with OpenRouter)
💬 Conversational interface with agent loops
🛠️ Real-time tool call visualization
🔍 MCP debugging and message tracing
📱 Responsive UI with left sidebar and chat interface

Development

Prerequisites

Node.js (v18 or higher)
npm, yarn, or pnpm

Getting Started

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint
npm run test - Run tests
npm run test:ui - Run tests with UI

Architecture

The application is built with a modular architecture using React hooks and providers:

InferenceProvider - Abstraction for LLM inference (OpenRouter, etc.)
MCPProvider - Multi-server MCP connection management
AgentLoop - Tool calling and conversation flow
UI Components - Modular, reusable interface components

Technology Stack

React 18 with TypeScript
Vite for build tooling
Tailwind CSS for styling
MCP TypeScript SDK for protocol implementation
Vitest for testing

Project Status

This is an active development project serving as both:

A public example implementation of MCP client features
A prototyping testbed for MCP protocol changes

1.8 KiB Raw Blame History