MCP Apps入門 - Skill付き！AIチャット内にオリジナルUIを埋め込む

{
  "dependencies": {
    "@modelcontextprotocol/ext-apps": "^1.0.1",
    "@modelcontextprotocol/sdk": "^1.26.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
    "vite": "^6.0.0",
    "vite-plugin-singlefile": "^2.3.0",
    "typescript": "^5.7.0"
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import { viteSingleFile } from 'vite-plugin-singlefile'

const INPUT = process.env.INPUT
if (!INPUT) {
  throw new Error('INPUT environment variable is not set')
}

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    rollupOptions: {
      input: INPUT,
    },
    outDir: 'dist',
  },
})

// server.ts
import fs from 'node:fs'
import path from 'node:path'
import {
  registerAppResource,
  registerAppTool,
  RESOURCE_MIME_TYPE,
} from '@modelcontextprotocol/ext-apps/server'
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import type { ReadResourceResult } from '@modelcontextprotocol/sdk/types.js'
import { z } from 'zod'

const DIST_DIR = path.join(import.meta.dirname, 'dist')
const RESOURCE_URI = 'ui://sample-app/view.html'

export const createServer = (): McpServer => {
  const server = new McpServer({
    name: 'Sample App',
    version: '1.0.0',
  })

  // ツールの登録
  registerAppTool(
    server,
    'generate-data',
    {
      title: 'Generate Data',
      description: 'データを生成してUIに表示する',
      // Zodスキーマを使用（JSON Schemaではない）
      inputSchema: {
        query: z.string().describe('検索クエリ'),
        limit: z.number().default(10).describe('取得件数'),
      },
      // UIリソースを指定
      _meta: { ui: { resourceUri: RESOURCE_URI } },
    },
    async ({ query, limit }) => {
      // ツールの処理
      const result = { query, limit, items: [] }
      return {
        content: [{ type: 'text', text: JSON.stringify(result) }],
      }
    },
  )

  // UIリソースの登録
  registerAppResource(
    server,
    RESOURCE_URI,
    RESOURCE_URI,
    { mimeType: RESOURCE_MIME_TYPE },
    async (): Promise<ReadResourceResult> => {
      const html = await fs.promises.readFile(path.join(DIST_DIR, 'mcp-app.html'), 'utf-8')
      return {
        contents: [{ uri: RESOURCE_URI, mimeType: RESOURCE_MIME_TYPE, text: html }],
      }
    },
  )

  return server
}

// main.ts
import http from 'node:http'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js'
import { createServer } from './server.js'

// Claude Desktop等のstdioクライアント用
const startStdioServer = async () => {
  const server = createServer()
  const transport = new StdioServerTransport()
  await server.connect(transport)
}

// HTTP経由での接続用（curlテストやWebクライアント向け）
const startHttpServer = () => {
  const httpServer = http.createServer(async (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS')
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Accept, Mcp-Session-Id')

    if (req.method === 'OPTIONS') {
      res.writeHead(204)
      res.end()
      return
    }

    if (req.url !== '/mcp') {
      res.writeHead(404)
      res.end()
      return
    }

    const server = createServer()
    const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined })
    res.on('close', async () => {
      await transport.close()
      await server.close()
    })
    await server.connect(transport)
    await transport.handleRequest(req, res)
  })

  const port = parseInt(process.env.PORT ?? '3001', 10)
  httpServer.listen(port, () => {
    console.log(`MCP server listening on http://localhost:${port}/mcp`)
  })
}

// --stdio フラグでモード切り替え
if (process.argv.includes('--stdio')) {
  startStdioServer()
} else {
  startHttpServer()
}

// src/mcp-app.ts
import { App } from '@modelcontextprotocol/ext-apps'
import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js'

const app = new App({ name: 'Sample App', version: '1.0.0' })

// ツール実行結果を受け取る
app.ontoolresult = (result: CallToolResult) => {
  const textContent = result.content?.find((c: any) => c.type === 'text')
  if (textContent && 'text' in textContent) {
    try {
      const data = JSON.parse(textContent.text)
      // UIを更新する処理
      updateUI(data)
    } catch (error) {
      console.error('Failed to parse result:', error)
    }
  }
}

// サーバーツールを呼び出す
const fetchData = async (query: string) => {
  try {
    const result: CallToolResult = await app.callServerTool({
      name: 'generate-data',
      arguments: { query, limit: 10 },
    })
    // ontoolresultで結果を受け取る
  } catch (error) {
    console.error('Failed to call server tool:', error)
  }
}

// UIを構築
const buildUI = () => {
  const appEl = document.getElementById('app')!
  const button = document.createElement('button')
  button.textContent = 'データを取得'
  button.addEventListener('click', () => {
    fetchData('sample query')
  })
  appEl.appendChild(button)
}

// 初期化
buildUI()
app.connect().then(() => {
  console.log('Connected to MCP server')
})

const updateUI = (data: any) => {
  // データを受け取ってUIを更新
  console.log('Received data:', data)
}

<!-- mcp-app.html -->
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample App</title>
    <link rel="stylesheet" href="/src/global.css" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/mcp-app.ts"></script>
  </body>
</html>

{
  "scripts": {
    "build:ui": "cross-env INPUT=mcp-app.html vite build",
    "serve": "tsx main.ts",
    "start": "pnpm build:ui && pnpm serve"
  }
}

// これはエラーになる
inputSchema: {
  type: 'object',
  properties: {
    query: { type: 'string', description: '検索クエリ' },
  },
  required: ['query'],
}

v3Schema.safeParseAsync is not a function

// 正しい書き方
import { z } from 'zod';

inputSchema: {
  query: z.string().describe('検索クエリ'),
}

import http from 'node:http'

const httpServer = http.createServer(async (req, res) => {
  // 直接リクエストとレスポンスを扱う
  await transport.handleRequest(req, res)
})

{
  "mcpServers": {
    "my-app": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "/path/to/main.ts", "--stdio"]
    }
  }
}

pnpm add zod@^4.3.6

# 依存関係のインストール
pnpm install

# UIをビルドしてサーバーを起動
pnpm start

# initializeリクエスト
curl -X POST http://localhost:3001/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "initialize",
    "params": {
      "protocolVersion": "2025-03-26",
      "capabilities": {},
      "clientInfo": { "name": "test", "version": "1.0.0" }
    }
  }'

{
  "mcpServers": {
    "my-mcp-app": {
      "command": "npx",
      "args": ["tsx", "/path/to/your/project/main.ts", "--stdio"]
    }
  }
}

画像生成プロンプト: Claude Desktopのチャット画面。ユーザーが「カラーパレットを生成して」と入力し、AIが応答している。AIの応答の中にパレットタイプの選択肢（補色、類似色、トライアドなど）が表示されている。ダークテーマのデスクトップアプリケーション。macOSのウィンドウフレーム付き。