LM Studio Bionicを使ってPlaywright MCPを設定し、自然言語の指示から実際にブラウザを操作するまでを試しました。必要なソフトのインストールや、ブラウザを操作させるまでの手順を画像付きで紹介します。
今回やること
今回は、LM Studio BionicにPlaywright MCPを追加して、ローカルLLMからブラウザを操作するところまで試します。
最終的なゴールは、AIに「Playwrightを使って、TodoMVCのデモページを開いてください」と指示するだけで、実際にブラウザが起動してWebページが表示される状態です。
そもそもMCPとは？
MCP（Model Context Protocol）は、AIアプリケーションと外部のツールやデータを接続するための共通ルールです。
この後の章で詳細に説明します。
MCPを初心者向けに簡単に説明
MCPは、、AIモデルと外部のツール・データを接続するためのプロトコルです。
例えばAIに「GitHubのIssueを確認して、Jiraにチケットを作って」と依頼をする場合、AIがGitHubやJiraに直接アクセスできるわけではありません。そこでMCPを使って、下の図のように形で、AIから外部サービスの機能を呼び出せるようにします。
MCPがない場合、サービスごとに接続方法を考える必要があります。
今回の場合は、AIアプリケーションとPlaywright MCPをMCPでつなぐことで、ブラウザ操作を実現します。
MCP Host・MCP Client・MCP Serverの役割
MCPは主にMCP Host、MCP Client、MCP Serverという3つで構成されます。
- MCP Host
MCPを利用するAIアプリケーションです。
MCP Hostは、この後説明するMCP Clientというのを作成します。 - MCP Client
MCP HostとMCP Serverの間で接続を維持するコンポーネントです。
MCP Hostは接続するMCP ServerごとにMCP Clientを作成します。 - MCP Server
MCP Clientに対して機能やコンテキストを提供するプログラムです。
今回の環境に当てはめるとどうなる？
今回試した環境に当てはめると、仕組みをかなり具体的に理解できます。
Playwright MCPとは？
Playwright MCPは、LLMからWebブラウザを操作できるようにするMCP Serverです。
もう少し詳しく説明します。
AIからブラウザを操作できるMCP Server
今回試したように、AIへ自然な言葉で、「Playwrightを使って、TodoMVCのデモページを開いてください。」と指示すると、Playwright MCPが提供するブラウザ操作機能を利用できます。
Playwright MCPでできること
Playwright MCPは、AI（Claude Code / Cursor / VS Codeなど）から実際のブラウザを操作できるようにするMCPサーバーです。
できることを簡単に紹介します。
- URLを開く、戻る・進む・リロード、テキストを入力、フォームを送信などの操作が可能
- Webサイトの内容をAIに読ませる
- スクリーンショットを撮る
AIでブラウザの操作ができるので、WEBアプリケーション開発でのテストにも活用される場合があります。
普通のPlaywrightは、「人間→Playwrightコードを書く→ブラウザを操作」ですが、Playwright MCPを使うと、Playwright MCPを使うと、「人間→「このサイトで○○して」→ブラウザを操作」とができます。
今回使用した環境
PCのスペック
| CPU | Core i7 |
| メモリ | 16GB |
| GPU | Intel UHD Graphic 620 |
| OS | Windows11 Pro |
必要なソフトウェア
今回使用するソフトは以下の通りです。（必要ソフトのインストール手順は次章に記載）
- LM Studio Bionic
- モデル「Gemma 4 E4B」
- Node.js (v24.21)
- Playwright MCP
各ソフトの概要を説明します。インストール手順はこの後の章で紹介します。
LM Studio Bionic
今回ローカルLLMを動かし、MCPを利用するためのAIアプリケーションとして使用します。
モデル「Gemma 4 E4B」
実際に指示を理解して処理するAIモデルです。
Node.js
Node.jsは、今回使用するPlaywright MCPを起動するために必要です。
Playwright MCP
Playwright MCPは、今回AIにブラウザを操作するための機能を提供するMCP Serverとして使用します。
必要ソフトのインストール手順
LM Studio Bionicのインストール
LM Studio Bionicのダウンロード、インストール、モデルのダウンロードや設定手順は、「ローカルLLM LM Studio Bionicの使い方」を参照してください。
Node.jsのインストール
Node.jsのサイト(下のサイト)からインストーラをダウンロードします。
画面に従い、インストールを進めます。
途中でインストールオプション画面が表示されますが、デフォルトのままで問題ありません。
Playwright MCPをLM Studio Bionicに追加する
LM Studio Bionicでの設定手順
LM Studio Bionicを起動します。
設定を開き、左側のメニューから「MCP」を選択し、「カスタムMCPを追加」をクリックします。
次の内容で設定します。
| 設定項目 | 設定内容 |
|---|---|
| 名前 | Playwright |
| 接続 | このコンピュータ上 |
| コマンド | npx |
| 引数 | @playwright/mcp@latest |
Playwright MCPの動作確認
次の手順を実施します。
- コマンドプロンプトを起動して、次のコマンドを実行
npx @playwright/mcp@latest - 下のメッセージになったら、yを押してインストール
- Bionicを再起動して、設定のMCP画面を開き、先ほど追加したMCP「Playwright」接続済みとなっていることを確認する。
補足：トラブル発生｜MCP error -32000: Connection closedについて
筆者は、最初にPlaywright MCPの接続状態を確認すると、「MCP error -32000: Connection closed」というエラーが表示されていました。
Playwright MCPを登録するところまではできたものの、MCP Serverとの接続が正常に確立できていない状態です。
コマンドプロンプトで「npx @playwright/mcp@latest」を実行すると
Need to install the following packages:
@playwright/mcp@0.0.82
Ok to proceed? (y)
と表示されたので、yを押してインストールしてから、LM Studio Bionicを再起動したら接続できたという流れでした。
これを踏まえ、うえで説明した手順はこの流れで進むようになっています。
Playwright MCPで実際にWebページを表示
LM Studio BionicでPlaywright MCPを利用する準備ができたので、実際にブラウザを操作してみます。
今回は動作確認として、Todoアプリのサンプルサイト「TodoMVC」を開いてみました。
（Playwright MCPの公式ドキュメントでも、最初の操作例としてTodoMVCを利用したブラウザ操作が紹介されていたので、真似をしています。）
指示を実行すると、実際にブラウザのウィンドウが起動し、TodoMVCのWebページが表示されました。
Playwright MCPでWebの試験問題に挑戦
今度は本サイトの腕試し問題のページで基数・論理演算・カルノー図の問題に挑戦してもらいました。
このページはランダムで何問か出題されます。
全て解くように指示したところ、うまく操作ができませんでした。
そこで、以下のステップで指示したところ、正しく回答して次の問題へ進んでくれました。
- ページを開きページの構成を把握
- 質問文に対する正解をラジオボタンで選択
- 次の問題へ進む
まずは、ページを開き、ページの構成を把握してもらいました。
Playwright MCPを使ってください。
次のURLを開いて、ページに対してbrowser_snapshotを実行してください。
https://pc1995lab.com/itskilltest/qans.php?targetreferenceurl=https://pc1995lab.com/ite/kihonjoho-radix-binary-logic/
重要：
・Snapshotをファイルに保存しないでください。
・filenameを指定しないでください。
・Snapshotをpage_snapshotなどのファイルやartifactとして保存しないでください。
・browser_snapshotが返した内容を、そのまま現在のコンテキストで確認してください。
・まだクリック操作は行わないでください。
取得したSnapshotに含まれている、
・見出し
・テキスト
・4つの選択肢
・各選択肢の実際のref
・「次へ」ボタンの実際のref
を表示してください。
refは推測せず、Snapshotに実際に記載されている値だけを使用してください。
この結果、ブラウザでページは開きました。
Web画面の情報も取得して認識できました。
続いて、次のように質問文に対して回答を指示をしました。
取得したAccessibility Snapshotの情報を使って、現在の問題だけ回答してください。
質問本文と4つの選択肢から正解を判断してください。
回答するときは、新しいCSSセレクタを作ったり推測したりせず、
先ほどAccessibility Snapshotから取得した
実際のrefをbrowser_clickのtargetとしてそのまま使用してください。
回答を選択した後は、まだ「次へ」を押さないでください。
この結果、正解を選択しました。
最後に「次へ」ボタンを押すよう指示しました。
「次へ」ボタン（参照ID (ref): e15）を押してください
最後に
MCPについて調べているだけではHost、Client、Serverといった言葉が抽象的に感じましたが、実際にPlaywright MCPを動かしてみることで「AIがMCP ServerからToolを借りて外部を操作する」というイメージがかなりつかみやすくなりました。
コメント