UX Pilot について
UX Pilot MCPは、AIクライアントをUX Pilotのワークスペースに接続し、デザイン、レビュー、Reactプロトタイプの作成を支援します。外部HTMLやURLの取り込みにも対応し、サインインまたはAPIキーで利用できます。
主な機能
- 01ページとワークストリームの作成・整理
- 02HTMLやライブURLをデザインとして取り込む
- 03UXとアクセシビリティのレビュー
- 04バージョンとコメントの管理
- 05Reactプロトタイプの生成と公開
活用シーン
- 01AI生成HTMLをデザインワークスペースに取り込む
- 02デザインのUXとアクセシビリティを確認する
- 03デザイン変更とフィードバックを追跡する
- 04Reactプロトタイプを作成して公開する
MCP 対応
ホステッド型MCPサーバーは、UX Pilotのワークスペース、デザイン、レビュー、バージョン、コメント、プロトタイプを管理する77のツールを提供します。MCPクライアントはStreamable HTTPで接続し、OAuthサインインまたはBearer APIキーで認証します。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://mcp.uxpilot.net/mcpclaude mcp add --transport http ai-uxpilot-uxpilot https://mcp.uxpilot.net/mcp{"mcpServers":{"ai-uxpilot-uxpilot":{"type":"http","url":"https://mcp.uxpilot.net/mcp"}}}Cursor で開く{"servers":{"ai-uxpilot-uxpilot":{"type":"http","url":"https://mcp.uxpilot.net/mcp"}}}VS Code で開く{"mcpServers":{"ai-uxpilot-uxpilot":{"type":"http","url":"https://mcp.uxpilot.net/mcp"}}}{"mcpServers":{"ai-uxpilot-uxpilot":{"serverUrl":"https://mcp.uxpilot.net/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
UX Pilot MCP
Claude、ChatGPT、Cursor、Codex、その他の MCP クライアントから UX Pilot を直接操作できます。
AI が生成した成果物を UX Pilot に取り込み、整理、レビュー、バージョン管理し、プロトタイプを作成できます。その後、UX Pilot AI に戻って、プロダクトをより深く理解した生成を行えます。
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: BearerAPI キーによる代替認証 - ツール: 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
ネイティブコネクター(推奨):
- Claude の設定を開き、カスタムコネクター/リモート MCP サーバーを追加します。
- サーバー URL を貼り付けます:
https://mcp.uxpilot.net/mcp - Claude に表示されたら UX Pilot のサインインフローを選択し、アクセスを承認します。
- 会話で、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。利用可否はプランによって異なります)。
- ChatGPT の設定を開き、カスタムコネクター/MCP サーバーを追加します。
- サーバー URL を貼り付けます:
https://mcp.uxpilot.net/mcp - メッセージが表示されたら、UX Pilot のサインインを完了します。
- チャットでコネクターを有効にし、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_pages | URL、件数、サムネイルとともにページを一覧表示します |
get_page_context | ページのグループ、デザイン、キャンバス、コメントを取得します |
get_design | 1つのデザインの詳細、プレビュー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_assets | URL参照の画像/参照アセットをページに追加します |
upload_canvas_asset | base64/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_review | UX レビューを実行し、調査結果をコメントとして保存 · クレジット |
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_versions | 2 つのデザイン/バージョンを比較(メタデータ+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があります。
クイックスタート
- UX Pilot で使用する AI クライアントを選びます。
- サーバー URL を使用し、上記のネイティブなサインイン手順に従います。
- クライアントで静的ヘッダーが必要な場合は、API キーを生成し、フォールバック設定内の
ep_your_api_keyを置き換えます。 - アシスタントに次のように依頼します:「UX Pilot のページを作成し、この HTML をデザインとしてインポートしてから、UX レビューを実行してください。」
サポート
- 製品およびアカウントに関するサポート:uxpilot.ai
- この連携に関する問題:issue を作成してください
- MCP 仕様:modelcontextprotocol.io
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。