💬

Cursorと各公式MCPサーバーの接続方法

に公開

Cursorの公式ドキュメントに、NotionやFigma, GitHubなどの公式のMCPサーバーの追加ボタンができたので、今まで非公式のFigma MCPサーバーだけを使っていたが、各公式MCPサーバーに乗り換えようとしたものの依然CursorへのMCPの設定方法やMCPサーバーの起動方法がイマイチわかりづらく、混乱するのでメモ。

https://docs.cursor.com/tools

mcp.json(非公式サーバー)

もともと Figma の非公式のMCPサーバーを設定していたが、下記の記述方法はどうやら framelink(まさにFigmaのMCPサーバーを提供するサービス?FirestoreをCMS化するFlamelinkではない点に注意)を利用するための記述っぽい。

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<personal_access_token>"
      }
    }
}

ChatGPT調べだがこれは以下のようなコマンドをCursor起動時にに実行させるという意味っぽい。

npx -y figma-developer-mcp --stdio --figma-api-key=<personal_access_token>

私は自身のプロジェクトで read-only しか付けてない見られていいデザインファイルのみ共有しているのでフワッとした理解で使っちゃっているが、野良のMCPサーバーを使うことはリスクが伴うので注意。

mcp.json(公式サーバーのみ)

Cursorの上記ページから「+Add」した場合に追加されるのは以下。

{
  "mcpServers": {
    "GitHub": {
      "command": "docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN ghcr.io/github/github-mcp-server",
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<personal_access_token>"
      }
    },
    "Notion": {
      "url": "https://mcp.notion.com/mcp"
    },
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

GitHubは GITHUB_PERSONAL_ACCESS_TOKENの設定欄があり、Notionは専用Windowが立ち上がって共有するページを指定できたが、Figmaだけトークンもコマンドもなく localhost:3845 の URL が付与されるだけ。

これは現在ベータ版であり Figma Dev Mode MCPサーバーを「Enalbe Dev Mode MCP Server」にチェックを付けて起動するとこのポートとパスで起動するからだそうな。

https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド

Dev Mode なので課金してないと使えず、また上記チェックすら表示されない模様。

Personal Access Token の取得方法

いずれもとてもわかりにくくいつも迷子になる..。

Figma

Webで取得する人が多いようだが、わかりにくいがアプリからも 左上のFigmaアイコン > Help and account > Account settings > Security から発行できる。


Scope:

  • File content: Read-only(基本これだけでいいはず)
  • File metadata Read-only(一応付与しといた)

どのスコープを付与するにしろ、Cursor経由でAIにFigma側のデータを触らせることになる Write 権限はつけず、すべて Read-only にしとかないと怖い。

なお Figma のトークンは最長90日で失効するので都度都度発行しなおさないといけない模様。無料で使いたいなら Framelink の MCP サーバーをアクセストークンと共に使用するのがよい。

GitHub

Settings > Developer Settings > Persoanl access tokens > Fine-grained tokens から発行できる。Classicと比べアクセスできるリポジトリを指定できるのでこちらの Fine-grained tokens 形式が推奨。ただし Repository permissions を Contents: Read-only くらいにしていても Exceeding total tools limit に達して「ツール有効化しすぎ」と怒られるので、mcp.json側で使用するツールを指定しないといけなそう。

Notion

アクセストークンの取得ではなく、追加時にWindowが立ち上がり共有するページを選択する形。これは Notion のコネクト(Integration?)として追加される形になっている。

ポイント

明示的にMCPサーバーへの接続を指示しないと繋がらないっぽい

MCPサーバーのステータスが緑(接続状態)になっても、Cursorのチャットで以下のように明示的にMCPサーバーの情報を参照するように指示しないと特にFigmaの場合うまくいかない。

connect figma mcp, and implement this figma design @https://www.figma.com/design/xxx

また Command + k の inline chat でもうまくいかないようだ..。@Notion で読み込むコンテキストは Notion の公式ドキュメントのリファレンスのようだし、やり方が悪いんですかね..?

MCPサーバーは自前で立ち上げる必要はないようだ

他の記事を見るとCLIによるサーバー立ち上げが必要と書いてあるが、やってみるとやはり mcp.json を見て Cursor が裏で起動してくれているようだ。そのためにMCPサーバーの起動のための commandargs を設定しているのだから。ただ設定後に Reload Window か再起動をしないとサーバーを起動してくれない。あと npx だからか初回は CLI で起動しないとうまくいかないかもしれない(npxの仕組みよくわかってない🫠)

見たままだが、Reload 後はすべて黄色の Loading Tools になった後、非公式の figma-developer-mcp と Notion は接続成功となった。しかし GitHub は赤くなっているので失敗(dockerを入れてないため)、公式の Figma は黄色の Loading Tools のまま変わらない。

公式の Figma MCP サーバーは設定が下記で特に Personal Access などの設定やスコープ付与もなく、どうやって起動すればいいかわからない。一応 CLI で npx figma-developer-mcp --figma-api-key=<prsonal_access_token> --port 3845 とポート番号を合わせてMCPサーバーを起動してあげれば緑色にはなるが、、

その他

  • dockerやnpxコマンドがCLIで使える状態になってないといけない
  • FigmaやNotionアプリを立ち上げてないといけないかも
  • Figmaのトークン有効期限(最大90日)が切れていてもエラーとか表示されないかも

Claude Desktop の場合の例

参考としてMCPの言い出しっぺ(プロトコルを定義整理している団体のサイト)での説明で、Claude でのMCPサーバーの設定例が載っている。

{
  "mcpServers": {
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/allowed/files"
      ]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
      }
    }
  }
}

これは memory, filesystem, github それぞれのコンテキストをLLMに渡すための Anthropic社(Claude開発元。ここがMCPも策定しているよう)が用意している mcp サーバーを npx 経由で起動してという意味。

あくまでAnthropic公式のMCPサーバーだがGitHub公式のMCPサーバーではない。Cursor の事例は載っていないが多分同じ設定で動くと思うので、Docker経由で GitHub MCP サーバーを起動したくなくて、AnthropicのMCPサーバーならええわって人は上記でいいかもしれない。

https://modelcontextprotocol.io/examples

Debug

npxで立ち上げられる便利な inspector があった。

https://github.com/modelcontextprotocol/inspector

参考リンク

https://github.com/modelcontextprotocol

Discussion