MCP Apps Builder
CodingAdvanced
Scaffolds tool + ui:// resource + postMessage bridge patterns for production-ready MCP Apps.
Trigger
/mcp-appFrequencyper 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
How It Works
/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
Skill Code
# 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
Copy and paste into your CLAUDE.md to start using immediately.
How MCP Apps Builder Works
MCP Apps Builder scaffolds a complete MCP App project by generating tool definitions, ui:// resource handlers, a postMessage bridge, and TypeScript interfaces in parallel. It then wires the components together and includes a test harness for development.
When to Use MCP Apps Builder
Ideal when you need interactive forms, data dashboards, or approval workflows directly inside the chat interface. Enables rapid prototyping without building a separate frontend.
Key Strengths
- Auto-generates tool + UI + bridge boilerplate
- In-chat interactive UI eliminates frontend overhead
- Secure postMessage-based communication pattern
- Supports form, dashboard, and approval templates