【MCP】MCPで開発環境が無限に拡張する話 - GitHub、Notion、Slack、Figmaまで全部つながる！

はじめに - Cursorだけでは物足りない？

前回の記事でCursorの基本機能を紹介しましたが、「Cursorだけでコーディングするのは、まだ氷山の一角」ということをご存知でしょうか？

実は、Cursorには**MCP（Model Context Protocol）**という革新的な拡張機能があり、これを使うことで：

✅ GitHubのissueを自動作成
✅ NotionのドキュメントをAIが参照
✅ Slackに開発進捗を自動報告
✅ Figmaデザインからコード生成
✅ データベースを直接操作
✅ AWSリソースを管理

など、開発に関わるあらゆるツールとCursorが連携できるのです。

この記事では、MCPの基礎から実践的な活用方法まで、具体例を交えて徹底解説します。

MCPとは？ - 開発環境の「USB-C」

MCPの正体

**MCP（Model Context Protocol）**は、AIモデルと外部システムを接続するためのオープンな標準プロトコルです。

簡単に言えば：

「AIエディタをあらゆるツールと繋ぐための共通規格」

パソコンにUSB-Cを挿せばどんな機器でも繋がるように、MCPを使えば、どんなツール・サービスでもCursorから利用できるようになります。

MCPの仕組み

MCPは3つの要素で構成されています：

┌─────────────┐
│   Cursor    │ ← MCPホスト（AIエディタ）
│ (MCPホスト) │
└──────┬──────┘
       │ MCPプロトコル
       ↓
┌─────────────┐
│ MCPサーバー  │ ← 各種ツールとの橋渡し役
│  (GitHub)   │
└──────┬──────┘
       │ API呼び出し
       ↓
┌─────────────┐
│   GitHub    │ ← 外部サービス
│  (本体)     │
└─────────────┘

1. MCPホスト：Cursor（AIエディタ）
2. MCPサーバー：各種ツールとの橋渡し役
3. 外部サービス：GitHub、Notion、Slackなど

なぜMCPが革命的なのか

従来の方法	MCP使用後
手動でGitHub開く	AIが自動でPR作成
Notionをコピペ	AIが直接参照
Slackに手動報告	AIが自動投稿
Figmaを見ながらコーディング	デザインから自動コード生成
ツールごとに別操作	Cursor内で全て完結

つまり：

• エディタとツールの行き来が不要
• 手作業が激減
• 開発フローが途切れない
• 生産性が飛躍的に向上

Cursorで使える主要MCPサーバー11選

現在、500種類以上のMCPサーバーが公開されています。その中から、特に実用的なものを厳選して紹介します。

【カテゴリ1】バージョン管理・コード管理

1. GitHub MCP Server

何ができる：

• ✅ リポジトリの検索・閲覧
• ✅ Issue、Pull Requestの作成・管理
• ✅ コードレビューの自動化
• ✅ コミット履歴の分析
• ✅ ブランチ操作

こんな時に便利：

開発者：「このエラーについてIssueを立てて」
→ AIが自動でIssue作成

開発者：「mainブランチとの差分を確認して」
→ AIがコードを比較・分析

開発者：「feature/auth-impl ブランチを作成して」
→ AIがブランチを自動作成

導入難易度： ★★☆☆☆
公式リポジトリ： modelcontextprotocol/servers

---

【カテゴリ2】ドキュメント・ナレッジ管理

2. Notion MCP Server

何ができる：

• ✅ Notionページの読み取り
• ✅ 新規ページの作成
• ✅ データベースの操作
• ✅ タスクの自動管理
• ✅ ブロックの追加・編集

こんな時に便利：

開発者：「Notionの"プロジェクト仕様書"を参照して実装して」
→ AIがNotionのドキュメントを読んで実装

開発者：「今日のタスクをNotionに追加」
→ AIがタスクを自動登録

開発者：「実装完了したので、Notionのステータスを更新」
→ AIが自動でステータス変更

導入難易度： ★★★☆☆
公式リポジトリ： @makenotion/notion-mcp-server

