Model Context Protocol(MCP)入門

はじめに

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

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

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

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

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

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

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

適用範囲

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

手法

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

Agent mode

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

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

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

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と切り替わり準備完了です。

Github Copilot の起動と実行結果

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

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

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

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

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

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

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

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

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

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

まとめ

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