# Polyfill for React Native StreamableHTTPClientTransport A React Native-compatible polyfill for Model Context Protocol (MCP) StreamableHTTP transport. This package provides a drop-in replacement for the standard `@modelcontextprotocol/sdk` StreamableHTTPClientTransport that works reliably in React Native environments. ## Why This Package? The standard MCP SDK's `StreamableHTTPClientTransport` relies on browser-specific APIs that don't work properly in React Native environments. This package provides: - **React Native compatibility** - Works with Expo and bare React Native projects - **Streaming support** - Handles Server-Sent Events (SSE) and real-time responses - **Dual transport strategy** - XMLHttpRequest with fetch fallback for maximum compatibility - **Drop-in replacement** - Same API as the standard MCP transport - **Session management** - Automatic MCP session handling ## Installation ```bash npm install @cherrystudio/react-native-streamable-http ``` ## Quick Start Replace your existing MCP transport import: ```typescript // Before (doesn't work in React Native) import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/transports/http.js' // After (React Native compatible) import { RNStreamableHTTPClientTransport } from '@cherrystudio/react-native-streamable-http' ``` ## Usage ### Basic Usage ```typescript import { Client } from '@modelcontextprotocol/sdk/client/index.js' import { RNStreamableHTTPClientTransport } from '@cherrystudio/react-native-streamable-http' // Create the transport const transport = new RNStreamableHTTPClientTransport(url) // Create MCP client const client = new Client( { name: 'my-react-native-app', version: '1.0.0' }, { capabilities: {} } ) // Connect the client await client.connect(transport) // Now you can use the MCP client normally const tools = await client.listTools() console.log('Available tools:', tools) ``` ### Advanced Configuration ```typescript import { RNStreamableHTTPClientTransport } from '@cherrystudio/react-native-streamable-http' const transport = new RNStreamableHTTPClientTransport(url, { // Use custom fetch implementation (optional) fetch: customFetch, // Add custom headers or request options requestInit: { headers: { Authorization: 'Bearer your-token', 'Custom-Header': 'value' }, timeout: 30000 }, // Set initial session ID (optional) sessionId: 'existing-session-id' }) ``` ### Complete Example with Error Handling ```typescript import React, { useEffect, useState } from 'react'; import { View, Text, Button } from 'react-native'; import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { RNStreamableHTTPClientTransport } from "@cherrystudio/react-native-streamable-http"; export default function MCPExample() { const [client, setClient] = useState(null); const [tools, setTools] = useState([]); const [error, setError] = useState(null); const connectToMCP = async () => { try { const transport = new RNStreamableHTTPClientTransport( url ); const mcpClient = new Client( { name: "react-native-mcp-client", version: "1.0.0", }, { capabilities: {}, } ); // Set up error handling transport.onerror = (error) => { console.error("Transport error:", error); setError(error.message); }; transport.onclose = () => { console.log("Transport closed"); setClient(null); }; await mcpClient.connect(transport); setClient(mcpClient); setError(null); // List available tools const availableTools = await mcpClient.listTools(); setTools(availableTools.tools || []); } catch (err) { console.error("Failed to connect:", err); setError(err instanceof Error ? err.message : "Connection failed"); } }; const disconnect = async () => { if (client) { await client.close(); setClient(null); setTools([]); } }; return ( MCP Client Status: {client ? "Connected" : "Disconnected"} {error && Error: {error}}