MCP SDK Client SSE.js

Client transport alternative of @modelcontextprotocol/sdk/client base on sse.js. The main purpose is make it working on React Native with llama.rn.

Supports:

• Streamable HTTP
• SSE

Installation

npm install @modelcontextprotocol/sdk
npm install mcp-sdk-client-ssejs

• For use @modelcontextprotocol/sdk in React Native, you may need enable unstable_enablePackageExports: true in the project's metro config.
• Or you can try to use babel-plugin-module-resolver to alias the @modelcontextprotocol/sdk to @modelcontextprotocol/sdk/dist/esm in babel config:

module.exports = {
  presets: [/* ... */],
  plugins: [
    // ...
    [
      'module-resolver',
      {
        alias: {
          '@modelcontextprotocol/sdk': '@modelcontextprotocol/sdk/dist/esm',
        },
      },
    ],
  ],
}

If CustomEvent is missing in the React Native environment, you may need to add a polyfill for it, you can try our approach:

import NativeCustomEvent from 'react-native/Libraries/Events/CustomEvent'

window.CustomEvent = class CustomEvent extends NativeCustomEvent {
  constructor(type, eventInitDict = {}) {
    super(type, eventInitDict)
  }
}

Usage

The usage is the most same as the original @modelcontextprotocol/sdk/client, but you need to use SSEJSStreamableHTTPClientTransport or SSEJSClientTransport instead of StreamableHTTPClientTransport or SSEClientTransport. (There are no STDIO support in this package.)

SSEJSStreamableHTTPClientTransport

import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { SSEJSStreamableHTTPClientTransport } from 'mcp-sdk-client-ssejs'

const transport = new SSEJSStreamableHTTPClientTransport(
  'http://<your-mcp-server-sse-endpoint-url>', 
  { /* TransportOptions */ },
)

const client = new Client({
  name: 'example-client',
  version: '1.0.0',
})

await client.connect(transport)

// List prompts
const prompts = await client.listPrompts()

// Get a prompt
const prompt = await client.getPrompt({
  name: 'example-prompt',
  arguments: {
    arg1: 'value',
  },
})

// List resources
const resources = await client.listResources()

// Read a resource
const resource = await client.readResource({
  uri: 'file:///example.txt',
})

// Call a tool
const result = await client.callTool({
  name: 'example-tool',
  arguments: {
    arg1: 'value',
  },
})

SSEJSClientTransport

import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { SSEJSClientTransport } from 'mcp-sdk-client-ssejs'

const transport = new SSEJSClientTransport(
  'http://<your-mcp-server-sse-endpoint-url>',
  { /* TransportOptions */ },
)

const client = new Client({
  name: 'example-client',
  version: '1.0.0',
})

await client.connect(transport)

// Usage is the same as with SSEJSStreamableHTTPClientTransport

Use fetch / URL as optional parameters

Both transport options accept URL and fetch options.

import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { SSEJSStreamableHTTPClientTransport, SSEJSClientTransport } from 'mcp-sdk-client-ssejs'

// Example: Use whatwg-url-without-unicode
import { URL } from 'whatwg-url-without-unicode'

// For SSEJSStreamableHTTPClientTransport
const streamableTransport = new SSEJSStreamableHTTPClientTransport(
  'http://<your-mcp-server-sse-endpoint-url>'
  {
    URL,
    // Example: Custom fetch implementation
    fetch: (...args) => fetch(...args),
  },
)

// Or for SSEJSClientTransport
const transport = new SSEJSClientTransport(
  'http://<your-mcp-server-sse-endpoint-url>',
  {
    URL,
    fetch: (...args) => fetch(...args),
  },
)

Use cases

• BRICKS - Our product for building interactive signage in simple way. We provide AI functions as Generator LLM/Assistant/MCP/MCPServer.
  • The Generator MCP (Client) is based on this package.

License

MIT