CursorでMCPの設定をやってみました

CursorでMCPの設定を初めてやってみました
ウチノ

CursorでMCPを設定してみたいけど、まだ触ってない・・・

ふぅあん

MCPってどんなことができるの?

こんな疑問をもっている方に向けて私が設定した方法をまとめてみました。

本記事では、Mac環境でのMCP(Model Context Protocol)の基本設定を初めての方にもわかりやすく解説します。

今回はファイルシステム(Mac内のファイル作業など)、Notion、Figmaとの連携まで、画像付きで丁寧に説明します。

ややこしい設定は苦手な方でもCursorに相談しながら進めていけば比較的スムースに設定できたのでぜひお試しいただければと思います。

目次

記事の目的

この記事では、MCPの基本的な設定方法のみを解説しています。

MCPの解説や実際の使用例や応用例にはほぼ触れていません。

設定が完了した後の活用方法は、読者の皆さんそれぞれの開発環境やプロジェクトに合わせてぜひ探求してください。

MCP Cursorの導入に必要な準備と条件

必要な準備と前提条件

私はMacを使っているのでWindowsを使っている方は参考程度にとどめておいてください。

エラーが出た場合はすべてCursorのChatに相談しながら解決しました。

必要なもの

Cursorエディタのインストール(公式サイトからダウンロード可能)

Node.jsのインストール(公式サイトからダウンロード可能)

Figmaのインストール(ダウンロードサイト 導入しない方は不要)

Notionのインストール(公式サイト 導入しない方は不要)

MCPサーバーの設定手順

ファイルシステム設定

CursorのMCP設定画面

上記が画像が全て設定が終わったCursor setteing画面になります。

この画面を開くためにまずは1番の歯車アイコンをクリック。

次に画面左側にある、MCPをクリック。

最初は何もないので「+ Add new global MCP server」をクリックします。

するとmcp.jsonファイルが開きます。

そこに下のコードをコピペしてください。

    {
      "mcpServers": {
        "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "/Users/あなたのPC名を入れてください/Desktop"
          ]
        }
      }
    }

あなたのPC名を調べる場合は

Cursorのターミナルを開くボタン

Cursorの画面右上にある黄枠の部分をクリックしてターミナルを開いてください。

するとCursor画面の下にターミナルが立ち上がります。

そこに表示された文字列の @ 前にある文字があなたのPCの名前です。

入力が完了すれば、もう一度、MCP設定画面に戻って

filesystemの項目ができているか確認します。

名前左にあるアイコンがグリーンになっていればOKです。グレーになっている方は理由をChatに確認しながらグリーンになるまで進めてください。

Chat画面を開くボタン

先ほどのターミナルを開くボタンの右隣です。

それではグリーンになっている方は、デスクトップになんでもいいのでファイルを置いて、Chatを開いてデスクトップにあるファイル名を聞いてみてください。

うまく答えてくれれば成功ですね。

確認してくれなかった場合は

  • AIがAgentになっているか?
  • ChatにMCPを利用する旨を伝えているか?

を確認してください。

今回のjsonファイルにはデスクトップのみ指定していますが、

例えば書類フォルダを追加する場合は

    {
      "mcpServers": {
        "filesystem": {
          "command": "npx",
          "args": [
            "-y",
            "@modelcontextprotocol/server-filesystem",
            "/Users/あなたのPC名を入れる/Desktop",
            "/Users/あなたのPC名を入れる/Documents"
          ]
        }
      }
    }

などのように1行追加してください。

Notion設定

Notionを使ってないよって方は飛ばしてください。

まずはNotionのページにてhttps://www.notion.so/profile/integrations

インテグレーションなるものを作成してあなたのNotionにアクセスできるようにします。

Notionのインテグレーション作成画面

新しいインテグレーションをクリックすると

インテグレーション追加ページに遷移するので、名前(わかりやすい名前で大丈夫です。)を登録して操作する対象のワークスペースを設定します。

登録が完了すると

完了画面になるので、ここで内部インテグレーションシークレットの値をコピーします。

上記画像のコメント機能の部分はデフォルトではチェックが入っていません。

操作したい場合はチェックを入れてください。