---

【カテゴリ3】デザインツール

3. Figma MCP Server（公式）

何ができる：

• ✅ Figmaデザインからコード生成（HTML/CSS/React/Vue）
• ✅ デザインコンテキストの抽出（変数、コンポーネント、レイアウト）
• ✅ Code Connectの情報取得
• ✅ デザイントークンの読み取り
• ✅ レスポンシブデザインの自動対応
• ✅ Figma Annotationの理解

こんな時に便利：

開発者：「このFigmaフレームからReactコンポーネントを生成して」
→ AIがデザインを解析してコード自動生成

開発者：「Figmaのデザインシステムの色変数を取得して」
→ AIがデザイントークンを抽出

開発者：「このボタンコンポーネントのスタイルを教えて」
→ AIがFigmaのスタイル情報を取得・説明

開発者：「レスポンシブ対応したコードを生成して」
→ AIがブレイクポイントを考慮してコード生成

実際の活用例：

// Figmaのデザインを指定するだけで…
「Figmaファイル ID: xyz123 の "LoginForm" フレームから
 Reactコンポーネントを生成して」

// ↓ AIが自動生成

import React from 'react';
import styles from './LoginForm.module.css';

export const LoginForm: React.FC = () => {
  return (
    <form className={styles.loginForm}>
      <div className={styles.inputGroup}>
        <label htmlFor="email">Email</label>
        <input 
          type="email" 
          id="email" 
          className={styles.input}
          placeholder="[e-mail]"
        />
      </div>
      <div className={styles.inputGroup}>
        <label htmlFor="password">Password</label>
        <input 
          type="password" 
          id="password" 
          className={styles.input}
          placeholder="••••••••"
        />
      </div>
      <button type="submit" className={styles.submitButton}>
        Log In
      </button>
    </form>
  );
};

// CSS Modulesも自動生成される

導入の注意点：

• Figma Professionalプラン以上が必要（Dev Mode機能を利用）
• Figmaデスクトップアプリでの設定が必要
• Figma APIトークンの取得が必要

導入難易度： ★★★★☆
公式ドキュメント： Figma MCP Server Guide

---

【カテゴリ4】コミュニケーション

4. Slack MCP Server

何ができる：

• ✅ メッセージの投稿
• ✅ スレッドへの返信
• ✅ チャンネル情報の取得
• ✅ ファイルのアップロード
• ✅ メンション機能

こんな時に便利：

開発者：「デプロイ完了をSlackの#developmentに報告して」
→ AIが自動で投稿

開発者：「エラーログをSlackに共有」
→ AIがファイルアップロード

開発者：「@taroにレビュー依頼をSlackで送って」
→ AIがメンション付きでメッセージ送信

導入難易度： ★★☆☆☆
公式リポジトリ： @slack/mcp-server

---

【カテゴリ5】データベース

5. PostgreSQL MCP Server

何ができる：

• ✅ データベースへのクエリ実行
• ✅ テーブル構造の取得
• ✅ データの挿入・更新・削除
• ✅ トランザクション管理
• ✅ インデックスの確認

こんな時に便利：

開発者：「usersテーブルのスキーマを教えて」
→ AIがテーブル定義を取得・説明

開発者：「アクティブユーザー数を集計して」
→ AIがSQLを実行・結果を分析

開発者：「昨日登録されたユーザーのリストを取得」
→ AIがクエリを生成・実行

セキュリティ注意：

• 本番環境のDBには読み取り専用アカウントを推奨
• 重要なデータベース操作は慎重に

導入難易度： ★★★★☆
公式リポジトリ： @modelcontextprotocol/server-postgres

---

【カテゴリ6】ブラウザ自動化

6. Playwright MCP Server

何ができる：

• ✅ Webページの自動操作
• ✅ スクレイピング
• ✅ スクリーンショット撮影
• ✅ フォーム入力の自動化
• ✅ E2Eテストの実行

こんな時に便利：

開発者：「この管理画面の動作確認をして」
→ AIが自動でテスト実行

