🙆‍♀️

DevinがMCPサーバーをサポート!早速Playwrightを動かしてみた

に公開

AI コーディングサービス の Devin が Model Context Protocol(MCP)をサポートしました。

https://docs.devin.ai/work-with-devin/mcp

これによって、Devin は外部ツールやデータソースと連携できるようになり、より強力なタスクを実行可能になりました。今回は実際に Playwright MCP を使って、Devin にブラウザ自動化を体験してもらいました。

Devin の MCP サポートについて

Devin の MCP 統合には特徴的な機能があります。まず、設定画面から簡単に MCP サーバーを有効化できるマーケットプレイスを提供しています。

通信方式は stdio、SSE、HTTP の 3 つをサポートしており、OAuth 認証による外部サービスとの安全な連携も可能です。ざっと確認した限りですが、Stripe、CircleCI、Slack など、複数の MCP サーバーがマーケットプレイスから利用できる様子です。

Devin に Playwright MCP を追加してみた

Devin の設定画面(Settings > MCP Marketplace)から MCP Marketplace にアクセスできます。マーケットプレイスにあるものであれば、数クリックでインストールができる様子でした。

簡単に試せるものということで、今回は Playwright を有効化しています。

セットアップ時に実行するコマンドや環境変数などを設定できる様子です。API キーを利用するものなどは、ここで設定するということかもしれません。

簡単にセットアップできる分、「強い権限を与えることになるかもですよ(意訳)」という警告が出ます。意図しない決済データの作成や DB もしくはインフラの操作などが発生する可能性もありますので、可能ならば API キーに付与する権限などでガードレールを設けたいところですね。

セットアップはこれだけです。「 Add your own 」というものもありますので、自作したサーバーなども使える・・・っぽいです。

実際に Devin で Playwright MCP を試してみた

セットアップしたので、Devin に以下のタスクを依頼してみました。

「playwright MCP を利用して、https://digitalcube.jp のサイトにアクセスして、JavaScript にエラーが出ていないか、ダウンロード・処理に時間のかかっているものがないかレビューしてください。」

Devin はまずブラウザを起動して、ブラウザセッションを開始します。あとはローカルで Playwright を実行する時のようにブラウザを操作したりネットワークなどを分析してくれます。

ちなみに、Devin が実行しているコマンドや操作の様子などもセッションページから確認できるみたいです。

このようにして、MCP を使って Devin を利用した開発フローに様々な追加機能やインテグレーションを持ち込めるようになりました。

まとめ

Devin の MCP サポートと Playwright MCP の組み合わせができるようになったことで、Devin 上での開発でできることがまた広がったかもしれません。ブラウザの操作などは以前からもできましたが、エラーログの調査なども含めるとやはり Playwright を利用した方が便利なのでは・・・?と思います。

また、ドキュメント検索系の MCP サーバーやチケット / Issue トラッカーなどの MCP サーバーを組み合わせることで、より専門的なナレッジを動的に探させることも可能になりそうです。

Devin に対する「これがあればなぁ・・・」と思っていた部分がまた 1 つ埋まったので、また ACUs 消費量が上がることになるかもしれません。

参考リンク

デジタルキューブ

Discussion