Skip to main content
Glama

Athena Agent — 实时地震数据流

一个由 MCP 服务器支撑的 Athena AI 代理。它从 USGS 公共数据流中拉取真实地震读数,并在聊天中将其渲染到交互式小部件中。

运行

npm install
npm start          # http://localhost:8787/mcp

在使用 Athena 之前,请先验证:

npx @modelcontextprotocol/inspector@latest --server-url http://localhost:8787/mcp --transport http

你应该会看到一个工具 get_recent_earthquakes 和一个资源 ui://widget/quakes.html,其 mimeType 为 text/html+skybridge。

Related MCP server: usgs-earthquakes

通过 HTTPS 暴露

Athena 需要 HTTPS。开发时:

ngrok http 8787

在 https://athenachat.bot/chatbot/mybots/create 注册该代理,并将 MCP URL 设置为 https://<your-subdomain>.ngrok.app/mcp — /mcp 路径是必需的。

若需要一个在演示结束后依然有效的 URL,请推送此仓库并部署到 Render 或 Railway。构建命令为 npm install,启动命令为 npm start。两者都会注入 PORT,服务器会读取该变量。

触发该工具的提示词

  • "显示最近的地震"

  • "今天有地震活动吗?"

  • "过去一周有大地震吗?"

是什么让小部件具有交互性

控件

行为

震级滑块

在浏览器中即时筛选,不调用服务器

点击行

展开深度、坐标、海啸标志

时间窗口按钮

通过 window.openai.callTool 再次调用 get_recent_earthquakes,并用新数据重新渲染

重新渲染后,状态通过 window.openai.setWidgetState 得以保留。

将此适配到其他数据源

有两处需要修改,代码中均已标记。

  1. server.js — fetchData 函数。返回 { items: [...], meta: {...} }。 同时更新工具名称、描述和 inputSchema,以匹配新的领域。

  2. public/widget.html — render 函数,以及两个控件处理程序。

其余一切(传输、资源注册、CORS、元数据)均与领域无关。

会浪费你时间的事情

  • window.openai 未定义 → 资源的 mimeType 不完全是 text/html+skybridge。

  • callTool 无任何效果 → 该工具缺少 _meta["openai/widgetAccessible"]: true。

  • 小部件无法直接获取 API 数据 → iframe 的 CSP 会阻止该操作。请在服务端获取。

  • Athena 仍然显示旧工具 → Settings → Connectors → Refresh。

  • Athena 的文档导入的是 @modelcontextprotocol/sdk/server/streamable-http.js。 该路径不存在。正确的是 streamableHttp.js。

Related MCP Connectors

Related MCP Servers