mcpField
U
UX Pilot

UX Pilot

リモート
uxpilot.aiメディア・デザイン05 日前に更新
リポジトリ公式サイト

UX Pilot について

UX Pilot MCPは、AIクライアントをUX Pilotのワークスペースに接続し、デザイン、レビュー、Reactプロトタイプの作成を支援します。外部HTMLやURLの取り込みにも対応し、サインインまたはAPIキーで利用できます。

主な機能

  1. 01ページとワークストリームの作成・整理
  2. 02HTMLやライブURLをデザインとして取り込む
  3. 03UXとアクセシビリティのレビュー
  4. 04バージョンとコメントの管理
  5. 05Reactプロトタイプの生成と公開

活用シーン

  1. 01AI生成HTMLをデザインワークスペースに取り込む
  2. 02デザインのUXとアクセシビリティを確認する
  3. 03デザイン変更とフィードバックを追跡する
  4. 04Reactプロトタイプを作成して公開する

MCP 対応

ホステッド型MCPサーバーは、UX Pilotのワークスペース、デザイン、レビュー、バージョン、コメント、プロトタイプを管理する77のツールを提供します。MCPクライアントはStreamable HTTPで接続し、OAuthサインインまたはBearer APIキーで認証します。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://mcp.uxpilot.net/mcp
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

ツール

詳細

UX Pilot MCP

Claude、ChatGPT、Cursor、Codex、その他の MCP クライアントから UX Pilot を直接操作できます。

AI が生成した成果物を UX Pilot に取り込み、整理、レビュー、バージョン管理し、プロトタイプを作成できます。その後、UX Pilot AI に戻って、プロダクトをより深く理解した生成を行えます。

MCP Website


UX Pilot MCP サーバーは、MCP 対応のあらゆる AI クライアントを UX Pilot ワークスペースに接続します。アシスタントは UX Pilot 内で、ワークストリームやページの作成、HTML やライブ URL のデザインとしてのインポート、UX およびアクセシビリティレビューの実行、バージョンやコメントの管理、React プロトタイプの生成を行えます。

このサーバーは UX Pilot がホストしています。このリポジトリでは、接続方法と公開されている機能について説明します。ここにビルドまたは実行するサーバーコードはありません。

  • サーバー URL: https://mcp.uxpilot.net/mcp
  • トランスポート: Streamable HTTP(POST)
  • プロトコル: MCP 2025-11-25(JSON-RPC 2.0)
  • 認証: ネイティブ OAuth サインイン(推奨)、または Authorization: Bearer API キーによる代替認証
  • ツール: 77

認証

ネイティブサインイン(推奨)

AI ツールに UX Pilot のサインインまたは認証画面が表示された場合は、そのフローを選択してください。UX Pilot アカウントでログインし、要求されたアクセス権を確認して、接続を承認します。コピーして貼り付ける API キーは不要で、アクセス権はアカウントとプランに紐づいたままです。

API キーによる代替認証

静的ヘッダーのみをサポートするクライアントでは、UX Pilot ワークスペースの API Keys タブからキーを生成し、ベアラートークンとして送信してください。

Authorization: Bearer ep_your_api_key

Enterprise ワークスペースでは、MCP/API キーは管理者が管理します。キーは非公開にし、アクセス状況が変わった場合はローテーションしてください。

セットアップ

クライアントが対応している場合は、ネイティブサインインを優先してください。API キーの設定は代替手段として使用します。ep_your_api_key を実際のキーに置き換えてください。

Claude

ネイティブコネクター(推奨):

  1. Claude の設定を開き、カスタムコネクター/リモート MCP サーバーを追加します。
  2. サーバー URL を貼り付けます:https://mcp.uxpilot.net/mcp
  3. Claude に表示されたら UX Pilot のサインインフローを選択し、アクセスを承認します。
  4. 会話で、UX Pilot のツールを一覧表示するよう Claude に依頼します。

API キーによる代替認証(mcp-remote を使用する Claude Desktop): claude_desktop_config.json を編集します (macOS:~/Library/Application Support/Claude/claude_desktop_config.json、 Windows:%APPDATA%\Claude\claude_desktop_config.json)

