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番目のリンクをクリックし、目的のサイトへのアクセスに成功しました。

さらに、サイトの内容を要約して教えてくれたり、スクリーンショットを撮影してPCのダウンロードフォルダに保存したりもしてくれました。縦長のページもすべて収まるように撮影されており、非常に便利な機能です。

課題：複雑な指示への挑戦と限界

基本的な操作は成功しましたが、より複雑な指示ではどうでしょうか。

指示内容：

Googleで最新のAIニュースを検索し、出てきた記事の中からクイズを1問作成して出題してください。

この指示では、AIはニュースサイトへのアクセスや記事内容の解析に失敗し、何度も処理が中断してしまいました。特定のサイトの構造に依存する操作は、まだ難しいようです。

続いて、Amazonで商品を検索させる指示も試みました。

指示内容：

Amazonで1万円以内で買えるおすすめガジェットを3つ探して、ランキング形式で紹介してください。ブラウザで直接アクセスして探してください。

AIはAmazonにアクセスして検索を実行しましたが、検索結果のHTML構造を正しく解析できず、商品情報の取得には至りませんでした。AIがページの構造を「勘」で推測してセレクターを生成しているようで、これが失敗の原因となっているようです。

無償版のClaudeを利用していることも影響しているかもしれませんが、現状のMCP連携では、Webサイトの構造に依存する複雑なスクレイピングはまだ安定しないという印象です。

挑戦2：VS Code CopilotとAzure MCPサーバーの連携

次に、VS Codeに統合された「GitHub Copilot」と「Azure MCPサーバー」の連携を試します。

セットアップと実践

Azure MCPサーバーもnpxコマンドで簡単に起動できます。Copilotのエージェントモードで、Azureリソースの操作を依頼してみましょう。

指示内容：

List my Azure Storage Containers.

しかし、CopilotはMCPサーバーを使わず、Azure CLI（azコマンド）を直接ターミナルで実行しようとしました。Copilotが元々ターミナル操作能力を持っているため、あえてMCPサーバーを経由する必要がないと判断したようです。

そこで、MCPサーバーの利用を強制する指示を追加しました。

指示内容：

Azureでリソースグループの一覧を表示してください。ターミナルは使用せず、MCPサーバーを使ってください。

すると、Copilotはmcp group listという、MCPサーバーで定義されたツールを使い始めました。これは成功です。ただし、認証情報の問題が発生し、サブスクリプションIDとテナントIDを求められました。IDを伝えると、最終的にリソースグループの一覧を取得することに成功しました。

考察：Azure MCPサーバー経由のメリットは？

Azureの操作に関しては、MCPサーバーを経由する実用的なメリットは現時点ではほぼ感じられませんでした。Azure CLIが充実しており、Copilotもそれを熟知しているため、ターミナルで直接コマンドを実行する方がはるかに効率的です。現段階では「できるから作ってみた」という実験的なツールという印象です。

まとめ

今回はMCP（Model Context Protocol）を使って、公開されている各種MCPサーバーとAIを連携させる実験を行いました。

Playwright MCPサーバー：シンプルなブラウザ操作（ページ遷移・クリック・スクリーンショット）は問題なく動作しました。一方、複雑なWebスクレイピングや動的なページ解析は現時点では安定しておらず、改善の余地があります
Azure MCPサーバー：リソース情報の取得自体は成功しますが、Azure CLIという強力な代替手段があるため、実用的な優位性を感じにくい状況です。AIがCLIを直接実行できる環境では、MCPサーバーの出番が少なくなりがちです

MCPエコシステム自体はまだ発展途上ですが、公開サーバーの数は着実に増えています。今後のアップデートで精度や安定性が向上すれば、AIによる外部サービス連携の可能性はさらに広がるでしょう。引き続き注目していきたい技術です。