> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userplane.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive Apps

> Rich viewers for recordings, console logs, network requests, and user actions rendered inside your AI client

The Userplane MCP server includes four interactive apps that render directly inside AI clients that support MCP Apps. Instead of reading raw data, you get video playback, filterable log viewers, network inspectors, and user action timelines.

## Available apps

| App                                                        | Tool                         | What it shows                                                                         |
| ---------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------- |
| [Recording viewer](/integrations/mcp-apps-recording)       | `userplane_show_recording`   | Video playback, session metadata, console, network, and actions in a tabbed interface |
| [Console log viewer](/integrations/mcp-apps-resources)     | `userplane_show_rec_console` | Log entries with level filtering, search, and expandable stack traces                 |
| [Network request viewer](/integrations/mcp-apps-resources) | `userplane_show_rec_network` | HTTP requests with status codes, durations, and expandable headers and bodies         |
| [User action viewer](/integrations/mcp-apps-resources)     | `userplane_show_rec_actions` | Clicks, navigation, tab switches, and page lifecycle events                           |

<Tabs>
  <Tab title="Claude">
    <Frame caption="Recording viewer in Claude — console tab">
      <img src="https://mintcdn.com/userplane/q948NEPnf1eM8DIT/media/mcp/claude/apps/show-recording-console-tab.png?fit=max&auto=format&n=q948NEPnf1eM8DIT&q=85&s=5b1ee4ac9c46dd8ca06062d0b8f0ac34" width="1920" height="958" data-path="media/mcp/claude/apps/show-recording-console-tab.png" />
    </Frame>
  </Tab>

  <Tab title="ChatGPT">
    <Frame caption="Recording viewer in ChatGPT — console tab">
      <img src="https://mintcdn.com/userplane/ruu7f4FXnw5Qs5W2/media/mcp/chatgpt/apps/show-recording-console-tab.png?fit=max&auto=format&n=ruu7f4FXnw5Qs5W2&q=85&s=bd9a03fe58a847aa858ae778299df5d2" width="2940" height="1662" data-path="media/mcp/chatgpt/apps/show-recording-console-tab.png" />
    </Frame>
  </Tab>
</Tabs>

<Info>
  Interactive viewers render in Claude (desktop and web) and ChatGPT. Other clients display the same
  data as structured text.
</Info>

## Client support

| Client                   | Interactive viewers | Fallback        |
| ------------------------ | ------------------- | --------------- |
| Claude (desktop and web) | Yes                 | —               |
| ChatGPT                  | Yes                 | —               |
| Claude Code (CLI)        | —                   | Structured text |
| Codex                    | —                   | Structured text |
| Cursor                   | —                   | Structured text |
| VS Code (Copilot)        | —                   | Structured text |

<Info>
  In clients without MCP Apps support, the same tools return structured text with identical data.
  Your agent can still analyze console errors, network failures, and user actions — only the visual
  presentation differs.
</Info>

## How it works

MCP Apps are self-contained HTML bundles served as resources by the MCP server. When your AI client supports MCP Apps, the tool response includes a reference to the app resource. The client renders the app in a sandboxed environment and passes the tool result data to it.

The apps are built with React and Tailwind CSS, matching the look and feel of the Userplane dashboard.

<CardGroup cols={2}>
  <Card title="Recording viewer" icon="play" href="/integrations/mcp-apps-recording">
    Full recording experience with video, metadata, and session data tabs
  </Card>

  <Card title="Resource viewers" icon="table" href="/integrations/mcp-apps-resources">
    Focused viewers for console logs, network requests, and user actions
  </Card>
</CardGroup>

## Related articles

* [Recording Viewer](/integrations/mcp-apps-recording) — full recording viewer with video, metadata, and session data tabs.
* [Resource Viewers](/integrations/mcp-apps-resources) — focused viewers for console, network, and action data.
* [Recording Tools](/integrations/mcp-tools-recordings) — all recording-related MCP tools and parameters.
* [Getting Started](/integrations/mcp-getting-started) — first steps after connecting your AI client.
