MCP Apps for React

Give your tools a Material interface.

Embed MCP Apps in a Material 3 Expressive host, or build a Material app that follows its host. Tool results become an interface people can explore and act on.

The companion connects the official MCP Apps SDK to Material components, theme context, and display modes.

Try the demo Read the docs

Companion 0.2.1.

MCP Apps specification and SDK

A tool result you can use

Scripted demo. No LLM or API key required.

Get a forecast, choose a day, and refresh it from inside the app. Try full screen or picture in picture, then return without losing your selection. The theme controls above also update the app.

City

App status: connecting.

Loading the local demo…

From a tool call to an app

1. A tool names its app

An MCP tool declares a ui:// HTML resource. Your connected client reads that resource and passes it to McpAppFrame.

2. The frame connects

The SDK bridge initializes the sandboxed app and supplies host capabilities, Material style variables, light or dark mode, and container dimensions.

3. Results become interactive

The host sends tool inputs and results. McpAppProvider exposes them to your Material components through useToolCall.

4. Actions return to the host

The app can call server tools, request a display mode, update model context, or ask to add a chat message. The host decides which capabilities to enable.

One companion, two sides

Host an MCP App

McpAppFrame owns the iframe and SDK bridge. Read a resource, pass the tool result, and enable the callbacks your host supports. Apps can use any UI framework.

Build a Material app

McpAppProvider connects your app to its host. Read tool calls, access host capabilities, follow light or dark mode, and use the Material components you already know.

import { Material3Provider } from '@language-lit/material3-expressive'
import { McpAppFrame, useMcpAppResource } from
  '@language-lit/material3-expressive-mcp-apps'

export function ToolApp({ client, uri, toolResult }) {
  const { resource, error } = useMcpAppResource(client, uri)
  if (error) return <p role="alert">{error.message}</p>
  return <Material3Provider>
    {resource && <McpAppFrame client={client} resource={resource}
      toolResult={toolResult} title="Tool app" sandboxUrl={sandboxUrl}
      onAuthorizeToolCall={authorizeToolCall} />}
  </Material3Provider>
}

Load the core stylesheet before the companion stylesheet in each document. The getting-started guide covers local installation and registering an app resource.

Compatibility and host policy

This preview tests ext-apps and the split MCP client/server SDK at 2.0.0, Material 3 Expressive 1.3.0-rc.1, and React 19. The companion declares React 18 and 19 peers. External host interoperability has not been certified.

The host owns resource trust, tool authorization, allowed domains, and message dispatch. Browser embedding requires a separate-origin sandbox proxy. App-originated tool calls are denied unless the host explicitly authorizes each call.

Full screen is a CSS display mode with exit controls, not a modal dialog. Host light or dark mode is automatic; matching a custom Material palette requires a shared theme. This companion is not part of the core Material conformance matrix.