MCP Apps 빌더

코딩고급

tool + ui:// 리소스 + postMessage 브리지 구조를 생성해 앱형 UX를 빠르게 구현합니다.

트리거/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 AppsUIpostMessageextension

작동 흐름

/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에 붙여넣으면 바로 사용할 수 있습니다.

MCP Apps 빌더 작동 방식

MCP Apps Builder는 원하는 앱 유형(form, dashboard, approval)을 지정하면 MCP tool 정의, ui:// 리소스 핸들러, postMessage 브릿지, TypeScript 인터페이스를 병렬로 스캐폴딩한 후, 테스트 하네스까지 포함된 실행 가능한 MCP App 프로젝트를 생성합니다.