Programmatic access Issue | server.connect is not a function

[hydroweaver]

Hello Playwright Team,

I'm trying to run the programmatic case of playwright with express, but the server closes when inspected from MCPinspector.

Minimal reproducible example:

1. Clone https://github.com/hydroweaver/playwright_mcp_programmatic
2. npm i @modelcontextprotocol/sdk @playwright/mcp @types/express
3. CD \playwright_mcp_programmatic\dist
4. npx tsc
5. node index.js

The server runs, but when inspection from MCP inspector is done, the console errors out at:

server.connect is not a function

Index.ts file (based on https://github.com/microsoft/playwright-mcp#:~:text=Programmatic%20usage,-Tools

import express, { Request, Response } from 'express';

import { randomUUID } from 'node:crypto';

import { createConnection } from '@playwright/mcp';
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';

const app = express();
app.use(express.json());

app.post('/mcp', async (req: Request, res: Response) => {
  const server = await createConnection({ browser: { launchOptions: { headless: true } } });
  try {
      const transport: StreamableHTTPServerTransport = new StreamableHTTPServerTransport({
      sessionIdGenerator: randomUUID,
    });
    await server.connect(transport);
    await transport.handleRequest(req, res, req.body);
    res.on('close', () => {
      console.log('Request closed');
      transport.close();
      server.close();
    });
  } catch (error) {
    console.error('Error handling MCP request:', error);
    if (!res.headersSent) {
      res.status(500).json({
        jsonrpc: '2.0',
        error: {
          code: -32603,
          message: 'Internal server error',
        },
        id: null,
      });
    }
  }
});

// Start the server
const PORT = 8931;
app.listen(PORT, () => {
  console.log(`MCP Stateless Streamable HTTP Server listening on port ${PORT}`);
});

// Handle server shutdown
process.on('SIGINT', async () => {
  console.log('Shutting down server...');
  process.exit(0);
});

[cranemont]

The createConnection function actually returns an instance of this class, which does not have a direct connect method.
You need to access the server property:

await server.server.connect(transport);

(This typing issue seems to be fixed in this PR)

[hydroweaver]

Thanks @cranemont now I don't see this error, although I'm getting a different error, which I'll try to debug:

Received POST message for sessionId 3898ae70-1409-4599-8c51-6518dfe72633
Error from MCP server: Error: Error POSTing to endpoint (HTTP 400): {"jsonrpc":"2.0","error":{"code":-32000,"message":"Bad Request: Server not initialized"},"id":null}

[hydroweaver]

A simple server works with the same setup and echos, so something wrong on my playwright side:

import express, { Request, Response } from "express";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { z } from "zod";

const app = express();
app.use(express.json());

app.post('/mcp', async (req: Request, res: Response) => {
  // In stateless mode, create a new instance of transport and server for each request
  // to ensure complete isolation. A single instance would cause request ID collisions
  // when multiple clients connect concurrently.
  
  try {
    const server = new McpServer({
  name: "example-server",
  version: "1.0.0"
});


server.tool(
  "echo",
  { message: z.string() },
  async ({ message }) => ({
    content: [{ type: "text", text: `Tool echo: ${message}` }]
  })
);

server.prompt(
  "echo",
  { message: z.string() },
  ({ message }) => ({
    messages: [{
      role: "user",
      content: {
        type: "text",
        text: `Please process this message: ${message}`
      }
    }]
  })
);


    const transport: StreamableHTTPServerTransport = new StreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
    });
    res.on('close', () => {
      console.log('Request closed');
      transport.close();
      server.close();
    });
    await server.connect(transport);
    await transport.handleRequest(req, res, req.body);
  } catch (error) {
    console.error('Error handling MCP request:', error);
    if (!res.headersSent) {
      res.status(500).json({
        jsonrpc: '2.0',
        error: {
          code: -32603,
          message: 'Internal server error',
        },
        id: null,
      });
    }
  }
});

app.get('/mcp', async (req: Request, res: Response) => {
  console.log('Received GET MCP request');
  res.writeHead(405).end(JSON.stringify({
    jsonrpc: "2.0",
    error: {
      code: -32000,
      message: "Method not allowed."
    },
    id: null
  }));
});

app.delete('/mcp', async (req: Request, res: Response) => {
  console.log('Received DELETE MCP request');
  res.writeHead(405).end(JSON.stringify({
    jsonrpc: "2.0",
    error: {
      code: -32000,
      message: "Method not allowed."
    },
    id: null
  }));
});

[pavelfeldman]

0.0.29 should have it fixed.