Connecting to Cloud-Hosted Servers

Not all MCP servers run locally. For cloud-hosted servers, you use the Streamable HTTP Client Transport (with SSE as a legacy fallback).

Streamable HTTP Client Setup

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";

const transport = new StreamableHTTPClientTransport(
  new URL("https://mcp.example.com/mcp")
);

const client = new Client({ name: "my-app", version: "1.0.0" });
await client.connect(transport);

// Now use the client exactly like stdio - the API is identical
const { tools } = await client.listTools();
const result = await client.callTool("search_knowledge_base", {
  query: "refund policy"
});

Authentication

// For OAuth-secured remote servers:
const transport = new StreamableHTTPClientTransport(
  new URL("https://mcp.example.com/mcp"),
  {
    requestInit: {
      headers: {
        "Authorization": "Bearer eyJhbG..."
      }
    }
  }
);

Transport Comparison for Clients

Error Handling & Reconnection

// Handle connection errors gracefully
client.onclose = () => {
  console.error("Connection lost. Attempting reconnect...");
  setTimeout(async () => {
    try {
      await client.connect(transport);
      console.log("Reconnected successfully");
    } catch (e) {
      console.error("Reconnection failed:", e);
    }
  }, 5000);
};

// Handle transport errors
transport.onerror = (error) => {
  console.error("Transport error:", error);
};