開発者：「ログインフローが正常に動作するか確認」
→ AIがブラウザを操作してテスト

開発者：「全ページのスクリーンショットを撮って」
→ AIが自動で撮影・保存

導入難易度： ★★★☆☆
公式リポジトリ： microsoft/playwright-mcp

---

【カテゴリ7】クラウドプラットフォーム

7. AWS MCP Server

何ができる：

• ✅ AWSリソースの一覧取得
• ✅ EC2、S3、RDSの管理
• ✅ CloudWatchログの確認
• ✅ IAMポリシーの分析
• ✅ Lambda関数の実行

こんな時に便利：

開発者：「本番環境のログを確認して」
→ AIがCloudWatchからログ取得

開発者：「S3バケットにファイルをアップロード」
→ AIが自動でアップロード

開発者：「EC2インスタンスの稼働状況を教えて」
→ AIがステータスを確認・報告

セキュリティ注意：

• IAMロールは最小権限の原則で設定
• 本番環境での操作は慎重に

導入難易度： ★★★★☆
公式リポジトリ： awslabs/mcp

---

【カテゴリ8】検索・情報取得

8. Perplexity MCP Server

何ができる：

• ✅ Web検索の自動実行
• ✅ 最新情報の取得
• ✅ エラーメッセージの解決策検索
• ✅ 技術ドキュメントの検索
• ✅ 情報の要約

こんな時に便利：

開発者：「このエラーの最新の解決策を調べて」
→ AIが自動検索・要約

開発者：「React 19の新機能を教えて」
→ AIが最新情報を取得

開発者：「Next.js 15のベストプラクティスを調査」
→ AIが複数のソースから情報収集

導入難易度： ★★☆☆☆

---

【カテゴリ9】ファイルシステム

9. File System MCP Server

何ができる：

• ✅ ローカルファイルの読み書き
• ✅ ディレクトリの作成・削除
• ✅ ファイル検索
• ✅ ファイル情報の取得
• ✅ パーミッション管理

こんな時に便利：

開発者：「プロジェクト内の全tsファイルを検索」
→ AIが自動で検索・分析

開発者：「設定ファイルをバックアップ」
→ AIが自動でコピー

開発者：「未使用のimportを全ファイルから削除」
→ AIが一括処理

導入難易度： ★☆☆☆☆
公式リポジトリ： @modelcontextprotocol/server-filesystem

---

【カテゴリ10】プロジェクト管理

10. Linear MCP Server

何ができる：

• ✅ タスク（Issue）の作成・更新
• ✅ プロジェクトの進捗確認
• ✅ チームメンバーへのアサイン
• ✅ マイルストーンの管理
• ✅ ラベル・ステータスの管理

こんな時に便利：

開発者：「バグ修正タスクを作成」
→ AIが自動でIssue作成

開発者：「今週の完了タスクを確認」
→ AIが進捗を集計・報告

開発者：「このタスクを@taroにアサイン」
→ AIが自動で割り当て

導入難易度： ★★★☆☆

---

【カテゴリ11】その他の便利なサーバー

11. Google Drive MCP Server

何ができる：

• ✅ ファイル・フォルダの検索
• ✅ ドキュメントの読み取り
• ✅ ファイルのアップロード・ダウンロード
• ✅ 共有設定の管理

導入難易度： ★★★☆☆

---

実践！MCPで実現する開発フロー

ここからは、実際の開発シーンでMCPをどう活用するかを見ていきましょう。

シナリオ：新機能の開発から本番デプロイまで

【前提条件】
Webアプリに「ユーザー認証機能」を追加する

従来の開発フロー

1. Notionで仕様確認（手動で開く）
2. Figmaでデザイン確認（手動で開く）
3. GitHubでブランチ作成（手動操作）
4. コーディング
5. データベース確認（別ツールで接続）
6. ブラウザでテスト実行（手動操作）
7. PRを作成（手動でGitHub開く）
8. Slackで報告（手動で投稿）

所要時間：約4-5時間
ツール切り替え：10回以上
集中力：途切れまくり

