Zenn
🎭

Playwright MCPをLangChainで使ってみた ( Node.js )

2025/03/25に公開
1
Node.js
Playwright
Model Context Protocol
LangChain
tech

はじめに

最近、OpenAIの Computer-Using Agent を使って、ブラウザ操作の自動化を色々試しています。

そんな中、マイクロソフトが新たに Playwright MCP を公開していたので、「これLangChainと組み合わせたらいい感じでは？」と思い、試してみました。

ちなみに、LangChainを使う理由はブラウザ操作をバッチ処理に組み込みたいからです。

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

環境

以下の環境で動作確認しています。

$ node -v
v23.9.0
$ npm -v
10.9.2
$ sw_vers
ProductName:            macOS
ProductVersion:         15.3.2
BuildVersion:           24D81

セットアップ

langchainjs-mcp-adapters を使用します。

$ npm init
$ npm install @langchain/core @langchain/mcp-adapters @langchain/openai @langchain/langgraph @modelcontextprotocol/sdk
$ # 2025-03-25時点の最新版を指定
$ npm install playwright-core@1.52.0-alpha-2025-03-25 @playwright/mcp@0.0.2

動作確認

LangChainのAgentにZennのトレンド記事を見に行ってもらい、記事のタイトルと要約を取得してみます。

index.mjs
// @ts-check
import { MultiServerMCPClient } from '@langchain/mcp-adapters';
import { ChatOpenAI } from '@langchain/openai';
import { createReactAgent } from '@langchain/langgraph/prebuilt';

import { chromium } from "playwright-core";

const main = async () => {
  const playwrightServer = await chromium.launchServer({
    // macOS Chromeの場合
    executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    headless: true,
  });

  // Create client and connect to server
  const client = new MultiServerMCPClient();
  await client.connectToServerViaStdio('playwright', 'node', ['node_modules/@playwright/mcp/cli.js'], {
    PLAYWRIGHT_WS_ENDPOINT: playwrightServer.wsEndpoint(),
  });
  const tools = client.getTools();

  // Create an OpenAI model
  const model = new ChatOpenAI({
    modelName: 'gpt-4o',
    temperature: 0,
  });

  // Create the React agent
  const agent = createReactAgent({
    llm: model,
    tools,
  });

  // Run the agent
  const zennTrend = await agent.invoke({
    messages: [{ role: 'user', content: "zenn.devへアクセスし、トレンド一位の記事を教えてください。また、内容を要約して" }],
  });

  // console.log(zennTrend)
  console.log(zennTrend.messages.pop()?.content);

  await client.close();

  await playwrightServer.close();
}

main();

実行結果

node index.mjs

以下のような出力が得られました：

トレンド一位の記事は「OSS活動してたらRuffの会社で働くことになった話」です。この記事は、著者がPythonの型チェッカーを開発していたことがきっかけで、Astral社にソフトウェアエンジニアとして採用された経緯を紹介しています。

要約

  • 著者は大学院生で、趣味で開発したPythonの型チェッカーをOSSとして公開していました。
  • そのプロジェクトが注目され、Astral社からオファーを受け、契約ソフトウェアエンジニアとして参加することになりました。
  • Astral社はPython開発者向けのソフトウェアを開発しており、著者は新しい型チェッカーの開発に参加しています。
  • 採用過程では、英語面接や技術的な課題をクリアし、正式に契約を結びました。
  • 著者はOSS活動が仕事に繋がることに驚きと喜びを感じており、今後もOSS活動を続ける意向です。

この経験を通じて、OSS活動がキャリアに与える影響や、国際的な企業で働くことの意義についても触れられています。

https://zenn.dev/mtshiba/articles/how-i-joined-astral

実行してみると、ちゃんと記事を読めてそうです。
また、トークンの使用量は 40245/304 (input token / output token)でした。

まとめ

OpenAI の computer-use-preview はブラウザ操作のたびにスクリーンショットを撮ったり、クリックイベントを逐次処理したりでちょっと面倒＆コストが心配な面もあります。
一方、Playwright MCP では、アクセシビリティツリーを活用してテキストベースで操作＆情報取得できるので、実装も軽めでコスト的にも優しめ。
バッチ処理の一部に組み込んで動かす用途にも相性良さそうなので、今後も色々試してみたいと思います！

1

Discussion