MCP Apps Studio
Expert system for building agent-rendered interactive UI: MCP Apps (ui:// resources, the ui/* postMessage bridge), mcp-ui, the OpenAI Apps SDK (window.openai), Google A2UI, and AG-UI. 14 commands, 16 skills, 13 agents, 7 runnable project templates, and 4 scripts — scaffolder, spec validator, host-portability checker, and a local host harness — that turn any product requirement into a spec-correct,
Skills in this plugin
16- ▌ MCP UI Sdk · thelobbiThis skill should be used when working with mcp-ui — createUIResource and its rawHtml/externalUrl/remoteDom content types, the five UI action types (tool, prompt, link, intent, notify), the messageId async response flow, iframe lifecycle events, and the client-side UIResourceRenderer/AppRenderer components.
- ▌ MCP Apps Sdk · thelobbiThis skill should be used when writing code against @modelcontextprotocol/ext-apps — registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, the App class and its handlers, the React useApp hook, the app-bridge entry point, and the Vite single-file build that MCP Apps expect.
- ▌ A2ui Protocol · thelobbiThis skill should be used when building A2UI (Agent to UI) interfaces — the six streamed message types, surfaces, the flat adjacency-list component model, component catalogs, JSON Pointer data binding and two-way input binding, actions vs functionCalls, CheckRule validation, and progressive streaming.
- ▌ Ag UI Protocol · thelobbiThis skill should be used when integrating AG-UI — the full event taxonomy (lifecycle, text message, tool call, state, activity, reasoning, custom), RunAgentInput, SSE and binary transports, AbstractAgent/HttpAgent, STATE_DELTA JSON Patch, generative UI, human-in-the-loop interrupts, and CopilotKit frontends.
- ▌ UI Performance · thelobbiThis skill should be used when an agent UI is slow, heavy, or janky — bundle size and single-file inlining, skeletons from tool-input, ontoolinputpartial streaming, avoiding remount via decoupled tools, polling and chunked transfer through app-only tools, offscreen pausing with IntersectionObserver, and size-change churn.
- ▌ Openai Apps Sdk · thelobbiThis skill should be used when building ChatGPT apps with the OpenAI Apps SDK — the window.openai bridge, openai/* _meta fields and their MCP Apps equivalents, widget state, display modes, the decoupled data/render tool pattern, checkout, file handling, and the esbuild component bundle.
- ▌ MCP Apps Protocol · thelobbiThis skill should be used when implementing or debugging the MCP Apps extension — ui:// resource URIs, the text/html;profile=mcp-app mimeType, every _meta.ui field, the full ui/* JSON-RPC bridge over postMessage, tool visibility, host context, display modes, and the five lifecycle phases.
- ▌ Protocol Selection · thelobbiThis skill should be used when choosing between MCP Apps, mcp-ui, the OpenAI Apps SDK, A2UI, and AG-UI for a given requirement — the decision tree, the axes that actually discriminate, valid combinations, anti-patterns, and how to keep a migration path open.
- ▌ UI Testing Harness · thelobbiThis skill should be used when testing or debugging an agent UI locally — the basic-host loop, MCP Inspector, cloudflared tunnels into Claude or ChatGPT, sendLog, the bridge-level assertions worth writing, and a triage table mapping every common symptom to its cause.
- ▌ Widget UX Patterns · thelobbiThis skill should be used when designing the visual and interaction layer of an agent-rendered widget — choosing among inline card, carousel, fullscreen, and picture-in-picture, action budgets, layout and typography rules, host theming, accessibility requirements, and the vendor dos and donts.
- ▌ UI Security Sandbox · thelobbiThis skill should be used when hardening an agent UI — authoring the narrowest _meta.ui.csp allowlists, the iframe sandbox and proxy-origin model, treating structuredContent as untrusted input, prompt-injection through rendered data, host-mediated navigation, secrets handling, and the pre-ship security checklist.
- ▌ Tool Metadata Design · thelobbiThis skill should be used when designing the tool surface behind an agent UI — action-oriented naming, descriptions that drive correct model selection, input and output schemas, structuredContent vs content vs _meta, safety annotations, tool visibility, and the discovery metadata that decides whether the app ever gets invoked.
- ▌ UI Porting Migration · thelobbiThis skill should be used when migrating an agent UI between protocols or SDKs — OpenAI Apps SDK to portable MCP Apps, mcp-ui legacy actions to the ui/* bridge, MCP Apps to A2UI, adding AG-UI to an existing app, the adapter layer that makes ports cheap, and the field-by-field mapping tables.
- ▌ UI State Architecture · thelobbiThis skill should be used when deciding where state lives in an agent UI — the three ownership tiers (authoritative business data, ephemeral UI state, durable cross-session state), the write-through loop, updateModelContext vs setWidgetState, remount survival, and AG-UI shared-state reconciliation.
- ▌ Host Capability Matrix · thelobbiThis skill should be used when deciding which MCP Apps or window.openai APIs are safe to depend on for a given host — the verified M365 Copilot support matrix for the component bridge, tool descriptor _meta, annotations, resource _meta, CSP properties, and client _meta, plus the feature-detection patterns that keep a widget portable.
- ▌ M365 Copilot Packaging · thelobbiThis skill should be used when shipping an MCP app into Microsoft 365 Copilot as a declarative agent — prerequisites, the widget host CORS URL, OAuth 2.1 and Entra SSO redirect URIs, Agents Toolkit sideloading, dynamic tool discovery, and the Copilot-specific capability gaps to design around.