Ext Apps

Add the MCP Apps library to your project. This package provides the core primitives for building interactive MCP app views.

npm install -S @modelcontextprotocol/ext-apps

For React-based app views, install the React subpackage which provides hooks like useApp and useHostStyles for connecting your UI to the MCP host environment.

npm install -S @modelcontextprotocol/ext-apps/react

Create a React component using the provided hooks. The useApp hook gives your component access to data passed from the MCP tool, and useHostStyles provides theme tokens from the host chat client.

import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';

export function MyAppView() {
  const { data } = useApp();
  const styles = useHostStyles();
  return <div style={{ color: styles.foreground }}>{JSON.stringify(data)}</div>;
}

On your MCP server, register the tool to return an app resource URI instead of plain text. The host client will fetch and render the UI at that URI.

Add your MCP server to the client config. The ext-apps SDK handles the rendering bridge between your server's tool output and the host chat client.

{
  "mcpServers": {
    "my-app-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-pdf"]
    }
  }
}

The repository includes 15+ example servers demonstrating real implementations: 3D globe viewers, PDF readers, live transcription interfaces, budget allocation tools, and system monitors. Run any demo locally to see the full stack in action.

git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
# Run a demo server