How Do I Make My Media Archive Work Inside AI Agents?

Why Should My Media Archive Care About AI Agents?

Your audience is already working inside AI agents. They ask Claude about topics your archive covers, and Claude either draws on stale training data or has no access to your content at all. Meanwhile, your carefully organized episodes, transcripts, and articles sit behind a URL that agents cannot natively navigate.

Rachel Lee's Agentic Web Publishing Framework meets your audience where they are. The principle is simple: the web's job has always been to reach people wherever they are, and agents are the new 'wherever.'

How Do I Map My Archive to MCP Tools?

Audit your archive's navigation. Most media sites share a common structure:

- Browse: list episodes, list by category, list by date

- Search: search by topic, character, guest, keyword

- Detail: view episode page, read transcript, get metadata

Each becomes an MCP tool. `list_episodes` returns JSON with titles, dates, thumbnails (as base64 or server-origin URLs), and summaries. `search_by_topic` accepts a query and returns ranked results. `get_transcript` returns Markdown — clean, readable text the agent can quote and reference.

For the rich browsing experience, build `get_page` as an MCP App. This is where the framework's Infinite Canvas principle shines.

How Do I Build MCP Apps for Rich Media Browsing?

An MCP App is a single self-contained HTML file bundled with Vite's single-file plugin. For a media archive, your MCP App might include:

- Episode artwork rendered with your design system's CSS and fonts

- Forward/backward navigation between episodes via `call_server_tool`

- A text-mode toggle that surfaces the transcript inline

- Audio playback using the browser's Audio API — zero external dependency, zero inference cost

- Animated transitions using the Web Animations API

To use your existing design system, serve your CSS and fonts from the same origin and configure your server's Content Security Policy to allow them. For images from external CDNs, add those origins to CSP explicitly — external resources are blocked by default and fail silently.

Remember the MCP App constraints: no local storage, no direct network access. Every data fetch goes through `call_server_tool`. External links use the host-permission pattern, not `window.open`. Navigation tools called by the app itself (like 'next episode') should use `visibility: app` so the model doesn't try to narrate the JSON response.

How Do I Add Web MCP for In-Browser Agent Users?

For users running in-browser agents on your archive pages, register tools using the imperative model:

```javascript

if (navigator.modelContext) {

navigator.modelContext.registerTool(

'play_episode',

'Play the current episode audio',

{ type: 'object', properties: {} },

() => playCurrentEpisode()

);

navigator.modelContext.registerTool(

'search_archive',

'Search the archive by topic or keyword',

{ type: 'object', properties: { query: { type: 'string' } } },

(params) => searchArchive(params.query)

);

}

```

The callbacks call the same functions your JavaScript UI already uses. The agent interacts with your archive through structured tool calls instead of expensive screenshot-based DOM traversal.

What Should I Avoid?

Don't build a starfish design — a blank chatbox that says 'Ask me about our archive.' Users won't know what's available. Instead, return MCP Apps that show visual episode listings, category browsers, and featured content. Guide discovery rather than demanding it.

Don't forget to test all three client types: your archive in a browser, your MCP tools in Claude Desktop, and your Web MCP tools via the MCP B extension.

Next step: Pick your archive's five most common user actions and define them as MCP tools. That's your starting surface.