Usher MCP

Usher MCP——电影细节应用

交互式MCP服务器和UI小部件，使用MCP Apps规范从TMDB呈现电影细节。该服务器在Cloudflare Workers上运行；UI是通过ASSETS提供并由MCP主机呈现的沙盒HTML资源。

这里有什么

• MCP服务器 (server/)暴露：

- ui://widget/movie-detail-widget.html 资源（来自ASSETS的HTML+CSS+JS） - 工具 get-movie-detail 按标题搜索TMDB并返回详细信息+演员阵容

• 小部件用户界面 (web/)使用React/Tailwind构建：

- 条目： widget.html → movie-detail-widget.js/.css - MCP应用程序生命周期： ui/initialize工具输入/结果通知， ui/open-link 用于演出时间 - Showtimes链接打开谷歌” 我附近的演出时间”通过 ui/open-link

• 根登录页面：友好留言 / 告诉访客通过 /mcp

先决条件

• 节点18+
• 牧马人CLI
• 作为机密存储的TMDB API令牌（v4承载）

安装

npm install

本地开发人员（工人）

使用 .dev.vars 关于地方秘密：

TMDB_TOKEN=your_tmdb_bearer_token

运行开发服务器：

npm run dev

MCP端点将位于 http://localhost:8787/mcp.

构建小部件

npm run web:build

输出到 web/dist/:

• movie-detail-widget.js
• movie-detail-widget.css
• widget.html

这些由MCP UI资源的ASSETS绑定提供服务。

部署到Cloudflare Workers

1. 在您的帐户中设置密码：

wrangler secret put TMDB_TOKEN

1. 部署：

npm run deploy

MCP服务器代码指针

• server/lib/mcp.ts --注册资源+工具，使用ASSETS为构建的小部件提供服务，拉取 tmdbToken 从env绑定。
• server/index.ts --Hono入口，坐骑 /mcp 以及根登录页面。
• web/src/movie-detail-widget.tsx --MCP应用程序UI逻辑+渲染。
• web/vite.config.ts --使用assets的自定义文件名构建小部件资源。

MCP工具合同

• 工具： get-movie-detail
• 输入： { "query": "" }
• 退货：

- content：文本回退 - structuredContent.movie：电影有效载荷（标题、海报/背景URL、运行时、流派、评级、演员阵容等）

主持人注意事项

• UI资源URI: ui://widget/movie-detail-widget.html
• 哑剧： text/html;profile=mcp-app
• CSP：允许 https://image.tmdb.org/ 海报/背景
• 预期MCP应用程序消息：

- ui/notifications/tool-input / tool-input-partial - ui/notifications/tool-result - ui/open-link （打开showtimes链接）

类型生成

如果配置更改，请重新生成Cloudflare绑定类型：

npm run cf-typegen

故障排除

• 缺少TMDB令牌：已设置 TMDB_TOKEN 在 .dev.vars （本地）和通过 wrangler secret put （prod）。
• 资产未加载：确保 npm run web:build 已运行，并且存在ASSETS绑定。
• 主机拒绝 ui/open-link：主机必须支持MCP应用程序 ui/open-link否则，小部件将显示错误状态。