MCP活用後の開発フロー

// ============================================
// Step 1: Notionから仕様を自動取得
// ============================================
開発者：「Notionの"認証機能仕様"ページを参照して、
        実装すべき内容を教えて」

→ AI（Notion MCP使用）：
   「仕様を確認しました。以下を実装する必要があります：
    - JWT認証の実装
    - メール/パスワードによるログイン
    - トークンの有効期限：24時間
    - パスワードのハッシュ化（bcrypt使用）
    - ログイン失敗時のエラーハンドリング」

// ============================================
// Step 2: Figmaからデザインを確認・コード生成
// ============================================
開発者：「Figmaの"LoginForm"フレームから
        Reactコンポーネントを生成して」

→ AI（Figma MCP使用）：
   「LoginFormコンポーネントを生成しました。
    デザインシステムの変数も適用済みです」

// 自動生成されたコード
// components/LoginForm.tsx
// components/LoginForm.module.css
// が作成される

// ============================================
// Step 3: GitHubで自動ブランチ作成
// ============================================
開発者：「feature/auth-implementation ブランチを作成して」

→ AI（GitHub MCP使用）：
   「ブランチを作成しました。現在のブランチを
    feature/auth-implementation に切り替えました」

// ============================================
// Step 4: データベース構造を確認
// ============================================
開発者：「usersテーブルのスキーマを確認して」

→ AI（PostgreSQL MCP使用）：
   「usersテーブルの構造：
    - id: UUID (PRIMARY KEY)
    - email: VARCHAR(255) (UNIQUE)
    - password_hash: VARCHAR(255)
    - created_at: TIMESTAMP
    - updated_at: TIMESTAMP」

// ============================================
// Step 5: バックエンド実装（Cursorの通常機能）
// ============================================
開発者：「JWT認証のバックエンドAPIを実装して」

→ AI（Cursorの標準機能）：
   // 自動でコード生成
   // - /api/auth/login エンドポイント
   // - /api/auth/register エンドポイント
   // - JWT生成・検証ミドルウェア
   // - パスワードハッシュ化処理

// ============================================
// Step 6: ブラウザで動作確認
// ============================================
開発者：「ローカル環境で認証フローをテストして」

→ AI（Playwright MCP使用）：
   「テストを実行しました：
    ✅ ログインフォームの表示
    ✅ 正常なログイン処理
    ✅ 不正な認証情報のエラー表示
    ✅ トークンの保存・検証
    全てのテストが合格しました」

// ============================================
// Step 7: PRを自動作成
// ============================================
開発者：「PRを作成して、レビュワーに@taroを指定。
        タイトルは"feat: ユーザー認証機能の実装"」

→ AI（GitHub MCP使用）：
   「Pull Requestを作成しました：
    #123 feat: ユーザー認証機能の実装
    レビュワー: @taro
    ラベル: enhancement, backend
    
    以下の変更が含まれます：
    - JWT認証の実装
    - ログインAPIエンドポイント
    - フロントエンドのログインフォーム
    - E2Eテスト追加」

// ============================================
// Step 8: Slackに自動報告
// ============================================
開発者：「認証機能の実装完了をSlackの#developmentチャンネルに投稿」

→ AI（Slack MCP使用）：
   「Slackに投稿しました：
    
    🎉 認証機能の実装が完了しました！
    
    📋 PR: #123 feat: ユーザー認証機能の実装
    👤 レビュワー: @taro
    ✅ テスト: 全て合格
    🔗 https://github.com/myproject/pull/123
    
    レビューをお願いします！」

結果の比較

項目	従来	MCP活用後
所要時間	4-5時間	1-1.5時間
ツール切り替え	10回以上	0回（全てCursor内）
手動操作	多数	ほぼゼロ
集中力	途切れる	途切れない
エラー	手作業ミスあり	自動化で削減

削減率：約70-80%の時間短縮！

---

その他の活用例

例1：バグ修正フロー

1. Perplexity MCP でエラーの最新情報を検索
   → 「このエラーの解決策を調べて」

