SSEClientTransport doesn't work with NextJS

[michaelgrewal]

Has anyone been able to successfully use the SSEClientTransport in their NextJS app (v14) server side code?

I have a route in my app /api/chat and I have a MCP Server running with /sse, I can establish a connection in Postman with GET.

However, I want to establish a connection from my NextJS server code to my MCP Server. But whenever I instantiate the transport, my app's route becomes totally broken and unable to trigger. Meanwhile, if I comment out the transport, then my route becomes functional again. It seems like something with the transport is breaking my app's fetch("/api/chat") functionality.

Does anyone know why? Does this MCP SDK break the default JS fetch() implementation or something?

I also can't find any examples online, and the sample in the official docs for SSEClientTransport is super bare minimum. I find there are plenty of examples for MCP Server but barely any for MCP Client.

[TheHogginator]

You using AI SDK? You could try using their experimental client, it's not a full client(suspect a full client isn't possible because it's stateful) but I had a play around without it earlier and was able to use tools from an MCP server without any issues.

I have also just had SSEClientTransport working as well if this helps

import { jsonSchema, streamText, type Tool as AISDKTool, type ToolSet } from 'ai';
import { openai } from "@ai-sdk/openai";
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
import { Tool as MCPTool } from '@modelcontextprotocol/sdk/types.js'
import { JSONSchema7 } from 'json-schema';

const mcpToolToAISDKTool = (client: Client, mcpTool: MCPTool): AISDKTool => {
    return {
        description: mcpTool.description || mcpTool.name,
        parameters: jsonSchema(mcpTool.inputSchema as JSONSchema7),
        /**
         * This is potentially where your code is hanging if you didn't define an
         * execute method for the tool you got back from MCP.
         * @see https://sdk.vercel.ai/cookbook/next/human-in-the-loop#forward-tool-call-to-the-client
         */
        execute: async (args) => {
            const result = await client.callTool({name: mcpTool.name, arguments: args});
            return result.content;
        },
    }
}

const getMCPToolset = async (client: Client): Promise<ToolSet> => {
    const { tools } = await client.listTools();
    return tools.reduce((toolSet, tool) => {
        return {...toolSet, [tool.name]: mcpToolToAISDKTool(client, tool)}
    }, {} as ToolSet)
}

export async function POST(req: Request) {
    const { messages } = await req.json();

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

    const transport = new SSEClientTransport(
        new URL("http://localhost:3001/sse")
    );
    await client.connect(transport)

    const toolSet = await getMCPToolset(client);

    const result = streamText({
        model: openai('gpt-4-turbo'),
        messages,
        tools: toolSet,
        toolCallStreaming: true,
        maxSteps: 3
    });

    return result.toDataStreamResponse();
}

[michaelgrewal]

Thank you @TheHogginator I don't use AI SDK in my app, but I gave it a try and the experimental client in AI SDK works (albeit just for tool calling), meanwhile the SSEClientTransport from MCP SDK does not work.

I suspect it's related to EventSource and the eventsource package, causing interference with the fetch() method hence why my route is breaking. When I read the AI SDK code for their experimental client implementation, they avoid using eventsource and use eventsource-parser instead. They also don't use the MCP SDK either, they implement the experimental client from scratch. Meanwhile MCP SDK uses eventsource.

I'm using Next JS 14 with the app router.

I tried your code sample, but unfortunately I'm still getting broken routes when instantiating a SSEClientTransport.