- TypeScript 99.1%
- CSS 0.4%
- JavaScript 0.3%
- HTML 0.2%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
438ceb333c## 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> |
||
| docs | ||
| src | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
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 servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run test- Run testsnpm 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