最近のMCPは難しくない。AI Editorは外部サービスのAPI Keyを入力するだけですぐに情報を取得できる。
最近のMCPは難しくないので、MPCの概念を簡単に説明し、「こんなに簡単にAI Editor(例: Cursor, Windsurf, etc.)と他のService(例: Figma, GitHub, Slack, etc.)が連携できるんだ」というところを説明する。
今回はServiceの具体例としてFigmaで考える。
Summary
従来のMCPのセットアップ
手動でMCP Serverのコードを実行したり、AI Editorと接続したり、難解で面倒だった。
最新のMCPのセットアップ
今では、AI EditorにFigmaなどのServiceのAPI Keyを入力するだけで、AI EditorがそのServiceの情報を取得できるようになり、MCPのセットアップが格段に簡単になった。
本編
Figmaのデザインを確認するには？
-
人間の場合:
Figmaのアプリを開くとデザインを確認できる。 -
コードの場合:
Figma APIを使い、デザイン情報を取得する。
AI EditorとAPI連携の課題
AI Editor(Cursor、Windsurf, etc.)もAPI経由で他のServiceの情報は取得可能だが、複数のService（Figma、Slack、GitHub, etc.）のAPI仕様を個別に扱うのは面倒。
MCP（Model Context Protocol）の登場
MCPは、AI Editorと各Serviceの間に共通の接続規格（USBのような役割）を提供し、連携を簡単にする。2024年11月にAnthropic社（Claudeの開発元）によって公開された。
MCPのセットアップ
従来の方法:
GitHubからMCP Serverのコードをcloneし、ローカルでMCP Serverを起動する。その際、API Keyなどを環境変数として設定する。MCP Clientとの接続のために、SSEなどの設定を個別に行う。
例えばこれがFigma用に開発されたMCP Serverの例。
これだとやはり初期設定が複雑に感じる。
新しい方法: jsonでのセットアップ
MCP Serverのclone不要。
AI Editorにjsonのconfigurationを渡すと、AI Editor内で勝手にMCP Serverを起動してくれる。
{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": ["figma-mcp"],
"env": {
"FIGMA_API_KEY": "<YOUR_API_KEY>"
}
}
}
}
なぜ事前にローカルにコードをcloneする必要がないかはシンプルで、「npxコマンドを使えばローカルにないnpm packageを実行しようとしたときに自動でインストールしてくれる」というnpxの特徴を利用している。
重要なのは、これがAI Editorに渡すjsonであること。つまり、AI Editor側でMCP Serverを起動してくれる。よって、そのままAI EditorのMCP Clientとの接続までやってくれる。
このjsonのフォーマットはClaude Desktopが定義したが、CursorもWindsurfも同じフォーマットを採用しているので、基本的には有名どころのAI Editorはこの方法が使える。
図にすると以下のようになる。
これにより、MCP Clientが自動的にサーバーを起動・接続してくれるようになったので、格段にセットアップが楽になった。
最新の方法: API Keyを渡すだけ
jsonでのセットアップだが、ユーザーごとに変更する部分はAPI Keyの部分だけ。
つまり、AI Editorが「API Keyを入力すれば、jsonの部分はこちらで作成しておくよ」としてくれれば、各ユーザーはそれぞれのサービスのAPI Keyを入力するだけで良くなる。
Windsurfは、まさにこのためのUIを実装した。
これが最新のMCPのセットアップ方法となっている。
つまり、MCPなんて言葉を知る必要もなく、ただWindsurfのEditor上のUIでFigmaのAPI Keyを入力すれば、WindsurfがFigmaのデザインを確認できるようになった。
まとめ
従来のMCPのセットアップは、手動でのコードのcloneや個別設定が必要で面倒だった。
しかし今では、統一されたjsonのフォーマットとAI Editor上のUIの改善により、API Keyを入力するだけで自動的にMCPサーバーが起動・接続され、AI EditorがFigmaなどのサービスの情報をシームレスに取得できるようになった。
これにより、MCPの導入は非常にシンプルで直感的なものになり、AI Editorが外部サービスのデータを読み取るハードルが大幅に下がってきた。
Discussion