MCP client terminates with vercel ai sdk

[AtiqGauri]

I used this mcp with vercel ai-sdk

const browserRenderingMcpClient = await experimental_createMCPClient({
			transport: {
				url: "https://***.workers.dev/sse",
				type: "sse",
			},
			name: "run_browser",
			onUncaughtError: (error) => {
				console.log("mcp client error: ", error);
				log.error({ error }, "MCP client error");
			},
		});

I get this error in long running agent flows:

POST /chat 200
mcp client error: TypeError: terminated
at Fetch.onAborted (node:internal/deps/undici/undici:11132:53)
at Fetch.emit (node:events:518:28)
at Fetch.terminate (node:internal/deps/undici/undici:10290:14)
at Object.onError (node:internal/deps/undici/undici:11253:38)
at Request.onError (node:internal/deps/undici/undici:2094:31)
at Object.errorRequest (node:internal/deps/undici/undici:1591:17)
at TLSSocket.<anonymous> (node:internal/deps/undici/undici:6319:16)
at TLSSocket.emit (node:events:530:35)
at node:net:346:12
at TCP.done (node:_tls_wrap:650:7) {
[cause]: BodyTimeoutError: Body Timeout Error
at FastTimer.onParserTimeout [as _onTimeout] (node:internal/deps/undici/undici:6253:32)
at Timeout.onTick [as _onTimeout] (node:internal/deps/undici/undici:2210:17)
at listOnTimeout (node:internal/timers:588:17)
at process.processTimers (node:internal/timers:523:7) {
code: 'UND_ERR_BODY_TIMEOUT'
}
}
MCP client error

[ruifigueira]

Hi @AtiqGauri, there's a 1 minute timeout by default on browser rendering binding, which means that if the agent takes more than 1 minute to call our agent, it will probably close. You can extend it with keep_alive option: https://developers.cloudflare.com/browser-rendering/platform/playwright/#keep-alive .

To pass keep_alive to playwright MCP is a bit trick, though. You need something like this in your Playwright MCP worker:

import { endpointURLString } from '@cloudflare/playwright';

// @ts-ignore keepAlive is not exposed in typescript, we need to fix it
const endpointUrl = endpointURLString(env.BROWSER, { keepAlive: 20_000 });
export const PlaywrightMCP = createMcpAgent(endpointUrl);

[ericclemmons]

Hmmm I’m seeing timeouts happen even with tool calls during that minute.

Perhaps the issue is that createPlaywrightMCPAgent shouldn’t use env.BROWSER but should acquire one first for the current agent’s session? 🤔

[ruifigueira]

You can try that :

const { sessionId } = await acquire(env.BROWSER, { keepAlive: 120_000 });
const endpointUrl = endpointURLString(env.BROWSER, { sessionId });
export const PlaywrightMCP = createMcpAgent(endpointUrl);

But it should be equivalent. Do you have any stacktrace with those timeouts?

[ericclemmons]

@ruifigueira That'd be a single session for all PlaywrightMCP calls from a Worker/Agent, right?

https://developers.cloudflare.com/browser-rendering/platform/playwright-mcp/#deploying

I noticed that my AIChatAgent works with Playwright MCP, but I get a disconnect error like this:

And according to the dashboard, everything is closed due to being "Idle":

But, due to timestamps, I can only assume that the ~1 minute of activity in my app before I get an error is due to the default timeout

Since I have an AIChatAgent with this:

  async onConnect(_connection: Connection, ctx: ConnectionContext) {
    await this.addMcpServer(
      "playwright",
      new URL("/sse", this.env.playwrightMcpUrl).href,
      new URL(ctx.request.url).origin
    );
  }

Put another way, I'm not following how the session with my chat agent is getting it's own PlaywrightMCP DO instance. As I understand it, making a request to MCP immediately initializes it's own session. But I don't know how the two are persisted together without acquire someplace.

[ruifigueira]

Hmm, you're hitting some bug in the dashboard, that Start Time is clearly wrong 😅 I'll report that to the team.

Actually, the code I provided above is not ok, it would only work for an MCP connection as other MCP connections would fail because they would try to connect to the same browser rendering sessionId.

The acquire / launch is called by each PlaywrightMCP DO instance as long as there's no session ID passed to endpointURLString so each DO will have its own sessionId and can estabilish a connection to it.

[ericclemmons]

Thanks for reporting that bug 🙏

I guess the crux of my problem is user error – I'm not sure how to pair an AIChatAgent session with a single PlaywrightMCP session.

Given PlaywrightMCP from https://developers.cloudflare.com/browser-rendering/platform/playwright-mcp/#deploying and this worker.ts:

// worker.ts
export class PlaywrightGeneratorAgent extends AIChatAgent<Env> {
  onChatMessage = (
    onFinish: StreamTextOnFinishCallback<ToolSet>
  ): Promise<Response> => {
  
  async onConnect(_connection: Connection, ctx: ConnectionContext) {
    await this.addMcpServer(
      "playwright",
      new URL("/sse", this.env.playwrightMcpUrl).href,
      new URL(ctx.request.url).origin
    );
  }
  ...
}

export default {
  async fetch(request: Request, env: Env, _ctx: ExecutionContext) {
    return await routeAgentRequest(request, env);
  }
}

... it's like I need a way to correlate the Agent's ...this.mcp.getAITools to a single, acquired Playwright + Playwright MCP DO.

Or am I off?