MCP Apps: 自分の MCP サーバーに UI を付けて Claude の中で動かす（Claude Code のスキルで作る）

できること（Claude 側）

• サイドパネル・全画面表示、Artifacts ページからの起動とサイドバーへのピン留め
• app tools: アプリの UI にツールを登録し、Claude が画面の一覧や選択行を変えられる
• アプリから Claude にメッセージを送る（ボタン押下で「計画を立てて」など）
• 埋め込みサイト: 自社のエディタやダッシュボードを iframe で読み込む
• ファイルのダウンロード

試す（Claude Desktop）

• Settings → Developer → Edit Config で claude_desktop_config.json に例のサーバーを足して再起動する

{
  "mcpServers": {
    "map": { "command": "npx", "args": ["-y", "@modelcontextprotocol/[email protected]", "--stdio"] }
  }
}

• 試すだけなら版の指定なしでもよいが、残しておくなら版を固定する（npx は毎回最新を取ってくる）

作る

1. Claude Code に公式スキルを入れる:

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@mcp-apps

2. 「Create an MCP App」「Add a UI to my MCP tool」と頼む。OpenAI Apps SDK 製のアプリなら「Migrate from OpenAI Apps SDK」で移行も頼める
3. サーバー側は registerAppTool()／registerAppResource() で登録すると、ホストごとのメタデータを作ってくれる。アプリ側は App.connect() を引数なしで呼ぶとホストを判定する
4. Claude 用の ui.domain は「サーバー URL の SHA-256 の先頭32桁＋.claudemcpcontent.com」:

node -e 'const u="https://example.com/mcp"; console.log(require("crypto").createHash("sha256").update(u).digest("hex").slice(0,32)+".claudemcpcontent.com")'

注意点

• app tools・Artifacts からの起動・埋め込みサイトは、リモートサーバーで動くコネクタでないと使えない。手元のサーバーはトンネルで公開してカスタムコネクタとして足す
• ディレクトリ掲載のコネクタでは、起動口と埋め込みサイトは Verified 掲載のときだけ。Community 掲載から入れた人には出ない（自分のカスタムコネクタでの試験では動いていても）
• サイドパネルなどは組織で使えるかを先に確認する

出典

• @ClaudeDevs · 2026-11-11
• Claude Docs「Get started with MCP Apps」: claude.com