はじめに
みなさんこんにちは。インプルの岩崎です。
LLMやAIエージェントについて学んでいる人は、一度は聞いたことがあるであろうMCPという言葉。今日はMCPについてじっくり理解・触ってみた、という内容になります。
私自身、まだまだ初心者で理解も浅いですが、逆に初心者レベルの理解で読みやすい記事かもしれません。知識を深めたい人、一緒に頑張っていきましょう！
MCPを理解する
そもそもMCPとは？
MCPとは、Model Context Protocol の略称で、アプリケーションが LLM にコンテキストを提供する方法（コミュニケーションする方法）を標準化するオープンプロトコルです。
よく、USB-Cのようなものだと例えられていますよね。詳しくは、こちらの公式ドキュメントに記載があります。
MCPを構成するもの
MCPは「MCPホスト」「MCPクライアント」「MCPサーバー」の３つが連携してAIどうしの連携を助けています。それでは、これらが同連携しあってMCPというのはどうさしているのでしょうか？
MCPホスト
まず最初に、MCPの入口でもあるMCPホストについてです。
この後紹介するMCPクライアントとMCPサーバーの間をつなぎ、通信やデータのやり取りを制御する役割を果たします。ユーザーは、このMCPホストに対して、操作やアプリのリクエストを受け、適切なサーバーに渡す制御をします。
CursorやDevinなどは、このMCPホストを持っているということです。
MCPクライアント
続いて、ホストの指示を受けて動作するMCPクライアントについてです。
このあと紹介するMCPサーバーに対して、「こういう情報が欲しい」「こういう操作をしてほしい」とJSON-RPCでリクエストします。JSON-RPCについては、後ほど紹介しますね！
Devinの内部でFigmaに対してフレーム情報を取得するリクエストを送る部分や、Cursorの内部で外部ツールにデータ取得を頼む部分に当たります。
MCPサーバー
最後に、クライアントの指示を受けて答えを返すMCPサーバーについてです。
このMCPサーバーは、クライアントから受ける指示に対しての知識や答えを持っており、クライアントからのJSON-RPCリクエストを受け取り、結果を返す役割を果たしています。APIやデータベースとつながっていることが多いです。
Figma MCPサーバーや、Git MCPサーバーのような、〇〇サーバーと呼ばれるのがこれに当たります。
ここまでのまとめ
[ ユーザー ]
↓ 操作
[ MCPホスト ] ← 内部に → [ MCPクライアント ]
↓ JSON-RPC
[ MCPサーバー ]
↓ 結果返却
[ MCPクライアント ] → [ MCPホスト ] → ユーザーに表示MCPの仕組み
MCPの仕組みを理解する上で重要になってくるのは、プロトコル層とトランスポート層です。
ネットワーク通信で用いられる用語、わからん！という人も多いと思います。私もそうでした笑。ですが、ここの理解をすっぽかしてしまうと、接続するときにうまくいかず、疲れちゃいますので、頑張って理解しましょう笑
プロトコル層
プロトコル層では、MCPの通信内容や書き方のルールを定義します。日本語なのか、英語なのか、はたまたモールス信号なのか、のような感じです。
MCPでは、JSON-RPC 2.0というJSON形式で書かれたものをやりとりしています。JSON形式で書かれた内容を送り、それに対してJSON形式で書かれたものを返す、ということです。例えば、下記のようにやり取りをしています。
# 取得したい情報をJSONで送る
{
"jsonrpc": "2.0",
"method": "list_secrets",
"id": 1
}
# サーバーは結果をJSONで返す
{
"jsonrpc": "2.0",
"result": ["API_KEY", "TOKEN"],
"id": 1
}
トランスポート層
トランスポート層では、プロトコル層で決められたJSON形式の会話の届け方を定義します。郵便なのか、メールなのか、電話なのか・・・、といった感じです。
これには、主に次の３つの届け方があり、MCP連携するAI同士、この届け方を合わせてあげなければいけません。
- HTTP(S)
最も一般的。クライアントがHTTP POSTでサーバーにリクエストを送り、レスポンスを受け取る。単発のやり取りに向く。 - SSE（Server-Sent Events）
サーバーからクライアントへ一方的にメッセージを送り続けられる仕組み。リアルタイム通知やイベント更新に向く。 - Studio（またはIDE内連携）
特定のアプリ（例：Cursor, VS Code拡張）内でMCPクライアントを動かし、内部通信でやり取りする方式。ユーザーが意識せず使えるのが特徴。
MCPを動かすための準備
それではここまでの理解を通して、MCPを動かしてみたいと思います。
と言っても、サーバーを自作する知識はまだ無いに等しいので、今回は各アプリケーションでMCPが公開されているMCPマーケットプレイスなどを使って、触ってみましょう。
（次回以降、自作して欲しいものをとってきたり・・・などできたらいいですね。）
今回つなげるMCP
今回は、FigmaとCursorをMCPで繋げてみようと思います！
これができることにより、Figmaで作ったデザインを書き出す手間もなく、フレームのURLを指定するだけで動かすことができるようになるんです。とても便利ですよね。まだFigmaのMCPサーバーは、オープンベータ版ですが、どんどん使っていきましょう！
今回つくるもの
今回は、こちらのデザインのTOP画面を実装してみようと思います。（見覚えがありますね笑）
そう。以前フルスタック開発の際にデザインをしたひとことネタアプリのスマホ版です。まだ記事をみられてない方がいれば、ぜひご覧ください！
Figmaの準備
つなげるにあたって、Figamaはどうしても課金が必要になります。
プロフェッショナル、ビジネス、またはエンタープライズプランのDevまたはフルシートで利用できます。また、デスクトップアプリからでしか、今回のMCPは利用できません。
左上のフィグママークのボタンから、基本設定 > Dev Mode MCPサーバーを有効にする にチェックが入っていることを確認してください。これを有効にすると、先程のMCPサーバーが起動します。
そして、今回はTOP画面の実装になりますから、それをコピーします。
真ん中にある</>のマークをON（緑色）にします。この状態が、DevModeです。この状態で、フレーム名を右クリックし、選択範囲へのリンクをコピーをクリックします。これで、フレームのリンクを取得できました。
Figma側の準備は以上で終了です。続いて、Cursorの設定を進めていきましょう。
Cursorの準備
Cursorは、基本的に課金の必要はありません。（コード生成には必要になってきますが！）
Cursor > 基本設定 > Cursor Settings で、Cursorの設定画面を開きます。
すると、次のような画面が開きますから、左側の Tools & Integrations から、Add CustomMCPをクリックしてください。
すると、自動的にJSONファイルが起動しますから、そこに次のように入力していきましょう。これが先程説明したJSON-RPC 2.0というJSON形式で書かれたものですね。
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}これで保存をすると、先ほどの Tools & Integrations は自動的に更新され、MCP Toolsの欄にFigmaのMCPが追加されます。いよいよ動作しそうですね！！
MCPを動かしてみよう！
それでは準備もできたので、Figma MCPサーバーからデザインの情報をもらってCursorで実装してみましょう。
先程FigamのデザインファイルでコピーしたURLをチャット欄に貼って、実装する指示をだします。
すると、指示を受け実装を開始しました！
確かにSUHI-SAY neoの画面が確認できていますね。しっかりとMCPサーバーからデザインファイルの情報を持ってくることができたようです。素晴らしいですね！
その後、コードの生成が始まり、画面の実装へ問題なく入りました。そして、数分で実装が終了しコンプリートの画面が出ました！
まとめ
今回はMCPの理解を通して、実際にMCPを動作させてみました。AI同士が連携することで、ますます便利になりますね！
しかし、まだまだMCPについての理解や、APIとの違いについて理解が浅いです。今後、そのあたりの知識も深めていき、さらなるレベルアップをしていきたいですね。
今回作ってもらったコードは、GitHubにありますので、MCPで作られたコードをぜひご覧ください！
ご覧いただき、ありがとうございました。