MCP Apps ビルダー

コーディング上級

tool + ui:// リソース + postMessageブリッジ構成を生成し、実装を高速化します。

トリガー/mcp-app

使用頻度per feature

Full-Stack Developerなら？ Use /mcp-app to bootstrap interactive approval UIs for CI pipelines

Product Managerなら？ Prototype in-chat dashboards without a separate frontend

MCP AppsUIpostMessage拡張

動作フロー

/mcp-app [app-type] run

↓

Phase 1: scaffold components

tool-def

Generate MCP tool definition

ui-resource

Create ui:// resource handler

bridge

Set up postMessage bridge

types

Generate TypeScript interfaces

↓

Wire components + generate test harness

↓

✓ Working MCP App with tool + UI + bridge

スキルコード

# MCP Apps Builder Skill
## Trigger: /mcp-app [form|dashboard|approval]

When invoked:

1. Scaffold MCP App structure:
```
my-mcp-app/
  src/
    tools/          # MCP tool handlers
      submit.ts     # Tool that processes form data
    ui/             # ui:// resource handlers
      form.html     # Interactive UI template
      styles.css    # App-specific styles
    bridge.ts       # postMessage communication layer
    server.ts       # MCP server entry point
  package.json
  tsconfig.json
```

2. Generate tool definition:
```typescript
server.tool("show-form", {
  description: "Display interactive form to user",
  inputSchema: { type: "object", properties: { formId: { type: "string" } } },
  handler: async ({ formId }) => {
    return { content: [{ type: "resource", resource: { uri: \`ui://form/${formId}\` } }] };
  }
});
```

3. Generate UI resource:
```html
<!-- ui://form/default -->
<form id="mcp-form" onsubmit="submitToTool(event)">
  <input name="field1" required />
  <button type="submit">Submit</button>
</form>
<script>
  function submitToTool(e) {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    window.parent.postMessage({ type: 'tool-call', tool: 'process-form', args: data }, '*');
  }
</script>
```

4. Output: ready-to-run MCP App with dev server command

コピーしてCLAUDE.mdに貼り付ければ、すぐに使えます。