eco-mcp-app
eco-mcp-app
Eco via Sirensゲームサーバー [1] 用のClaude Desktopインラインウィジェットです。Claudeに「Ecoサーバーの状況はどう？」と尋ねると、メテオのカウントダウン、オンライン/合計プレイヤー数、動植物、ワールドサイズ、法律、経済、Discordへの誘導などが記載されたライブカードが返ってきます。スクリーンショットやタブの切り替えは不要です。
これは技術デモでもあります。バンドラーやReactを使用しない、手書きの最小限のMCP Apps実装 [2] であり、iframe全体が1つの300行のHTMLファイルで構成されています。デフォルトのTypeScript/ext-apps [3] スタックではなく、PythonでMCPアプリを構築する他の開発者にとってのリファレンスとして役立ちます。
レンダリング内容
┌─ Eco via Sirens ─────────── Established · day 2 · HighCollaboration · Slow ─ ● online ─┐
│ │
│ DAYS UNTIL METEOR ☄ ┌─────┐ │
│ 57 days │ 57 │ (cycle ring, │
│ Server running for 2 days · 5% through the cycle │ left│ fills as days │
│ └─────┘ tick down) │
│ │
│ ┌ Players online ┐ ┌ World ┐ ┌ Cycle progress ┐ ┌ Economy & culture ┐ │
│ │ 7 / 67 │ │ 0.52 km² │ │ day 2 │ │ 473 trades, │ │
│ │ peak 38 │ │ 96k plants │ │ 57d until ☄ │ │ 0 contracts │ │
│ │ ░░░░█░░░░░░░░░ │ │ 0 animals │ │ ██░░░░░░░░░░░░░ │ │ 171.0 culture │ │
│ └────────────────┘ └─────────────┘ └─────────────────┘ └───────────────────┘ │
│ │
│ [v 0.13.0.2] [English] [open] [admin online] Fetched 4:12 PM · [Join Discord]│
└───────────────────────────────────────────────────────────────────────────────────────┘
· · · . · . . ·
. · . * . · . (animated starfield, twinkling)
* . * ·
☄ (meteor, floats)
↙
↙仕組み
サーバー (src/eco_mcp_app/server.py) は1つのツール get_eco_server_status を公開します。これは http://eco.coilysiren.me:3001/info (Eco [4] サーバーがデフォルトで公開するパブリックな /info エンドポイント) にアクセスし、プレイヤー名を伏せた上で、テキストのみのホスト用のMarkdownフォールバックと、iframe用のJSONペイロードの2つのコンテンツブロックを返します。ツールの _meta.ui.resourceUri は、リソースとして登録されたiframe HTMLである ui://eco/status.html を指しています。
iframe (src/eco_mcp_app/ui/eco.html) はプレーンなHTML/CSS/JSであり、ビルドステップやバンドラー、Reactは使用していません。仕様 [5] に従って、MCP Appsの初期化ハンドシェイクを手動で行います：
Iframe → ホスト:
ui/initialize(リクエスト、protocolVersion: 2026-01-26を含む)ホスト → Iframe: 初期化結果
Iframe → ホスト:
ui/notifications/initialized(通知)ホスト → Iframe: 対応するツールが実行されるたびに
ui/notifications/tool-result
ハンドシェイクは約30行です。ext-apps SDK [3] はより多くの機能（自動リサイズ、機能ネゴシエーションなど）を提供しますが、読み取り専用のダッシュボードには不要であり、記述することで仕様が読みやすくなります。
参照
このリポジトリは小さなEcoエコシステムの隣に位置しています：eco-cycle-prep [6] はサイクルごとのセットアップ（ワールド生成、Discord通知、MOD同期）を実行し、eco-agent [7] は同じサーバー用の初期のFastAPIコンパニオンサービスでした。eco-mods-public [8] はゲームプレイMODが配置されている場所です。サーバーインフラは infrastructure [9] (k3s + pyinvoke + external-secrets + Traefik) で定義されています。Ecoの標準的なリファレンス：ModKit [10]、MODドキュメント [11]、Eco wikiのMODページ [12]、Discordブリッジプラグイン [13]、MODカタログ [14]。
インストール (ローカル、Claude Desktop)
Claude Desktopは起動時にのみMCPを読み込むため、インストール後に再起動が必要です：
cd /Users/kai/projects/coilysiren/eco-mcp-app
uv sync
python scripts/install-desktop-config.pyその後、Claude Desktopを完全に終了 (⌘Q) して再起動してください。新しいチャットで以下のように入力します：
Use eco-mcp-app to show me the Eco server status.
メテオカードがインラインで表示されるはずです。
デプロイ (ホームラボ)
長期的なターゲットは、すでに eco-agent をホストしている同じk3sクラスター上の eco-mcp.coilysiren.me です。パターンは infrastructure [9] から変更されていません：
Dockerイメージのビルド (
DockerfileTODO)deploy/内のマニフェスト (Deployment, Service, Ingress, cert-manager経由のTLS, ClusterIssuerはインフラリポジトリに既存)シークレットは不要 —
/infoエンドポイントはパブリックであり、サーバーは環境変数なしで実行されます
MCP-over-HTTPには独自の仕様上の落とし穴（セッションIDの分割やリソース登録のスコープなど、ext-apps#481で追跡中）があるため、最初のデプロイは、mcp SDKのHTTPトランスポートを介してStreamable-HTTPサーバーとしてラップされたstdioバイナリと同じものになる可能性が高いです。これは後のサイクルの課題です。
スモークテスト
MCP → iframe → レンダリングのフロー全体は、Claudeなしでstdioを介してテスト可能です：
inv smokeid=2 で両方の形式の _meta.ui.resourceUri、id=3 で実際のサイズのHTMLリソース、id=4 で "view":"eco_status" を含むJSONペイロードを確認してください。
開発ハーネス (Claudeを再起動せずにiframeを反復開発)
dev/harness.html は、Claude DesktopのMCP Appsホストを模倣した最小限のHTMLページであり、通常のブラウザでiframeを開発できるため、変更のたびに ⌘Q / 再起動を行う必要はありません。ハーネスの機能：
src/eco_mcp_app/ui/eco.htmlをiframe (visibility: hidden) として読み込みます。iframeからの
ui/initializeをリッスンし、有効なMcpUiInitializeResult(protocolVersion, hostInfo, hostCapabilities, hostContext) で応答します。ui/notifications/initializedを受け取ると、iframeを表示します。ui/notifications/size-changedをリッスンし、報告された{width, height}をiframe.style.heightに適用します。これはClaude Desktopが実際に使用しているメカニズムであり、claude-ai-mcp#69 で説明されているdocumentElement.heightの読み取りではありません。表示後、モックのEco
/infoペイロードを含むui/notifications/tool-resultをプッシュし、render()を実行させます。
実行コマンド：
inv harness
# then open http://localhost:8765/dev/harness.htmlハーネス上部のステータスバーには、最後に報告された size-changed 値が表示されるため、iframeがホストにリサイズを指示しているかを確認できます。「Loading…」のまま動かない場合は、ハンドシェイクが失敗したか、connect() に到達する前にiframeのスクリプトがエラーをスローしています。DevToolsコンソールを確認してください。
このハーネスは、.claude/launch.json の eco-harness エントリを介してClaude Codeのプレビューパネルからも使用可能です。
MCP Apps — 構築中に学んだ自明ではないこと
_meta.ui.resourceUriは、ネストされた形式 (ui.resourceUri) とフラットな形式 (ui/resourceUri) の 両方 で設定する必要があります。ホストによっては片方しか認識しない場合があります [15]。MIMEタイプは正確に
text/html;profile=mcp-appである必要があります。単なるtext/htmlではMCP Appsのレンダリングはトリガーされません。クライアント側のJSでハンドシェイクを実行しない場合、Claude Desktopはiframeコンテナを
visibility: hiddenのままにします。つまり、スクリプトなしのテストHTMLは有効な分離手段ではなく、壊れたアプリと同一に見えます [16]。Claude Desktopのサンドボックスiframeは、
_meta.ui.csp拡張を無視するハードコードされたCSPを強制します [17]。外部画像のオリジンはブロックされます。サムネイルが必要な場合は、サーバー側でdata:image/...;base64,...URIとしてインライン化してください。これらは常に許可されます。Claude DesktopのチャットUI (
clientInfo.name = "claude-ai") のみがio.modelcontextprotocol/ui拡張機能をアドバタイズします。Claude Code Desktopのエージェントハーネス (clientInfo.name = "local-agent-mode-*") はアドバタイズしないため、iframeはそこでレンダリングされません。フォールバックのインライン可視化パスとして、Launchプレビューパネル（ローカルHTMLファイルに対するWriteまたはEditツール呼び出しでトリガー）を使用してください。
ライセンス
MIT。
参照
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Tools
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/coilysiren/eco-mcp-app'
If you have feedback or need assistance with the MCP directory API, please join our Discord server