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

ツールが 1 つ(get_recent_earthquakes)と、リソースが 1 つ(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 を注入し、サーバーはそれを読み取ります。

ツールを起動するプロンプト

• "最近の地震を見せて"

• "今日、地震活動はありましたか?"

• "この 1 週間で大きな地震はありましたか?"

ウィジェットをインタラクティブにする仕組み

状態は window.openai.setWidgetState によって再レンダリング後も保持されます。

他のデータソースに応用する

変更箇所は 2 か所で、どちらもコード内にマークされています。

1. server.js — fetchData 関数。{ items: [...], meta: {...} } を返してください。新しいドメインに合わせて、ツール名、説明、inputSchema も更新してください。

2. public/widget.html — render 関数と、2 つの操作ハンドラー。

その他すべて(トランスポート、リソース登録、CORS、メタデータ)はドメインに依存しません。

時間を無駄にする落とし穴

• window.openai が undefined になる → リソースの mimeType が正確に text/html+skybridge になっていません。

• callTool が何も実行しない → ツールに _meta["openai/widgetAccessible"]: true がありません。

• ウィジェットが API を直接フェッチできない → iframe の CSP がブロックしています。サーバーサイドでフェッチしてください。

• Athena に古いツールが表示されたままになる → 設定 → コネクタ → 更新 を実行してください。

• Athena のドキュメントでは @modelcontextprotocol/sdk/server/streamable-http.js をインポートしています。そのパスは存在しません。正しくは streamableHttp.js です。