2. PostgreSQL MCP でデータを確認
   → 「エラーが発生しているユーザーのデータを確認」

3. 修正実装（Cursor標準機能）
   → 「この箇所を修正して」

4. Playwright MCP でテスト実行
   → 「修正後の動作を確認」

5. GitHub MCP でIssueをクローズ
   → 「Issue #456 をクローズ」

6. Slack MCP でバグ修正完了を報告
   → 「バグ修正完了を報告」

所要時間：30分（従来は2-3時間）

例2：デザインからの実装フロー

1. Figma MCP でデザイン取得
   → 「Figmaの"DashboardUI"フレームからコード生成」

2. デザイントークン適用
   → AIが自動で色・サイズ・フォントを適用

3. レスポンシブ対応
   → AIがブレイクポイントを考慮して実装

4. Playwright MCP で各デバイスでの表示確認
   → 「モバイル、タブレット、デスクトップで確認」

5. GitHub MCP でPR作成
   → 「デザイン実装完了のPRを作成」

デザインの再現性：90%以上
所要時間：1時間（従来は4-5時間）

例3：ドキュメント作成フロー

1. File System MCP でコードを分析
   → 「プロジェクト全体の構造を分析」

2. AIがドキュメント生成
   → README、API仕様書、アーキテクチャ図を自動生成

3. Notion MCP で自動的にNotionに投稿
   → 「生成したドキュメントをNotionに保存」

4. Slack MCP でドキュメント完成を共有
   → 「ドキュメント更新をSlackに通知」

所要時間：20分（従来は2-3時間）

---

MCPサーバーの設定方法 - 3ステップ

実際にMCPサーバーを設定してみましょう。ここでは、代表的な3つのサーバーの設定方法を解説します。

Step 1: MCPサーバーのインストール

GitHub MCP Server

# npmでインストール
npm install -g @modelcontextprotocol/server-github

Notion MCP Server

# npmでインストール
npm install -g @makenotion/notion-mcp-server

Slack MCP Server

# npmでインストール
npm install -g @slack/mcp-server

Step 2: Cursorの設定ファイルを編集

設定ファイルの場所

• Mac: ~/Library/Application Support/Cursor/mcp_settings.json
• Windows: %APPDATA%\Cursor\mcp_settings.json
• Linux: ~/.config/Cursor/mcp_settings.json

設定ファイルの編集

以下の内容を mcp_settings.json に記述します：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_TOKEN": "ghp_your_github_token_here"
      }
    },
    "notion": {
      "command": "npx",
      "args": [
        "@makenotion/notion-mcp-server"
      ],
      "env": {
        "NOTION_TOKEN": "secret_your_notion_token_here"
      }
    },
    "slack": {
      "command": "npx",
      "args": [
        "@slack/mcp-server"
      ],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-your-slack-bot-token-here",
        "SLACK_TEAM_ID": "T01234567"
      }
    },
    "figma": {
      "command": "npx",
      "args": [
        "@figma/dev-mode-mcp-server"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
      }
    }
  }
}

トークンの取得方法

GitHub Token：

1. GitHub → Settings → Developer settings
2. Personal access tokens → Generate new token
3. 必要な権限を選択（repo, read:user など）
4. トークンをコピー

Notion Token：

1. Notion → Settings & Members → Integrations
2. Create new integration
3. Internal integrationを作成
4. Secret tokenをコピー
5. 対象のページに統合を追加

Slack Bot Token：

1. Slack API → Create New App
2. Bot User OAuth Token を取得
3. 必要な権限を追加（chat:write, channels:read など）
4. トークンをコピー

Figma Token：

1. Figma → Settings → Account
2. Personal access tokens → Create new token
3. トークンをコピー
4. ※ Figma Professional以上のプランが必要

Step 3: Cursorを再起動して確認

動作確認

1. Cursorを再起動
2. Cmd+L（Windows: Ctrl+L）でチャットを開く
3. 以下のコマンドで動作確認：

「GitHubのリポジトリ一覧を取得して」
→ GitHub MCPが動作していればリポジトリが表示される

