MCP Apps

Apps

Authoring useMcpApp bridge CSP & pipeline Testing & publishing

Build interactive UI widgets that AI hosts render alongside chat — written as Vue SFCs, served as MCP UI resources.

What are MCP Apps?

MCP Apps are interactive HTML widgets returned by an MCP tool and rendered inline by compatible hosts. Instead of streaming back text, your tool ships a small UI that the user can read, scroll, filter, and click — connected back to your server through a typed message bridge.

They follow the MCP UI proposal (SEP-1865): a tool returns a text/html;profile=mcp-app resource referenced by ui://, the host loads it inside a sandboxed iframe, and the iframe talks back over postMessage.

@nuxtjs/mcp-toolkit makes that authoring experience feel like writing a regular Nuxt page:

One Vue SFC per app in app/mcp/.
A defineMcpApp macro inside <script setup> declares the tool, schema, and server handler.
A useMcpApp() composable gives you reactive data, host context, and a typed bridge to the host.
The toolkit bundles the SFC into a single self-contained HTML file at build time and serves it from your MCP endpoint.

Scaffold a new MCP App (Vue SFC)

Guides

Authoring & defineMcpApp

Quick start, app/mcp/ layout, the macro, server handler, and shared types.

useMcpApp() bridge

data, hostContext, sendPrompt, callTool, and openLink inside the iframe.

CSP & build pipeline

Allow-listed domains, openai/widgetCSP, and how the HTML bundle is wired.

Testing & publishing

Local dev, which hosts work, HTTPS deployment, ChatGPT and Claude.

Patterns & limits

UI patterns, what you cannot do in the iframe, and a compact API table.

The rest of this section assumes you are comfortable with Tools (Zod, handlers) and have read Connection for MCP URLs in dev and production.

Edit this pageorReport an issue

Sharing & practices

Cross-handler tool sharing, file layout, use cases, and next steps.

Authoring & defineMcpApp

SFC location, quick start, the defineMcpApp macro, server handler, and shared types.