そして次はmcp.jsonファイルにコードを記入します。

  "notion": {
    "command": "npx",
    "args": [
      "-y",
      "@ramidecodes/mcp-server-notion@latest"
    ],
    "env": {
      "NOTION_API_KEY": "発行したインテグレーションシークレットの値を貼り付け"
    }
  }

ファイルシステムと両方記述しているものはコチラです。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/あなたのPC名を入れる/Desktop",
        "/Users/あなたのPC名を入れる/Documents"
      ]
    },
    "notion": {
      "command": "npx",
      "args": [
        "-y",
         "@ramidecodes/mcp-server-notion@latest"
      ],
      "env": {
        "NOTION_API_KEY": "発行したインテグレーションシークレットの値を貼り付け"
      }
    }
  }
}    

今回のように2つ目の設定を行う場合は、今回の例のようにfilesystemの部分が終わってNotionの部分を記述する前の } のあとに [,] カンマが必要です

mcp.jsonにコードを貼り付けが完了したら、Cursorの設定画面を確認します。

CursorのMCP設定画面

ファイルシステムのときと同様に緑のアイコンを確認してください。

点灯してない場合はCursorのChatで相談してみましょう。

次にNotionで操作したいページを開きます。新規作成しても大丈夫です。

そしてそのページを開いて画面右上にある3点ボタンをクリックすると下記画像のメニューが開きます。

Notionのページ設定メニュー

そのメニューの下に「接続」項目があるのでクリック。

すると下のメニューが開くので上部にある入力欄で、先ほど設定したインテグレーション名を入力すると選択肢にインテグレーション名が表示されるので選択します。

するとアクティブな接続部分にインテグレーション名が表示されます。

これで設定は完了です。

あとはChatにお願いの記述など試してみてください。

Figma設定

はじめにFigmaで個人アクセストークンなるものを作成して保存します。

Figmaメニュー画面

Figmaの画面左上にあるユーザー名をクリックし上記画像のメニューが開いたら

設定 → セキュリティ

→ 個人アクセストークンの新規アクセストークンを作成ボタンをクリック

→ 新規トークンを作成画面が開くと

トークン名を記入、有効期限を必要に応じて設定 →

さらにスコープの部分でアクセスなしの部分を必要に応じて変更してください。

全てアクセスなしではトークンを発行ボタンをクリックできません

アクセストークン

最後にトークンを生成するボタンをクリックすると上記のようにトークンが表示されるのでコピーしておきます。

そして

mcp.jsonに下記コードを記入します。

"figma-developer-mcp": {
  "command": "npx",
  "args": [
    "-y",
    "figma-developer-mcp",
    "--stdio"
  ],
  "env": {
    "FIGMA_API_KEY": "トークンを貼り付け"
  }
}

以前のコードをまとめると

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/あなたのPC名を入れる/Desktop",
        "/Users/あなたのPC名を入れる/Documents"
      ]
    },
    "notion": {
      "command": "npx",
      "args": [
        "-y",
         "@ramidecodes/mcp-server-notion@latest"
      ],
      "env": {
        "NOTION_API_KEY": "発行したインテグレーションシークレットの値を貼り付け"
      }
    },
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "トークンを貼り付け"
      }
    }
  }
}    

となります。

ここまでの設定でCursorのMCP設定画面で緑のアイコンが点灯していれば大丈夫です。

もし点灯していなければChatで相談しながらすすめてください。

まとめ

Macで使うCursorに搭載されたMCP機能の基本的な設定方法を3つ紹介しましたが、実際使ってみてどんな感想をもったでしょうか?

NotionやFigmaは使う人と使わない人に分かれると思いますが、

ファイルシステムは皆さん関係あるので、ご自身の環境に合わせて設定フォルダを増やしてぜひ使っていただければと思います。

FigmaについてはMCPを設定した後に、画像の読み込みを試してみましたが、

  • セクション毎に分割する
  • Cursor設定のRulesでプロジェクトに合わせた設定を入力する

など少し工夫が必要だなと感じました。

今回の設定ではNotionが一番時間がかかりました。エラーが出る度にCursorのChatに相談しながら進めました。Cursorの本領発揮できるシーンだと思うのでみなさんもぜひトライしてください。

最後まで読んでいただいてありがとうございました。

みなさんの作業時間短縮につながれば幸いです。

CursorでMCPの設定を初めてやってみました

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次