Playwright MCPをHTTP/SSEで実装する

https://github.com/microsoft/playwright-mcp

上記リポジトリがv0.0.4になりSSEをサポートしたため、それを用いたMCPサーバの実装をしました。

実装内容は以下リポジトリです。

https://github.com/torohash/playwright-sse-mcp-server#

実装自体はかなり低カロリーでまるっと載せられるぐらい簡単でした。

import express, { Request, Response } from "express";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import { createServer } from "@playwright/mcp";

const server = createServer({
  launchOptions: { headless: true },
});

const app = express();
const transports: { [sessionId: string]: SSEServerTransport } = {};

app.get("/sse", async (_: Request, res: Response) => {
  const transport = new SSEServerTransport("/messages", res);
  transports[transport.sessionId] = transport;
  res.on("close", () => {
    delete transports[transport.sessionId];
  });
  await server.connect(transport);
});

app.post("/messages", async (req: Request, res: Response) => {
  const sessionId = req.query.sessionId as string;
  const transport = transports[sessionId];
  if (transport) {
    await transport.handlePostMessage(req, res);
  } else {
    res.status(400).send("No transport found for sessionId");
  }
});

const PORT = process.env.PORT || 3002;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

後はこれに接続すれば使えます。

ちなみにAIエージェントでいうと記事執筆時点（2025/03/27）ではClineはSSEの公式サポートはないです。

※2025/04/08時点でClineのSSE対応が行われていました。

Roo Codeではサポートあるため、これを使ってAIエージェントによるコーディング等やりたい場合はRoo Codeを使用するのがよさそうかと。

他使い方等の詳細はリポジトリのREADME.mdに記載したので（AIが）よければそちら確認ください。