modelcontextprotocol/example-remote-client
Watch
1
0
Fork
You've already forked example-remote-client
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Mirror of https://github.com/modelcontextprotocol/example-remote-client
33 commits 1 branch 0 tags 229 KiB
  • TypeScript 99.1%
  • CSS 0.4%
  • JavaScript 0.3%
  • HTML 0.2%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Jerome 6403c23949
 Revert Vite config to subdirectory hosting 
- Restore conditional base path for /example-remote-client/ subdirectory
- Keep current GitHub Pages setup at subdirectory URL

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-04 15:55:30 +01:00
.github/workflows Add GitHub Pages deployment workflow 2025-07-03 11:32:39 +01:00
docs Add documentation for creating in-memory MCP servers 2025-06-19 17:12:50 +01:00
src Fix TypeScript build errors 2025-07-03 11:47:45 +01:00
.eslintrc.cjs Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
.gitignore Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
index.html Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
package-lock.json Fix TypeScript build errors 2025-07-03 11:47:45 +01:00
package.json Fix TypeScript build errors 2025-07-03 11:47:45 +01:00
postcss.config.js Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
README.md Adding WIP notice 2025-06-24 12:47:57 -07:00
tailwind.config.js Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
tsconfig.json Fix TypeScript build errors 2025-07-03 11:47:45 +01:00
tsconfig.node.json Implement complete InferenceProvider system with OpenRouter integration 2025-06-10 17:37:11 +01:00
vite.config.ts Revert Vite config to subdirectory hosting 2025-07-04 15:55:30 +01:00

README.md

NOTE: this is a work in progress

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

  1. Install dependencies:

    npm install

  2. Start the development server:

    npm run dev

  3. 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