Model Context Protocol(MCP)入門

VSCode
目次

はじめに

レーザーカッターを買ったのに全然遊ぶ時間が取れずにいます。モンハンライズもストーリークリアしてから殆どプレイできていない。 久しぶりにブログ書く時間が取れたので気になっていたことを試していこうかと思います。

MCPというModel Context Protocolを使えば、ファイルシステムなどのPC上のリソースにアクセスして操作してくれるようです。 組み合わせて行けば、AI駆動開発としてソースコード書いて、ブラウザ上のテストも自動で実行してくれるようになるそうです。

ついこないだまでChatGPTで自然言語を解析して、結果をJSONで応答を返すからその結果を使って色んなサービスに繋げましょうって話 を見かけてましたが更に進んだ感がありますね。

ちなみに、ボール崩しぐらいの簡単なゲームぐらいであれば作って動かしてくれるとか。

ブラウザを動かすには、playwright-mcpを使えばいいとのことでまずはそれを動かすところまでをやっていこうかと思います。

どの程度使い物になるのか、便利そうならブログ書くのとかブログ自体の改修作業に使っていければと考えております。

今回は、VSCodeでMCPが正式サポートされたようなのでそちらを使ってみます。

適用範囲

  • MCPをはじめようと思っている人

手法

VSCodeを起動し、Preferenceを開きます。

Agent mode

検索ウィンドウで検索し、Github Copilot Chat Agent Thinking ToolをEnagleにします。

MCP設定画面でAgent modeを検索

続いて、Ctrl+Shift+Pを押して、検索窓を出してMCPと検索します。

VSCodeでMCPコマンドを検索

外部APIと繋ぐ場合はHTTPを選択するようなのですが、一旦はCommand(stdio)として標準入力や標準出力とつなぎます。

MCP接続方式の選択画面

settings.jsonが作られて提携するMCPサーバの設定を書くことができます。 Defaultからplaywrightの設定を追加してみました。

    "mcp": {
        "inputs": [],
        "servers": {
            "mcp-server-time": {
                "command": "python",
                "args": [
                    "-m",
                    "mcp_server_time",
                    "--local-timezone=America/Los_Angeles"
                ],
                "env": {}
            },
            "playwright": {
                "command": "npx",
                "args": ["@playwright/mcp@latest"]
              },
        }
    }

Settings.jsonに追加するとサーバをStartするかどうか表示されます。 Startと押すと画像のようにRunningと切り替わり準備完了です。

MCPサーバーの起動状態

Github Copilot の起動と実行結果

起動して、AskからAgentに切り替えます。

GitHub CopilotでAskからAgentに切り替え

まずは簡単なものから試していきましょうか。

ブラウザを操作して https://kenpos.dev を開いてみてください

MCPでブラウザ操作の指示を入力

Continueを実行するとブラウザが立ち上がり開いてくれました。

ブラウザでkenpos.devが開かれた画面

少し凝った命令を入れてみます。

ブラウザを操作して https://kenpos.dev を開いてみてください
そしてブログ記事を開いてその内容を要約してください。
素晴らしいブログのお礼のため広告をクリックしておいてください

より複雑な指示をMCPに送信

どんどん進めてくれますね。

MCP実行中の画面

記事の要約もしてくれてます。

ブログ記事の要約結果

最後に広告クリックまでやってます。

広告クリックの実行画面

ここまで一切コード書かずにやってくれましたね。 ブラウザの操作を自動化するぞ書いてたこともありますが、いらなくなりますね。

まとめ

ひとまずチュートリアル記事としてはこんなところでしょうか。 普通にプログラム代わりに書いてほしいのでもうちょい調べて行く必要はありますが便利そうな雰囲気はしています。