{
  "mcpServers": {
    "uxpilot": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.uxpilot.net/mcp",
        "--transport",
        "http-only",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer ep_your_api_key"
      }
    }
  }
}

Node.js が必要です。mcp-remote は stdio と Streamable HTTP を中継します。

ChatGPT

ChatGPT のカスタムコネクター/MCP サポートを使用します(Developer mode。利用可否はプランによって異なります)。

  1. ChatGPT の設定を開き、カスタムコネクター/MCP サーバーを追加します。
  2. サーバー URL を貼り付けます:https://mcp.uxpilot.net/mcp
  3. メッセージが表示されたら、UX Pilot のサインインを完了します。
  4. チャットでコネクターを有効にし、UX Pilot のツールを一覧表示するよう ChatGPT に依頼します。
Cursor

~/.cursor/mcp.json(グローバル)または .cursor/mcp.json(プロジェクト)に追加します。URL のみを追加すると、対応している場合はネイティブサインインが開始されます。ヘッダーは API キーによる代替認証に使用します。

{
  "mcpServers": {
    "uxpilot": {
      "url": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
VS Code + Copilot

.vscode/mcp.json に追加します。

{
  "servers": {
    "uxpilot": {
      "type": "http",
      "url": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
Windsurf

~/.codeium/windsurf/mcp_config.json に追加します。

{
  "mcpServers": {
    "uxpilot": {
      "serverUrl": "https://mcp.uxpilot.net/mcp",
      "headers": {
        "Authorization": "Bearer ep_your_api_key"
      }
    }
  }
}
Codex

~/.codex/config.toml に追加します。

[mcp_servers.uxpilot]
url = "https://mcp.uxpilot.net/mcp"
bearer_token_env_var = "UXPILOT_API_KEY"

次に、生のキーをエクスポートします(Bearer のプレフィックスは不要です。Codex が追加します)。

export UXPILOT_API_KEY="ep_your_api_key"
あらゆる MCP クライアント

Streamable HTTP に対応していないクライアントは、mcp-remote を介して中継できます。

{
  "mcpServers": {
    "uxpilot": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.uxpilot.net/mcp",
        "--transport",
        "http-only",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer ep_your_api_key"
      }
    }
  }
}

ツール

用途別にグループ化された77個のツールです。· credits が付いたツールはアカウントのクレジットを消費します。クレジットを消費する操作と破壊的な操作には、明示的な確認が必要です。

検索と確認(12)
ツール説明
list_workstreamsページの概要とともに、ワークストリーム/フォルダーを一覧表示します
list_pagesURL、件数、サムネイルとともにページを一覧表示します
get_page_contextページのグループ、デザイン、キャンバス、コメントを取得します
get_design1つのデザインの詳細、プレビューURL、任意のHTMLを取得します
get_design_previewデザインのプレビュー/ページURLとステータスを取得します(HTMLなし)
get_design_versionsデザインのバージョン/親子関係を取得します
list_design_collectionsカスタムデザインシステムのコレクションを一覧表示します
get_design_collectionコレクションのアセット、スタイル、ドキュメントを取得します
list_themes利用可能なブランド/スタイルのテーマを一覧表示します
get_themeブランドに沿った出力に使用する、テーマの完全なJSONを取得します
list_symbols再利用可能なエディターのコンポーネント/シンボルを一覧表示します
get_symbolシンボルのHTML/CSSコンテンツを取得します
ワークスペースを整理(19)
ツール説明
create_workstreamワークストリーム/フォルダーを作成します
update_workstreamワークストリームの名前または説明を変更します
delete_workstreamワークストリームを削除し、ページとの関連付けを解除します
create_page空のページを作成します
create_page_from_templateテンプレートからページ/グループを作成します
update_pageページ名、プロンプト、またはAIコンテキストを更新します
delete_pageページを削除します
move_page_to_workstreamページをフォルダーに移動、またはフォルダーから移動します
toggle_page_bookmarkページをブックマークに追加または削除します
create_groupページにデザイングループを作成します
update_groupグループの名前、フォント、またはデザインを更新します
delete_groupグループとそのデザインを削除します
move_group_to_pageグループとそのデザインを別のページに移動します
set_group_savedグループをライブラリに保存、または保存を解除します
duplicate_designページ/グループにデザインを複製します
move_design_to_pageデザインを別のページ/グループに移動します
archive_designデザインをアーカイブし、関連付けを解除します
update_design_metadataデザインのタイトル、プロンプト、位置、サイズを更新します
set_design_savedデザインをライブラリに保存、または保存を解除します
UX Pilot AIで生成(5)
ツール説明
generate_designプロンプトから1画面を生成します · credits
plan_design_flowレビュー用に複数画面のフローを計画します(クレジット消費なし)
confirm_design_flow確認済みの複数画面フローを生成します · credits
get_generation_status生成、インポート、ビルドのステータスをポーリングします
retrieve_designsデザインのステータス/URL/HTMLをポーリングします(レガシー)
外部AIの出力を取り込む(15)
ツール説明
import_html_design外部HTMLをプレビュー可能なデザインとしてインポートします · credits
import_live_url公開URLをデザインとしてキャプチャします · credits
add_canvas_assetsURL参照の画像/参照アセットをページに追加します
upload_canvas_assetbase64/data URL形式の画像をページにアップロードします
update_canvas_assets既存のキャンバスアセットとリンク項目を更新します
delete_canvas_assetsキャンバスアセットを削除します
add_canvas_items付箋、注釈、フローノードを追加します
update_canvas_itemsキャンバス項目を移動、再ラベル付け、またはスタイル変更します
delete_canvas_itemsキャンバス項目を削除します
generate_flowchartプロンプトからフローチャートのグラフを生成します
edit_flowchart指示に基づいて既存のフローチャートを編集します
list_diagramsページに保存された図を一覧表示します
create_diagramサイトマップ/ジャーニー/プロセス図を作成して保存します
update_diagram図のメタデータ、ノード、またはエッジを更新します
delete_diagram図を削除します
レビュー、監査、アクセシビリティ(8)
ツール説明
run_ux_reviewUX レビューを実行し、調査結果をコメントとして保存 · クレジット
get_review_status非同期 UX レビュージョブのステータスを確認
apply_ux_review_fixesレビュー結果を子バージョンとして適用 · クレジット
run_persona_auditペルソナに基づく監査を実行し、調査結果を保存
apply_persona_audit_fixesペルソナ監査の結果を子バージョンとして適用 · クレジット
save_accessibility_report外部の axe 形式のアクセシビリティレポートを保存
apply_accessibility_fixesアクセシビリティ違反を子バージョンとして修正 · クレジット
compare_review_scoresレビューのスコアを修正前後で比較(読み取り専用)
バージョンとコメント(12)
ツール説明
create_design_version親の履歴を保持したバージョンを作成
compare_design_versions2 つのデザイン/バージョンを比較(メタデータ+HTML の差分)
create_version_from_comments修正済み HTML とコメントから子バージョンを作成
create_commentページにコメントするか、デザイン/シェイプに紐付けてコメント
update_comment自分のコメントのテキスト、メンション、位置を編集
delete_commentコメントとその返信を削除
reply_to_commentコメントスレッドに返信
update_comment_reply自分の返信を編集
delete_comment_reply返信を削除
resolve_commentコメントを解決済みにする、または再オープンする
resolve_comments_with_version_summaryバージョンの概要を添えてコメントに返信し、解決済みにする
summarize_commentsページのコメントを一覧表示して要約
プロトタイプと公開(5)
ツール説明
generate_react_prototypeデザインから React アプリを生成 · クレジット
edit_react_prototype既存のプロトタイプを編集
build_react_prototypeプロトタイプのビルド/公開の更新をキューに登録
publish_prototypeプロトタイプをホストされた URL として公開
publish_design_previewデザインの HTML をホストされたプレビューとして公開 · クレジット

さらに、リスクの高い操作用の確認トークンを発行する安全ユーティリティ request_action_confirmation があります。

クイックスタート

  1. UX Pilot で使用する AI クライアントを選びます。
  2. サーバー URL を使用し、上記のネイティブなサインイン手順に従います。
  3. クライアントで静的ヘッダーが必要な場合は、API キーを生成し、フォールバック設定内の ep_your_api_key を置き換えます。
  4. アシスタントに次のように依頼します:「UX Pilot のページを作成し、この HTML をデザインとしてインポートしてから、UX レビューを実行してください。」

サポート

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。