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.setWidgetState를 통해 다시 렌더링된 후에도 유지됩니다.

다른 데이터 소스에 적용하기

변경할 곳은 두 곳이며, 둘 다 코드에 표시되어 있습니다.

1. server.js — fetchData 함수입니다. { items: [...], meta: {...} }를 반환하세요. 또한 새 도메인에 맞게 도구 이름, 설명, inputSchema를 업데이트하세요.

2. public/widget.html — render 함수와 두 컨트롤 핸들러입니다.

그 외의 모든 것(전송, 리소스 등록, CORS, 메타데이터)은 도메인과 무관합니다.

시간을 낭비하게 만드는 것들

• window.openai가 undefined인 경우 → 리소스 mimeType이 정확히 text/html+skybridge가 아닙니다.

• callTool이 아무것도 하지 않으면 → 도구에 _meta["openai/widgetAccessible"]: true가 없기 때문입니다.

• 위젯이 API를 직접 가져올 수 없으면 → iframe CSP가 차단하기 때문입니다. 서버 측에서 가져오세요.

• Athena가 여전히 이전 도구를 표시하면 → 설정 → 커넥터 → 새로고침.

• Athena 문서는 @modelcontextprotocol/sdk/server/streamable-http.js를 import합니다. 그 경로는 존재하지 않습니다. streamableHttp.js가 맞습니다.