How to Let Users Browse Your Archive Inside Claude

Why bring my media archive into an agent at all?

Your audience is increasingly discovering and consuming content inside agents, and Rachel Lee's framework treats agents as the new place your web content must reach. Rather than a blank chatbox — what Rachel calls the 'starfish design,' which dumps all discovery burden on the user — you can give people the same guided, visual browsing experience your website already provides, but rendered inline inside Claude. The browser is an infinite canvas, and so is the agent harness: it can render video, audio, and interactive components, not just walls of text.

How do I map my archive to MCP tools?

List every navigation action a visitor takes on your site and turn each into a tool. For a media archive that typically means `list_episodes`, `search_by_topic`, `get_transcript`, and `get_page`. Match return types to what the user needs: `get_transcript` returns Markdown for text-rich reading, while `list_episodes` and `search_by_topic` return structured JSON. The key differentiator is `get_page` — instead of returning JSON, it returns an MCP App, an interactive single-file bundle rendered inline.

Name tools the way users would naturally ask for them, and keep the count focused on your actual navigation surface rather than every internal function.

How do I reuse my existing design system inside an MCP App?

Build `get_page` as a single self-contained HTML file — HTML, CSS, and JavaScript bundled together, for example with Vite's single-file plugin. Add the meta attribute `ui` pointing to a URL on your server so the tool returns the app instead of raw data. To reuse your existing fonts and CSS, serve them from the same origin and configure a Content Security Policy (CSP) that allows those resources. A common pitfall: if you reference external fonts or images without adding them to the CSP, they're blocked by default and fail silently, producing a blank or broken app. Embed everything else as base64.

Inside the app, add forward/backward navigation via `call_server_tool` and a text-mode toggle that surfaces the transcript inline — replicating your full website experience inside the harness.

What constraints do I need to handle?

MCP Apps run in a sandboxed iframe with no local storage and no direct network access — the 'Mother May I' pattern. So any data fetch or navigation must route through `call_server_tool`. For links, don't use href or window.open; use the host-permission pattern (`appref current open_link`). And for navigation tools the app calls itself, set `visibility: app` so the model doesn't try to narrate the tool's JSON response as text instead of letting the app consume it silently.

You can also skip external services for common features: use the Web Speech API for zero-cost text-to-speech on your transcripts, and the Audio API for sound — both available inside the app's sandbox at zero inference cost.

How do I know it's working for my audience?

Verify your site still works normally in a browser, then install your HTTP MCP server in Claude Desktop and confirm `list_episodes`, `search_by_topic`, `get_transcript`, and the `get_page` MCP App all render correctly. Since your primary audience is human agent users, focus testing there.

Your next step: pick your single most-browsed content type, build `get_page` as an MCP App on your existing design system, and confirm it renders inline in Claude with working navigation.