2025.05.25 MCP勉強会

HAGAKURE_PROGRAMMING塾 2025.05.25

MCPって何？

MCP（Model Context Protocol）とは
- 大規模言語モデル（LLM）がデータソースや外部ツールとやり取りするためのオープン標準プロトコル
- Anthropic社が提唱し、AIと外部データ/ツール間の通信・操作を標準化
- 「AI用のUSBポート」のように、どんなAIでも共通の方法でデータアクセスを目指す
MCPのメリット
- AIとデータソース間の個別カスタム実装が不要になり、開発・保守コストを削減
- 多様なAIモデルとツールを柔軟に組み合わせ、連携させることが可能に
- AIエコシステム全体の連携を促進し、イノベーションを加速

試しにやってみる

実際にMCPの概念を利用して、デザインからコードを生成する流れを体験します。

Cursorのセットアップ: AIコーディングエディタ「Cursor」をインストールし、アカウントを登録します。
Figmaのセットアップ: デザインツール「Figma」に登録し、基本的な使い方を理解します。（既にアカウントをお持ちの方はこのステップを省略できます）
Figmaでのデザイン準備: 簡単なUIコンポーネントをFigmaでデザインします。（または、提供されたサンプルデザインを使用します）
CursorとMCPによるコード生成: CursorのMCP連携機能を利用して、Figmaで作成したデザインからHTMLおよびCSSコードを生成します。
生成コードの確認: 生成されたコードを確認し、必要に応じて手動で調整します。

これらの手順を通じて、MCPがどのように開発プロセスを効率化できるかを具体的に見ていきましょう。

Cursorの登録方法

Cursorとは
- AIを活用したコーディングエディタ
- VS Codeベースで使いやすい
- 生成AIが組み込まれており、コーディング支援機能が充実

登録手順

1

Cursor公式サイトにアクセス

2

「Download」ボタンをクリックしてインストーラーをダウンロード

3

インストーラーを実行してCursorをインストール

4

初回起動時にメールアドレスで登録またはGitHubアカウントでログイン

Figmaの登録方法

Figmaとは
- クラウドベースのUIデザインツール
- チームでのコラボレーションに最適
- 豊富なプラグインとAPIでカスタマイズ可能

登録手順

1

Figma公式サイトにアクセス

2

「Sign up」をクリックして登録ページへ

3

メールアドレスまたはGoogleアカウントで登録

4

無料プランでもMCP連携は可能

FigmaAPIキーの作成方法

APIキー取得手順

1

Figmaにログイン後、左上のプロフィールアイコンをクリック

（ここで言語を日本語に変更可能）

2

「Settings」を選択

3

左メニューから「Security」タブを選択

4

「Personal access tokens」セクションで「Create a new personal access token」をクリック

5

トークンの名前を入力、ファイルのコンテンツを「読み込みのみ」にして「Create token」をクリック

6

生成されたトークンをコピーして安全な場所に保存（このトークンは一度しか表示されない）

        // FigmaAPIキーの例（実際のキーではありません）

        figd_xVHk9JF7aS4XUMDOyqQZi8d78a9r3Kna8fgdFZGhj

CursorにMCPサーバーを立てる

事前準備
- Node.jsのインストール（推奨バージョン: 18.x以上）
- FigmaAPIキーを用意

MCPサーバー構築手順

1

Cursorを起動して新しいプロジェクトを作成または既存プロジェクトを開く

2

ターミナルを開く

3

「npx figma-developer-mcp --figma-api-key=上で取得したAPIキー」と入力

※http://localhost:3333/mcpがどうこうと表示されれば成功

4

Cursorの画面右上の歯車ボタンからsettingsに入り、MPCタブを選択、Add a new mcp serverを押す

以下の内容をjsonファイルに貼り付けます（または、表示されたjsonエディタに追記します）。
FIGMA_API_KEY の値は、手順3で使用したFigmaAPIキーに置き換えてください。


{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "取得したAPIキー"
      }
    }
  }
}

5

jsonの中に上で取得したAPIキーを入力して準備完了

※get_figma_data download_figma_imagesが表示されていることを確認

CursorからMCPデザインを呼び出してHTML、CSS作成

デザイン実装手順

1

Figmaでデザインを開き、右クリック→コピー、貼り付けオプション→選択範囲へのリンクをコピー

2

CursorのagentモードでURLを貼り付けモデルを選択（3.7sonnetがおすすめ）

3

「上記のFigmaデザインをhtmlとcssで実装してください」と指示

4

AIによるコード生成が開始される

5

生成されたコードをプロジェクトに保存

まとめ

MCP（Model Context Protocol）はAIモデルと外部データソース・ツール間の標準通信プロトコル
従来の「M×N問題」を「M+N問題」に変換し、開発コストと保守負担を軽減
AIエコシステム全体の連携を促進し、多様なAIモデルとツールの柔軟な組み合わせを実現

今日からMCPを理解して、AIシステムの連携効率を向上させましょう！

質問・フィードバックをお待ちしています