操作ガイド
MCPでPixsoとAIエージェントを接続する
Pixso MCPは、対応するAIエージェントとデザインファイル、レイヤー構造、デザイン操作を接続します。クラウド経由でアクセスする場合はリモートMCPを、デスクトップ版で開いているファイルや現在の選択範囲を使う場合はローカルMCPを選びます。
リモートMCPで接続する
- Streamable HTTPに対応するエージェントに、サーバーURLとして
https://pixso.net/mcpを追加します。 - 対象ファイルにアクセスできるPixsoアカウントでOAuth認可を完了します。
- Pixsoから対象レイヤーやフレームのリンクをコピーし、タスクに含めます。
リモートMCPでは、Pixsoデスクトップ版を開いたままにする必要はありません。プライベートデプロイメントでは、その環境のサービスアドレスを使い、担当者と有効化を調整します。
ローカルMCPで接続する
- Pixsoデスクトップ版2.2.0以降をインストールしてログインします。
- 対象のデザインファイルを開き、左上の設定入口からMCPを有効にします。
- クライアントに表示されたサービスアドレスを、エージェントのStreamable HTTP設定にコピーします。
- Pixsoを起動したまま、対象ファイルのタブをアクティブにします。現在の選択範囲を使う依頼では、対象レイヤーを選択します。
通常のローカルアドレスはhttp://127.0.0.1:3667/mcpですが、使用中のポートは異なる場合があります。クライアントに表示されたアドレスを使ってください。
アクセス権と詳しい設定
MCPは、認可したアカウントのファイル権限に従います。書き込みには編集権限が必要で、ツールによっては適切なシートも必要です。接続手順とツールの説明は、MCP開発者ドキュメント（英語）を参照してください。
ローカルMCPの使い方
手順1: ローカルMCPを有効化
・Pixsoクライアント（バージョン2.2.0以上）をインストールしてログインします。
・Pixsoクライアントで新規または既存のデザインファイルを開きます。
・デザインファイルの左上「ファイル」メニューから【Pixso MCP】を有効化します。
Pixso MCPの有効化が成功すると、キャンバス下部に「Pixso MCPが有効になりました」の表示が現れます。
Pixso MCPサーバーのローカルアドレスは次のとおりです ：
手順2: Pixso MCPをクライアントに統合する
Pixso MCPサーバーが正常に起動したら、MCPクライアントで以下の設定を行うことで接続が完了します。
対応クライアントと設定概要：
Cursor
・Cursorを開き、「設定」を開き、「MCP & Integrations」を選択します。
・「MCP Tools」セクション内の「New MCP Server」をクリックします。
・表示された mcp.json ファイルに、以下の設定コードを貼り付け、保存します。
{
"mcpServers": {
"Pixso MCP": {
"url": "http://localhost:3667/mcp",
"headers":{}
}
}
}
保存後、「MCP & Integrations」ページに戻り、Pixso MCPの起動をオンにします。起動プロセス中に「Loading tools」が表示され、ツールの読み込みが完了すると、Pixso MCPサーバーへ正常に接続されたことを示します。
VS Code
・VS Codeを起動し、会話パネル（Ctrl+Alt+I）を開き、入力ボックスで「Configure Tools」を選択して開きます。
・「Configure Tools」ページで「Add MCP Server」を選択し、プロトコルタイプとして「HTTP」を選択し、初回設定時は任意の内容を入力して mcp.json ファイルを生成・開きます。
・以下の設定を mcp.json ファイルに貼り付けて保存します。
{
"servers": {
"pixso": {
"url": "http://localhost:3667/mcp",
"type": "http"
}
},
"inputs": []
}
保存後、入力ボックスにMCPサーバー関連の設定が表示されます。その中の「設定」をクリックし、続いて「Start Server」をクリックして、クライアント内でMCPサービスを起動します。
コンソールに「Connection state: Running」と出力されれば、接続は成功です。
Windsurf
・Windsurfを開き、ログイン後、「Settings」をクリックして「Windsurf Settings」を開きます。
・「General」ページで「MCP Servers」を見つけ、「Manage MCPs」をクリックしてMCP設定パネルを開きます。
・MCP設定パネルで「View raw config」をクリックし、mcp_config.jsonファイルを開きます。以下の設定をJSONファイルに貼り付けて保存します。
{
"mcpServers": {
"pixso": {
"serverUrl": "http://localhost:3667/mcp"
}
}
}
注記： 上記の設定は他のIDE環境にも適用できます。
・保存後、「Manage MCPs」ページに戻り、「Refresh」をクリックします。以下の内容が読み込まれたら、設定が成功したことを示します。
Claude Code
端末で以下のコマンドを使用して設定を行います。
claude mcp add --transport http pixso-desktop http://127.0.0.1:3667/mcp
手順3: クライアントで対話する
MCPクライアントとPixso MCPサーバーが無事接続されると、クライアント内でPixso MCPが使えるようになります。
Pixsoのデザインデータを取得する方法は2つあります：
1. リンクをコピーする方法
・Pixsoクライアントでデザインファイルを開きます。
・デザイン内で目的のコンテナを選択し、そのリンクをコピーします。
・CursorなどのクライアントIDEで対話画面を開き、コピーしたリンクを貼り付けて、「HTMLコードを生成して」などの指示を出します。
2. コンテナを選択
● Pixsoクライアントでデザインファイルを開きます。
● デザインファイルのキャンバス内で、目的のコンテナレイヤーを単一選択します。
● クライアントIDE（Cursorなど）の対話画面で、選択中のコンテナを対象にした指示を入力します。この方式では、Pixso側の選択範囲を使用します。
注意事項：
ローカルMCPを利用する際は、以下の点をご確認ください：
・Pixsoクライアントは常に起動した状態を維持する必要があります。
・対象のコンテナが含まれるデザインファイルは、常にアクティブなタブで開いている必要があります。