%%{init: {"flowchart": {"htmlLabels": false}} }%% graph TD %% Modern, Bright Color Styling with white text classDef client fill:#22c55e,stroke:#059669,stroke-width:2px,color:#ffffff classDef gateway fill:#06b6d4,stroke:#0891b2,stroke-width:2px,color:#ffffff classDef backend fill:#f97316,stroke:#ea580c,stroke-width:2px,color:#ffffff classDef resource fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#ffffff classDef server fill:#06b6d4,stroke:#0891b2,stroke-width:2px,color:#ffffff linkStyle default stroke:#64748b,stroke-width:1.5px,stroke-dasharray: 5 5 %% Current MCP Setup (Multiple Local Servers) subgraph Current["Current Setup (Local)"] direction LR subgraph ClientGroup["Client"] A[Client]:::client end subgraph Servers["Local MCP Servers"] direction TB B1["Local MCP Server (DB)"]:::server -->|"DB Access"| C1[DB]:::resource B2["Local MCP Server (API 1)"]:::server -->|"API Access"| C2["Web API 1"]:::resource B3["Local MCP Server (API 2)"]:::server -->|"API Access"| C3["Web API 2"]:::resource end A -->|"MCP Protocol"| B1 A -->|"MCP Protocol"| B2 A -->|"MCP Protocol"| B3 end %% Vertical separator Current --> Proposed %% Proposed MCP Architecture (Decoupled) subgraph Proposed["Proposed Architecture (Remote)"] direction LR D[Client/Host]:::client -->|"MCP Protocol"| E["Local MCP Server (@remote-mcp/client)"]:::server E <-->|"tRPC(HTTP)"| F["Remote MCP Server (@remote-mcp/server)"]:::backend %% Separated Resources F -->|"DB Access"| G1[DB]:::resource F -->|"API Access"| G2["Web API 1"]:::resource F -->|"API Access"| G3["Web API 2"]:::resource end

{ "mcpServers": { "remote-mcp": { "command": "npx", "args": ["-y", "@remote-mcp/client"], "env": { "REMOTE_MCP_URL": "http://localhost:9512", "HTTP_HEADER_Authorization": "Bearer <token>" } } } }

$ npm install @remote-mcp/client @trpc/client@next zod

import { RemoteMCPClient } from "@remote-mcp/client"; const client = new RemoteMCPClient({ remoteUrl: "http://localhost:9512", onError: (method, error) => console.error(`Error in ${method}:`, error) }); void client.start();

import { MCPRouter, LogLevel } from "@remote-mcp/server"; import { createHTTPServer } from '@trpc/server/adapters/standalone'; import { z } from "zod"; // Create router instance const mcpRouter = new MCPRouter({ logLevel: LogLevel.DEBUG, name: "example-server", version: "1.0.0", capabilities: { logging: {}, }, }); // Add example tool mcpRouter.addTool( "calculator", { description: "Perform basic calculations. Add, subtract, multiply, divide. Invoke this every time you need to perform a calculation.", schema: z.object({ operation: z.enum(["add", "subtract", "multiply", "divide"]), a: z.string(), b: z.string(), }), }, async (args) => { const a = Number(args.a); const b = Number(args.b); let result: number; switch (args.operation) { case "add": result = Number(a) + b; break; case "subtract": result = a - b; break; case "multiply": result = a * b; break; case "divide": if (b === 0) throw new Error("Division by zero"); result = a / b; break; } return { content: [{ type: "text", text: `${result}` }], }; }, ); const appRouter = mcpRouter.createTRPCRouter(); void createHTTPServer({ router: appRouter, createContext: () => ({}), }).listen(Number(process.env.PORT || 9512));