Remote MCP Sample
Supports UIby tsutsumi389
A reference implementation of a Remote MCP Server with a React-based interactive UI app.
What it does
Remote MCP Sample demonstrates the integration of a Python-based FastMCP server with a React MCP App. It features an interactive counter and history chart rendered inside a host iframe, enabling bi-directional communication between the LLM and a custom UI.
Key features
- Interactive UI: Renders a real-time counter and data chart via
ui://counterresource. - Bi-directional flow: LLM tools update the UI, and UI buttons trigger server tools.
- Remote Transport: Implements Streamable HTTP for remote server connectivity.
- Theme Integration: UI follows host theme preferences for a seamless experience.
Installation
- Claude Desktop: Add
http://localhost:3001/mcpas a Streamable HTTP server in settings. - Basic Host: Use the
modelcontextprotocol/ext-appsbasic-host example and point to the server URL.
Supported hosts
- claude
Choose your AI client and follow the steps below.
Claude Desktop
Add http://localhost:3001/mcp as a Streamable HTTP server.Related Apps
FinanceToolkit
MCP ServerProfessional-grade financial analysis toolkit for equities, options, and risk management.
DiffSitter MCP
MCP ServerAI-powered structural code navigation using tree-sitter ASTs for semantic understanding across 14+ languages.
OpenAI Apps SDK Examples
MCP AppOfficial example gallery of interactive MCP widgets for ChatGPT — 3D viewers, maps, carousels, shopping carts, and more.
Human MCP
MCP ServerGive AI agents human-like senses: visual analysis, image/video generation, speech synthesis, browser automation, and advanced reasoning — 29 MCP tools in one se
Shopify MCP Server
MCP ServerDirect interaction with Shopify store data via GraphQL API for managing products, customers, and orders.
Git MCP Server
MCP ServerFull-featured Git MCP server exposing 28 tools for AI agents to clone, commit, branch, diff, merge, rebase, and more via STDIO or Streamable HTTP.
CodexPotter
MCP ServerAutonomous reconciliation loop that drives Codex to align your codebase with instructed states.
Smart Coding MCP
MCP ServerSemantic code search for AI assistants using local embeddings — find code by meaning, not just keywords.