
こんにちは、株式会社スプールのWebディレクターの高橋です。
弊社ではユニフォームなどのオーダー製品を、ユーザーがWeb上でカスタマイズしてオーダーできるシステム「MyCOS(マイコス)」を提供しています。
最近生成AI界隈で話題の「MCP(Model Context Protocol)」ですが、社内でテストに使えないか、という話題が上がったため、今回はMCPについて詳しく調べるとともに、実際の利用について考えてみました。
MCPとは何か?
MCP (Model Context Protocol) は、大規模言語モデル(LLM)と外部ツールやデータソースを、標準化された方法で接続するためのオープンプロトコルです。
難しく聞こえますが、簡単に言うと、「AIと外のデータやツールがスムーズに話せるようにするための共通のルール」のことです。
MCPは、「AIアプリのUSBポート」
その設計思想からMCPは、「AIアプリのUSBポート」に例えられます。
AIアシスタントを外部システムを、統一された方法で接続できるプラグインシステムとして、インフラ的な位置づけになります。
MCPは誰が提唱した?
2024年にAnthropic社(Claudeの開発元)によって提唱・公開されました。
AIシステムが、「さまざまなデータソースやツールと効率的かつ安全に連携できるようにすること」を目的としています。
MCPを利用するメリット
MCPを利用すると、AIアシスタントをさまざまな外部システムと安全かつ双方向に連携させることができます。
AIアシスタントが従来はアクセスできなかった外部システムにアクセスし、双方向のやり取りが可能になります。
MCPサーバーとは?
MCPサーバーは、AIシステム(例えば、チャットボットやアシスタント)と外部ツールやデータをつなぐ小さなプログラムのことです。
- AIシステムが必要な情報を外部から取ってきたいとき、その情報がどこにあるか(例えば、GitHubやSlack)を知っているのがMCPサーバー
- MCPサーバーは、AIのリクエストを受けて、実際に外部のツールやデータを操作する
- 例えば、「GitHubでこのリポジトリのIssueを探して」というリクエストがあれば、MCPサーバーはGitHubのAPIを使ってその情報を取得し、AIに返す
要はAIに、ローカルファイルや外部データの読み書き、ブラウザ操作など様々な機能を追加できるプラグインみたいなもの、というイメージです。
MCPサーバーの主なポイント
役割
- MCPサーバーは、外部データをAIに提供する「橋渡し」のような存在
- 各MCPサーバーは特定のツール(GitHubやSlackなど)と連携し、AIに必要な操作を代わりに行う
独立して動作
- 各MCPサーバーは、特定のツールの操作を担当する「小さなサービス」として動く
- 例えば、GitHub用のMCPサーバーはGitHubの操作だけを担当し、Slack用のMCPサーバーはSlackの操作だけを担当する
安全性
- 外部ツールにアクセスする際、認証情報(APIキーなど)をAIに渡すことなく、MCPサーバー内で安全に処理される
プログラミング言語
- MCPサーバーは、様々なプログラミング言語で作成可能で、一般的にはHTTPを使ってデータをやり取りする
カスタム対応
- もし既存のツールでは対応できない場合、企業や開発者は独自にMCPサーバーを作成できる
MCPサーバーの例
GitHub MCPサーバー | GitHubのリポジトリを操作したり、Issueを管理したりする |
Slack MCPサーバー | Slackのメッセージを送信したり、チャンネルの情報を取得したりする |
Memory MCPサーバー | AIが覚えた情報を保存して、後で使えるようにする |
MCPサーバーは、AIが外部ツールやデータとスムーズに連携できるようにするための重要な仕組みです。
MCPサーバーを立てる方法
MCPサーバーは公式・非公式を含め多くがオープンソースで公開されており、自分で立てて利用することができます。
Anthropic社の公式GitHubリポジトリには代表的なMCPサーバーの実装集が公開されており、ファイル操作や検索、GitHub・Slack連携、データベース接続など様々なサーバーのソースコードとセットアップ方法が提供されています。
MCP自体は「インフラ・仕組み」の部分
MCPはあくまでもモデル×外部機能を連携させるための“標準インターフェース”です。
コアはAIを外部連携させたうえで、「どのような業務プロセスをどう最適化するか」にあります。
Claude × Playwright MCPの連携概要
今回のシナリオ
今回は、MCP対応のLLM(例:Anthropic Claude3.7 sonnet)に対して、「人間が日本語などの自然言語でテスト内容を指示する→AIモデル(Claude)がその指示を解釈→ブラウザ操作やAPIコールなどを自動テストとして実行」を想定します。
AIモデルとMCPを活用すれば、テストコードを書かずとも複雑なE2Eテストを行える可能性があるので、期待大です。
LLM (MCP対応AIモデル)
現状ではAnthropic社のClaudeが代表例です。ClaudeはMCP経由で外部ツールを呼び出すことができ、指示の解釈とテストフローの制御、結果の要約生成を担います。ChatGPTも将来的にMCP対応が予定されているとの情報もありますが、現時点ではClaudeが実績豊富です。
Claude DesktopアプリかClaude APIのどちらかを使います。
Cursorなどのエディタで利用する場合は、Claude APIを利用する形になります。
AIモデル(Claude)がチャット内で特定のフォーマットでコマンドを発行し、MCPサーバーがその指示を実行、結果を再びClaudeに返す想定です。
ブラウザ自動操作ツール (MCPサーバー)
WebアプリのUI操作には、PlaywrightをMCPに対応させたツールを利用します。(Playwrightとは、Microsoftが開発したブラウザ自動化フレームワークです)
Playwright MCPは、Playwrightを使用してブラウザ自動化機能を提供するMCPサーバーです。
ページのアクセシビリティツリー(構造化データ)を取得してLLMに提供するため、画像認識なしで安定したUI操作が可能です。
Playwright MCPはブラウザ内のJavaScript実行、スクリーンショット取得、ページ遷移といった操作が可能です。また、APIエンドポイントの呼び出しや検証もシームレスに行えるよう設計されています。UIだけでなくバックエンドAPIのレスポンスチェックも同じフレームワークで実現できます。
参考:
https://github.com/microsoft/playwright-mcp/blob/main/README.md
その他のMCP対応ツール (必要に応じて)
テスト内容によっては、ファイルシステムアクセス(例: テスト用のファイル読み書き)、データベース接続、外部サービス連携などが必要になる場合もあります。
そのような場合、Anthropicの公式リポジトリやコミュニティによって提供されている各種MCPサーバ(GitやGoogle Drive、Postgres、Slack連携など)が利用可能です。
APIテスト専用にHTTPリクエストを送るMCPサーバや、データベースの状態検証用のMCPサーバを組み合わせることで、より包括的なテストシナリオをカバーできます。
テストにかかるコスト
MCPの仕組みを使い、モデルから外部データにアクセスしてタスクを事項する場合、当然ですがモデルの利用料金や、Cusorなどを使用してAPI経由で利用する場合はAPIコールとトークンにかかる料金が発生します。
まとめ
今回はMCPの理解と、実際の技術スタックを検討しました。
実際にMCPの設定を行い、実用可能か検証したいと思います。
今回まとめてみた見えてきたことは、MCPはすごいけど、それ単体で意味を成すものではなく「何をしたいか」「どんな業務を効率化したいのか」が先にあるということです。
また便利だからと言って、なんでもAIでやろうとすると逆に手間がかかったりするので、本当に業務の負担になっているコアな部分だけ対応する・そもそもの仕事自体を減らせないか考えるなど、切り分けが重要だと感じました。
参考記事:
https://qiita.com/ore88ore/items/106c851e56631045fe25#:~:text=Image%3A%20image
最後に
弊社では、外部データ連携を含む、カスタムオーダーシミュレーターやデザインシミュレーターの開発・構築を行っています。
オーダー製品のシミュレーターをご検討中の場合は、ぜひ一度ご相談ください。
▼ユニフォームに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS(マイコス)」
▼アイテムやグッズに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS GOODS(マイコスグッズ)」
▼3Dモデルを利用したカスタムオーダーシミュレーター
3Dシミュレーターシステム「MyCOS 3D(マイコススリーディー)」