MENU
AI開発ツール・プログラミング・エンジニア向け情報を発信
  1. ホーム
  2. 開発ツール
  3. 【2025年版】CursorのMCP完全ガイド｜GitHubとPlaywright連携で開発効率を最大化する方法

【2025年版】CursorのMCP完全ガイド｜GitHubとPlaywright連携で開発効率を最大化する方法

開発ツール

「CursorのMCPって何？どう設定すればいい？」
「GitHubやPlaywrightと連携したいけど、方法がわからない…」
「MCPを使って開発効率を上げたい！」

このような悩みを抱えていませんか？

私は40代現役Webエンジニアとして、CursorのMCP機能を活用して開発効率を大幅に向上させてきました。

結論から言うと：

  • MCPを使えば、CursorからGitHubやブラウザを直接操作できる
  • 設定は10分程度で完了
  • 日常の開発作業が劇的に効率化される

この記事では、CursorのMCP設定方法と実践的な使い方を、初心者にもわかりやすく徹底解説します。

目次

この記事でわかること

  • MCP（Model Context Protocol）とは何か
  • GitHub MCPの設定手順
  • Playwright MCPの設定手順
  • 実践的な使い方と活用例
  • よくあるトラブルと解決方法

MCP（Model Context Protocol）とは？

MCPの基本

MCP（Model Context Protocol）は、Cursorが外部ツールやサービスと連携するための仕組みです。

項目 説明
正式名称 Model Context Protocol
目的 外部サービスとの連携
操作方法 自然言語で指示
設定方法 UIまたは設定ファイル

MCPでできること

MCPを設定すると、チャット画面から自然言語で外部サービスを操作できます。

サービス できること
GitHub Issue作成、PR確認、コード検索、コミット履歴確認
Playwright スクリーンショット取得、ページ操作、情報取得
iTerm ターミナルコマンド実行

MCPのメリット

1. コンテキストスイッチの削減
Cursorから直接外部サービスを操作できるため、ツール間の切り替えが不要になります。

2. 自然言語での操作
「Issueを作成して」「スクリーンショットを撮って」と指示するだけで実行されます。

3. 自動化の促進
繰り返し作業を自動化し、開発に集中できます。

GitHub MCP連携の設定方法

必要なもの

項目 説明
GitHubアカウント 連携したいリポジトリにアクセス可能なアカウント
Personal Access Token GitHub APIへのアクセス権限
Node.js MCPサーバー実行に必要

Step 1：GitHub Personal Access Tokenを作成

1. GitHubにログイン

GitHubにログインし、右上のアイコンをクリック。

2. 設定画面へ移動

手順 操作
1 右上アイコン > Settings
2 左メニュー最下部 > Developer settings
3 Personal access tokens > Tokens (classic)
4 Generate new token > Generate new token (classic)

3. トークンを設定

項目 設定値
Note Cursor MCP（わかりやすい名前）
Expiration 90日、1年など（適切な期間）
Scopes ✅ repo（必須）、✅ read:org（必要な場合）

4. トークンをコピー

Generate token をクリックし、表示されたトークンをコピーします。

⚠️ 重要: トークンはこの画面でしか表示されません。必ずコピーして安全に保管してください。

Step 2：CursorでMCP設定

方法1：設定UIから（推奨）

1. Cursorの設定を開く

Cmd + , または メニュー > Settings

2. MCP設定画面へ移動

Features > Model Context Protocol（または検索で「MCP」）

3. サーバーを追加

Add Server をクリックし、以下を入力：

項目 値
Server Name github
Command npx @modelcontextprotocol/server-github
Environment Variables GITHUB_TOKEN=ghp_xxxx…（コピーしたトークン）

4. 保存して再起動

Save をクリックし、Cursorを再起動。

方法2：設定ファイルを直接編集

設定ファイルのパス（macOS）：

~/Library/Application Support/Cursor/User/globalStorage/cursor.mcp/settings.json

以下の内容を記述：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_TOKEN": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

Step 3：動作確認

Cursorを再起動後、チャット画面で以下を試します：

指示例 期待される動作
「このリポジトリのIssueを見せて」 Issue一覧が表示される
「最近のコミット履歴は？」 コミット履歴が表示される
「READMEの内容を表示して」 READMEファイルの内容が表示される

Playwright MCP連携の設定方法

必要なもの

項目 説明
Node.js MCPサーバー実行に必要
Playwrightブラウザ スクリーンショット取得等に必要

Step 1：事前準備

Node.jsの確認

node --version

インストールされていない場合：

# Homebrew経由（macOS）
brew install node

Playwrightブラウザのインストール

npx playwright install

