Run comprehensive verification checklists for MCP Apps covering correctness, compatibility, and migration completeness.
Overview
MCP Apps have several critical invariants that must be verified before deployment. This skill provides systematic verification across multiple dimensions:
Runtime verification: App loads and functions in basic-host reference
Pattern verification: Critical code patterns are correct (handler-before-connect, text fallback)
Build verification: Single-file bundle is valid and complete
CSP verification: All origins declared, no silent failures
Migration verification: No remaining legacy patterns (OpenAI, old MIME types, snake_case)
Capabilities
basic-host Test Execution
Build the MCP App
Start the server
Launch basic-host reference implementation against the server
Verify app loads without console errors
Verify handlers fire correctly
Handler-Before-Connect Invariant
Search source code for app.connect() call
Verify ALL handlers (ontoolinput, ontoolresult, onhostcontextchanged, onteardown) are registered BEFORE connect
Flag violations -- handlers registered after connect will silently not work
Text Fallback Verification
Search all tool handlers for content array in return value
Verify each tool returns at least one { type: 'text', text: '...' } entry
Flag tools that only return structuredContent without text fallback
Resource URI Link Integrity
Extract all resourceUri values from registerAppTool calls
Extract all URIs from registerAppResource calls
Verify every tool resourceUri has a matching registered resource
Flag orphaned resources (registered but not referenced)
Single-File Bundle Verification
Build the project
Verify dist/mcp-app.html (or equivalent) exists
Check the HTML file is self-contained (no external <script src>, <link href>, <img src> to relative paths)
Verify vite-plugin-singlefile is in dev dependencies
Host Styling Verification
Search CSS for var(--color-*, var(--font-*, var(--border-radius-* patterns
Verify fallback values are present: var(--color-background-primary, #ffffff) not just var(--color-background-primary)
Check onhostcontextchanged handler exists and applies styling
CSP Verification
Build and search output for network origins
Compare against CSP configuration in registerAppResource
Flag origins present in code but missing from CSP
Verify conditional origins match between runtime and CSP config
Legacy Pattern Detection (Migration)
Search for remaining OpenAI patterns: window.openai.toolInput, window.openai.toolOutput, window.openai
Search for old metadata paths: openai/
Search for old MIME types: text/html+skybridge
Search for hardcoded MIME type: text/html;profile=mcp-app (should use RESOURCE_MIME_TYPE)
Search for snake_case CSP: _domains" or _domains: (should be camelCase)
Usage
Full Verification Workflow
# Step 1: Build the project
npm run build
# Step 2: Verify single-file bundlels -la dist/mcp-app.html
# Should be a single file with all assets inlined# Step 3: Check for external references in bundle
grep -E '<script src="|<link.*href="|<img src="(?!data:)' dist/mcp-app.html
# Should return NOTHING (all assets inlined)# Step 4: Start server
npm run serve &
SERVER_PID=$!
# Step 5: Test with basic-hostcd /tmp/mcp-ext-apps/examples/basic-host
SERVERS='["http://localhost:3001/mcp"]' npm run start
# Verify: app loads, handlers fire, styling applies# Step 6: Stop serverkill$SERVER_PID
Pattern Verification Commands
# Handler-before-connect check# Find app.connect() and verify handlers are above it
grep -n 'app\.connect\|\.ontoolinput\|\.ontoolresult\|\.onhostcontextchanged\|\.onteardown' src/main.ts
# Text fallback check# Every tool handler should return content array
grep -A5 'return {' src/server.ts | grep -c 'content:'# Resource URI linking
grep 'resourceUri' src/server.ts
grep "registerAppResource" src/server.ts
# RESOURCE_MIME_TYPE usage (not hardcoded)
grep 'RESOURCE_MIME_TYPE' src/server.ts
grep "text/html;profile" src/server.ts # Should NOT match# CSS variable fallbacks
grep -c 'var(--.*,' src/global.css # Count with fallbacks
grep 'var(--' src/global.css | grep -v ','# Flag missing fallbacks