AIに、公開されているMCP Serverをあれこれつなげて遊んでみた この記事の内容 MCP(Model Context Protocol)の公開サーバーを使って、AIと外部サービスを連携させる実験を行いました Claude DesktopとPlaywright MCPサーバーを組み合わせ、自然言語によるブラウザ操作を試みました VS Code CopilotとAzure MCPサーバーを連携させ、Azureリソースの操作を試みました 基本操作は成功する一方、Webスクレイピングなど複雑な操作では限界も見えてきました 現時点での各MCPサーバーの実用性について、率直な考察をまとめています はじめに:MCPサーバーとは AIと外部の世界を繋ぐプロトコル「MCP(Model Context Protocol)」をご存知でしょうか。MCPの公式リポジトリには、リファレンスサーバーやサードパーティ製サーバーが数多く公開されており、以前よりも選択肢が増えています。
今回はその中から、ブラウザ操作を可能にする「Playwright」や「Azure」「Slack」のMCPサーバーをピックアップし、AIと連携させて何ができるのかをのんびり試していきます。
挑戦1:Claude DesktopとPlaywrightでブラウザ操作を自動化する 最初の挑戦として、Anthropic社のAI「Claude」のデスクトップアプリと、ブラウザ操作ツール「Playwright」をMCPで連携させてみます。無料プランのClaudeでどこまでできるのか、試していきましょう。
セットアップの手順 まずは環境構築から始めます。PlaywrightのMCPサーバーを動かすには、PC上でJavaScriptの実行環境である「Node.js」が必要です。Node.jsをインストールすると、npmというコマンドが使えるようになります。
今回は、npmパッケージを一時的にインストール・実行できるnpxコマンドを使ってみます。npxを使うと、グローバル環境を汚さずにツールを試せるので便利です。
npx @mcp/playwright-server しかし、この方法ではJSONのエラーが発生してしまいました。原因は不明でしたが、ひとまずnpmコマンドでグローバルにインストールする方法に切り替えます。
npm install -g @mcp/playwright-server 次に、Claude DesktopアプリにMCPサーバーを認識させます。設定ファイル(claude-desktop-config.json)に、インストールしたサーバーの起動コマンドを追記します。
{ "mcp_servers": [ { "command": "npx", "args": [ "-y", "@mcp/playwright-server" ] } ] } 補足: -yオプションは、npxがパッケージをインストールする際の確認プロンプトに自動で「Yes」と答えるためのものです。
この設定を保存してClaude Desktopを再起動すると、チャット画面の右下に金槌のアイコンが表示され、MCPツールが利用可能になったことが確認できます。
実践:自然言語でブラウザを動かす セットアップが完了したので、早速Claudeにブラウザ操作を依頼してみます。
指示内容:
google.comにアクセスして「(自分の苗字)」を検索し、1つ目のリンクをクリックしてそのサイトにアクセスしてください。
この指示に対し、ClaudeはPlaywrightツールを使い始めました。途中、ロボットでないことの証明(CAPTCHA)を求められましたが、AIが画像認識で信号機のタイルを選択し、無事にクリアしています。その後、検索結果の1番目のリンクをクリックし、目的のサイトへのアクセスに成功しました。
...