これにより、Chromium、Firefox、WebKitがインストールされます。

Step 2：CursorでMCP設定

方法1：設定UIから（推奨）

1. Cursorの設定を開く

Cmd + , または メニュー > Settings

2. MCP設定画面へ移動

Features > Model Context Protocol

3. サーバーを追加

Add Server をクリックし、以下を入力：

項目 値
Server Name playwright
Command npx @playwright/mcp@latest
Environment Variables （空のまま）

4. 保存して再起動

方法2：設定ファイルを直接編集

既存の設定に追加：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_xxxx..."
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Step 3：動作確認

指示例 期待される動作
「このサイトのスクリーンショットを撮って」 スクリーンショットが取得される
「ページのタイトルを取得して」 ページタイトルが表示される
「リンク一覧を取得して」 ページ内のリンク一覧が表示される

実践的な使い方

GitHub連携の活用例

Issue管理

「新しいIssueを作成して。タイトルは『バグ修正：ログイン画面のエラー』、
本文は『ログイン時にエラーが発生する問題を修正する』」

コード検索

「リポジトリ内で'validateUser'という関数を探して。TypeScriptファイルのみで」

PR確認

「最近マージされたPRの一覧を見せて。過去1週間分で」

コミット履歴

「このファイルの変更履歴を見せて。過去10件で」

Playwright連携の活用例

スクリーンショット取得

「https://example.com のスクリーンショットを撮って。フルページで」

ページ操作

「Googleのトップページを開いて、検索ボックスに『Cursor MCP』と入力して」

情報取得

「このサイトの見出し一覧を取得して」

フォーム操作

「ログインフォームにメールアドレスとパスワードを入力して」

よくあるトラブルと解決方法

トラブル1：npxが見つからない

症状：「npx: command not found」エラー

原因：Node.jsがインストールされていない

解決方法：

# Homebrew経由（macOS）
brew install node

# または公式サイトからダウンロード
# https://nodejs.org/

トラブル2：認証エラー（GitHub）

症状：「Authentication failed」エラー

原因：トークンの有効期限切れ、または権限不足

解決方法：

確認項目 対処法
有効期限 GitHubでトークンの有効期限を確認
スコープ repo スコープが付与されているか確認
再生成 必要に応じてトークンを再生成

トラブル3：MCPサーバーが起動しない

症状：設定したサーバーが動作しない

原因：設定ファイルの誤り、または環境変数の問題

解決方法：

  1. Cursorのログを確認：Help > Toggle Developer Tools > Console
  2. 環境変数が正しく設定されているか確認
  3. Cursorを再起動

トラブル4：Playwrightブラウザが起動しない

症状：スクリーンショット取得時にエラー

原因：ブラウザのインストール不足

解決方法：

npx playwright install

MCPで開発効率が上がる理由

Before（MCP導入前）

作業 手順
Issue作成 ブラウザでGitHubを開く → 手動で入力
コード検索 GitHub画面で検索 → 結果をコピー
スクリーンショット ブラウザで開く → 手動でキャプチャ

After（MCP導入後）

作業 手順
Issue作成 「Issue作成して」と指示 → 完了
コード検索 「関数を探して」と指示 → 結果表示
スクリーンショット 「スクリーンショット撮って」と指示 → 取得完了

効果：

  • コンテキストスイッチの削減
  • 作業時間の短縮
  • 集中力の維持

まとめ

MCPで実現できること

連携サービス 主な機能
GitHub Issue管理、PR確認、コード検索、コミット履歴
Playwright スクリーンショット、ページ操作、情報取得

設定の流れ

GitHub MCP：

  1. Personal Access Tokenを作成
  2. CursorでMCPサーバーを設定
  3. 動作確認

Playwright MCP：

  1. Playwrightブラウザをインストール
  2. CursorでMCPサーバーを設定
  3. 動作確認

次のステップ

  • まずはGitHub MCPを設定して、Issue管理を効率化
  • Playwright MCPを設定して、ブラウザ操作を自動化
  • 日常の開発作業にMCPを活用

MCPを活用すれば、開発作業を劇的に効率化できます。ぜひ試してみてください。

体系的に学びたい方へ

おすすめ技術書

開発効率を高めるために、エンジニアの基礎力を高める技術書を紹介します。


可読性の高いコードを書くための必読書。効率的な開発の土台となります。


エンジニアとしての考え方を学べる名著。ツールを使いこなすための思考法が身につきます。

Tech Creator Hub

より詳しい情報は、Tech Creator Hubをご覧ください。

開発ツール
AI開発 Cursor GitHub MCP Playwright 開発効率化
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

dddaddyのアバター dddaddy

関連記事

目次