DEV Community: Mayur Rawte

Render MCP Apps in your own host in 5 minutes

Mayur Rawte — Tue, 01 Sep 2026 17:18:49 +0000

In January, MCP Apps (SEP-1865) became the first official extension to the Model Context Protocol, co-authored by Anthropic and OpenAI. Tools can now return interactive UIs — dashboards, forms, viewers — and Claude, ChatGPT, Goose, and VS Code render them inline in the conversation.

That's great if your users live in Claude. But a lot of us are building our own hosts: internal agent consoles, MCP inspectors, vertical chat products, gateway UIs. And the moment a connected server declares a ui:// resource, you're on the hook for the host side of the spec:

fetch the resource and render its HTML in a sandboxed iframe
construct and enforce the CSP the resource declared in _meta.ui.csp
answer the app's ui/initialize request over JSON-RPC/postMessage, and hold all notifications until it confirms ui/notifications/initialized
deliver ui/notifications/tool-input and tool-result at the right lifecycle moments
proxy tools/call from the app back to your MCP client (respecting tool visibility)
resize the iframe on ui/notifications/size-changed
ask the app to wind down with ui/resource-teardown before you unmount it

None of it is hard. All of it is fiddly, and every host rebuilds it.

The 5-minute version

McpAppFrame from mcp-elements is a copy-paste React component (shadcn model — the source lands in your repo) that implements the host side of SEP-1865:

npx mcp-elements add mcp-app-frame

import { McpAppFrame } from '@/components/mcp-app-frame'

// 1. Your MCP client reads the ui:// resource the tool declares
const { contents } = await client.readResource({ uri: tool._meta.ui.resourceUri })
const resource = contents[0] // mimeType: text/html;profile=mcp-app

// 2. Render it
<McpAppFrame
  html={resource.text}
  resourceMeta={resource._meta?.ui}
  hostContext={{ theme: 'dark' }}
  callTool={(name, args) => client.callTool({ name, arguments: args })}
  toolInput={toolArgs}
  toolResult={result}
  openLink={(url) => window.open(url, '_blank', 'noopener')}
/>

That's a working SEP-1865 host surface. The frame:

renders the HTML via srcdoc with sandbox="allow-scripts" (no allow-same-origin — the app gets an opaque origin),
injects a <meta http-equiv="Content-Security-Policy"> built from the resource's declared connectDomains / resourceDomains / frameDomains, falling back to the spec's restrictive default (no external access) when the metadata is absent,
answers ui/initialize with your hostInfo, capabilities derived from which delegates you passed, and hostContext (theme, container dimensions, locale),
queues tool-input / tool-result notifications until the app sends ui/notifications/initialized — the spec forbids sending anything earlier,
proxies the app's tools/call and resources/read requests to the delegates you provided, returning JSON-RPC errors when you didn't,
grows the iframe as the app reports size-changed, and
sends ui/resource-teardown on unmount and gives the app a moment to respond.

It's runtime-free — there is no MCP client inside. You bring @modelcontextprotocol/sdk, mcp-use, or your own; the component only asks for two functions.

If you'd rather own the protocol logic without React, the same state machine is a plain-TypeScript factory in @mcp-elements/core:

import { createAppHost } from '@mcp-elements/core'

const host = createAppHost({
  postMessage: (msg) => iframe.contentWindow.postMessage(msg, '*'),
  callTool: (name, args) => client.callTool({ name, arguments: args }),
})
window.addEventListener('message', (e) => {
  if (e.source === iframe.contentWindow) host.receive(e.data)
})

What about @mcp-ui/client and the official SDK?

Use them! @mcp-ui/client and the ext-apps App Bridge are excellent, and they're npm dependencies maintained by the community and the MCP org. mcp-elements takes the shadcn stance instead: the source is copied into your repo, so when you need to change how consent looks or where tool results render, you edit a file you own. It also comes with the rest of the host surface — the OAuth consent dialog, scope inspector, tool-call card, resource browser — which no SDK ships.

Try it

Live demo (a real app doing the handshake in the frame): https://mcp-elements.wearesnx.studio/components/mcp-app-frame
Repo (MIT): https://github.com/mcp-elements/ui
The full host kit: https://mcp-elements.wearesnx.studio

I'm building this in the open — if you're building an MCP host and something's missing from the set, open an issue and tell me what screen you had to hand-roll.

Every MCP client rebuilds the same seven screens

Mayur Rawte — Tue, 07 Jul 2026 13:51:16 +0000

MCP went from 2M to 97M monthly SDK downloads in a year. There are over 9,400 servers in the registry. A lot of people are suddenly building MCP clients — and if you've built one, you already know where this is going, because you've built these screens:

A card that shows a tool call: name, arguments, a spinner, then a result or an error with a retry button.
A consent dialog that lists OAuth scopes in language a human can approve.
A form generated from a tool's JSON Schema, with validation.
A scope inspector for "what exactly can this server touch?"
A resource browser for whatever the server exposes.
A connection status badge.
And if you're on the MCP Apps spec: a sandboxed iframe with a postMessage bridge.

None of these are hard the first time you describe them. All of them are annoying the third time you build them. The tool-call card alone is a state machine with six states (idle, pending, running, done, error, cancelled), retry logic, theme tokens, and accessibility work — call it a week if you do it properly, which is exactly why most clients don't.

The chat side of this stack is well served. Vercel's AI Elements, assistant-ui, CopilotKit — good projects. But they're React-only (CopilotKit also does Angular), and none of them ship the MCP-specific pieces. The one multi-framework option, Deep Chat, is a single monolithic widget, not primitives you can compose. When I went looking for a consent dialog I could copy into an Angular app, there wasn't one. So I built the set.

What mcp-elements is

38 components you copy into your project with a CLI:

npx mcp-elements add mcp-tool-call

That drops the component source, its CSS, and the core state machine it uses into your repo, with imports rewritten to relative paths. There is no runtime dependency to upgrade or get broken by. If you want to change how the retry button works, you edit the file. It's the shadcn model, applied to MCP.

Seven components are MCP-specific — the list above. The other 31 are the base and AI pieces you need around them: chat bubble, streaming text, prompt input, source card, buttons, dialogs, the usual.

Here's a full MCP flow in three components:

import { McpServerStatus, McpToolCall, McpConsentDialog } from '@mcp-elements/react'
import { createToolState } from '@mcp-elements/core'

// 1. Connection state
<McpServerStatus status="connected" serverName="github-mcp" />

// 2. OAuth consent
<McpConsentDialog
  open={showConsent}
  serverName="GitHub MCP"
  scopes={['repo:read', 'user.email:read']}
  onApprove={handleApprove}
  onDeny={handleDeny}
/>

// 3. Tool execution
const toolState = createToolState()
toolState.start({ tool: 'search_repos', args: { query: 'mcp-elements' } })

<McpToolCall state={toolState} onRetry={() => toolState.reset()} />

Why it works in React, Angular, and Vue

The architecture is three layers, and the layering is the whole trick:

CSS — plain stylesheets with OKLCH design tokens. No CSS-in-JS, no build coupling. Override the tokens, get a theme.
Core — plain TypeScript state machines: tool lifecycle, consent flow, JSON-Schema-to-form. No framework imports anywhere in the package.
Adapters — thin React, Angular, and Vue components that subscribe to the core machines and apply the CSS classes.

Because the state machine and the stylesheet are shared, the React and Angular versions of McpToolCall don't just look the same — they behave the same, transition for transition. When I fixed a focus-management bug in the dialog last week, the fix was the same fix in all three frameworks, because the bug lived in one place.

This is also my answer to a complaint I kept seeing in issue trackers: the Svelte request on vercel/ai-elements has been open since September 2025. Framework-agnostic core plus thin adapters means adding a framework is a bounded amount of work, not a rewrite. Svelte and Lit adapters are on the roadmap.

The unglamorous parts

Things that took longer than the happy path, and that you get for free by copying:

Focus management. The dialog moves focus into itself on open, traps Tab, closes on Escape, and restores focus to the trigger on close. Most hand-rolled dialogs get at least one of those wrong; mine did too, for a while.
Screen readers during streaming. Connection status uses aria-live so state changes are announced. Almost no AI component library handles this.
Contrast. Both themes pass WCAG AA. The dark theme's muted text is 9.4:1.
The six states. Tool calls fail, get cancelled, and get retried. The card renders all of it, not just the demo path.

What it isn't

It's not an MCP client SDK — you bring your own connection and wire its events into the state machines. It's not a chat framework; there's no runtime, no provider, no cloud anything. And it's v0.1: all seven MCP components ship for all three frameworks, the base set is complete in React and Angular, and Vue has ten of the base components so far, with the rest in progress.

The MCP Apps frame tracks the spec as published in January 2026. The spec is young. If it moves, the component moves — and since you own the copy in your repo, you decide when to take that update.

Try it

The docs site renders every component live on the page — the playground demos are the actual components running, not screenshots:

Docs and playground: https://mcp-elements.wearesnx.studio
GitHub: https://github.com/mcp-elements/ui
npx mcp-elements add mcp-tool-call

MIT licensed. If you've built an MCP client and something you needed isn't in the set, open an issue — the next batch of components gets picked from real gaps, not my guesses.