Paper MCP

🚀 Paper MCP Server

PaperのWebSocket APIに接続し、キャンバスノード操作を行うMCPサーバーです。

🚀 クイックスタート

📦 インストール

1. 依存関係をインストールします：

npm install

2. プロジェクトをビルドします：

npm run build

⚙️ 設定

1. env.example を .env にコピーします：

cp env.example .env

2. .env を編集し、値を入力します（または直接環境変数を設定します）：

# 必須: Paperウェブサイトからの完全なクッキー文字列
# これはブラウザの開発者ツール -> アプリケーション -> クッキー -> paper.design から取得できます
# すべての3つのクッキーを含める必要があります: paper-preauth-user-info, D7pPzj4phQRAjBC01, および ph_phc_...
PAPER_COOKIES=paper-preauth-user-info=...; D7pPzj4phQRAjBC01=...; ph_phc_dYB3kPJF9dv2vFhHjPmuuU5D7yQVDFtMYJQpVEXu9Ku_posthog=...

# オプション: 接続するドキュメントID（デフォルトはサンプルID）
# ドキュメントIDは list_user_documents ツールまたはPaperのURLから取得できます
PAPER_DOCUMENT_ID=01KBWAZRVPXZZ1Y0EZ5FDT7ZYW

# オプション: WebSocketメッセージのデバッグログを有効にする
DEBUG=false

クッキーの取得方法

1. ブラウザでPaperを開きます（https://app.paper.design）
2. 開発者ツールを開きます（F12）
3. アプリケーション → クッキー → https://app.paper.design に移動します
4. 以下のクッキーの値をコピーします：
   • paper-preauth-user-info
   • D7pPzj4phQRAjBC01
   • ph_phc_dYB3kPJF9dv2vFhHjPmuuU5D7yQVDFtMYJQpVEXu9Ku_posthog
5. 次の形式でフォーマットします： cookie1=value1; cookie2=value2; cookie3=value3

💻 Cursorへの接続

オプション1: Cursor設定を使用する（推奨）

1. Cursor設定を開きます（Ctrl + , またはCmd + ,）
2. "MCP" を検索するか、機能 → モデルコンテキストプロトコル に移動します
3. "MCPサーバーを追加" または "設定を編集" をクリックします
4. 以下の設定を追加します：

Windowsの場合：

{
  "mcpServers": {
    "paper": {
      "command": "node",
      "args": ["C:\\Users\\grim\\paper-mcp\\dist\\index.js"],
      "env": {
        "PAPER_COOKIES": "your-cookie-string-here",
        "PAPER_DOCUMENT_ID": "01KBWAZRVPXZZ1Y0EZ5FDT7ZYW",
        "DEBUG": "false"
      }
    }
  }
}

macOS/Linuxの場合：

{
  "mcpServers": {
    "paper": {
      "command": "node",
      "args": ["/path/to/paper-mcp/dist/index.js"],
      "env": {
        "PAPER_COOKIES": "your-cookie-string-here",
        "PAPER_DOCUMENT_ID": "01KBWAZRVPXZZ1Y0EZ5FDT7ZYW",
        "DEBUG": "false"
      }
    }
  }
}

5. パスとクッキーの値を実際の値に置き換えます
6. Cursorを再起動します

オプション2: MCP設定ファイルを使用する

1. CursorのMCP設定ファイルを見つけます：

   • Windows: %APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
   • macOS: ~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
   • Linux: ~/.config/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

2. サーバー設定を追加します（上記と同じJSON）

3. Cursorを再起動します

オプション3: dotenvを使用する（代替案）

.env ファイルを使用する場合は、以下の手順を実行します：

1. dotenv-cli をインストールします： npm install -g dotenv-cli
2. Cursorの設定を更新して使用します：

{
  "mcpServers": {
    "paper": {
      "command": "dotenv",
      "args": ["-e", ".env", "--", "node", "dist/index.js"],
      "cwd": "C:\\Users\\grim\\paper-mcp"
    }
  }
}

💻 使用例

Cursorに接続したら、会話でPaperツールを使用できます：

• "私のPaperドキュメントを一覧表示"
• "キャンバス上のすべてのノードを表示"
• "ノードXYZの詳細を取得"
• "位置 (100, 200) に新しい矩形ノードを作成"
• "ノードABCのプロパティを更新"
• "ノードDEFを削除"

サーバーはMCP JSON-RPCプロトコルを使用してstdio経由で通信します。

🛠️ ツール

• list_user_documents：ユーザーの最近のPaperドキュメントを取得
• list_nodes：キャンバス上のすべてのノードを一覧表示
• get_node：特定のノードの詳細を取得
• create_node：新しいノードを作成
• update_node：ノードのプロパティを更新
• delete_node：ノードを削除