「Notionのページ一覧を取得して」
→ Notion MCPが動作していればページが表示される

「Slackの#generalチャンネルに"テスト"と投稿」
→ Slack MCPが動作していればメッセージが投稿される

「Figmaのプロジェクト一覧を取得して」
→ Figma MCPが動作していればプロジェクトが表示される

トラブルシューティング

エラーが出る場合：

# 1. MCPサーバーが正しくインストールされているか確認
npm list -g @modelcontextprotocol/server-github

# 2. トークンが正しいか確認（環境変数で直接テスト）
export GITHUB_TOKEN="your_token"
npx @modelcontextprotocol/server-github

# 3. Cursorのログを確認
# Cursor → Help → Show Logs
# mcp_server.log を確認

権限エラーの場合：

• トークンの権限設定を見直す
• 対象のリソース（リポジトリ、Notionページなど）へのアクセス権を確認

---

おすすめMCPサーバーの組み合わせ

用途別におすすめの組み合わせを紹介します。

パターン1：個人開発者向け（ミニマル構成）

{
  "mcpServers": {
    "github": { /* GitHub設定 */ },
    "notion": { /* Notion設定 */ },
    "filesystem": { /* File System設定 */ }
  }
}

おすすめ理由：

• ✅ 最小構成で開発に必要な機能が揃う
• ✅ セットアップが簡単
• ✅ 無料で始められる
• ✅ 学習コストが低い

こんな人におすすめ：

• 個人プロジェクトを進めている人
• MCPを初めて使う人
• まずは基本から試したい人

---

パターン2：チーム開発向け（コラボレーション重視）

{
  "mcpServers": {
    "github": { /* GitHub設定 */ },
    "slack": { /* Slack設定 */ },
    "linear": { /* Linear設定 */ },
    "notion": { /* Notion設定 */ },
    "postgres": { /* PostgreSQL設定 */ }
  }
}

おすすめ理由：

• ✅ チーム内の情報共有が自動化
• ✅ タスク管理が効率化
• ✅ データベース操作も統合
• ✅ コミュニケーションが円滑

こんな人におすすめ：

• チームで開発している人
• タスク管理を効率化したい人
• コミュニケーションツールを多用する人

---

パターン3：フルスタック開発者向け（全部入り）

{
  "mcpServers": {
    "github": { /* GitHub設定 */ },
    "figma": { /* Figma設定 */ },
    "notion": { /* Notion設定 */ },
    "aws": { /* AWS設定 */ },
    "postgres": { /* PostgreSQL設定 */ },
    "playwright": { /* Playwright設定 */ },
    "slack": { /* Slack設定 */ }
  }
}

おすすめ理由：

• ✅ フロントからインフラまで全てカバー
• ✅ デザインからコード生成まで自動化
• ✅ 本番環境の管理も可能
• ✅ テストも自動化
• ✅ 究極の開発効率

こんな人におすすめ：

• フルスタックエンジニア
• 1人で全工程を担当する人
• 最大限の効率化を求める人

---

パターン4：デザイナー×エンジニア向け（デザイン実装特化）

{
  "mcpServers": {
    "figma": { /* Figma設定 */ },
    "github": { /* GitHub設定 */ },
    "playwright": { /* Playwright設定 */ },
    "notion": { /* Notion設定 */ }
  }
}

おすすめ理由：

• ✅ Figmaデザインから直接コード生成
• ✅ デザインの再現性が高い
• ✅ デザイントークンの活用が容易
• ✅ ブラウザでの表示確認も自動

こんな人におすすめ：

• デザイナー兼エンジニア
• UI実装を多く行う人
• デザインシステムを活用したい人

参考リンク

• Model Context Protocol公式サイト
• Cursor MCP ドキュメント
• Awesome MCP Servers
• Figma MCP Server Guide
• GitHub MCP Server
• Notion MCP Server

---

タグ

#Cursor #MCP #AI #開発効率化 #GitHub #Notion #Slack #Figma #プログラミング #開発ツール