コーディングエージェントの作業をWebでライブ観戦できる「agentcast」を作った

by fujimura
AI開発ツール
#agentcast#Claude Code#Skill#WebSocket#Render

Claude Code や Codex などのコーディングエージェントは、グラフやレポートといったリッチなHTMLを生成できるのに、ターミナルの中ではそれを表示できません。せっかくの成果物を見るために、いちいちファイルを開くのも面倒です。さらに言えば、エージェントが長時間自律的に作業する時代には、「ターミナルに張り付いて見守る」こと自体が不自然になっていくはずです。

そこで開発したのが agentcast です。デプロイしたWebページを開いておくと、エージェントのセッションがリアルタイムでミラーされ、生成されたHTML成果物がその場で描画されます。別の画面にページを開いておけば、エージェントの作業を「ライブ観戦」できるというわけです。

何ができるのか

ビューアは2ペイン構成になっています。

  • 左ペイン（Console）: 会話やツール実行のログが、ターミナルさながらにリアルタイムで流れる
  • 右ペイン（Output）: エージェントが生成したHTML成果物（グラフ・レポート・比較表など）がカードとして描画され、タブで履歴を切り替えられる
agentcastのスクリーンショット

各ペインは×ボタンで閉じられるので、成果物だけを全画面で眺めるダッシュボード的な使い方もできます。配信はWebSocketなので、ページをリロードしなくても更新は一瞬です。

使い方は、Claude Code に話しかけるだけです。

あなた: ライブビュー開始
Claude: ミラーを開始しました。https://agentcast.onrender.com で見られます

あなた: 売上データを分析してグラフにして
Claude: （分析を実行し、グラフのHTMLを生成して自動でビューアにプッシュ）

仕組み

構成要素は2つだけです。

要素役割
サーバー（Express + ws）HTTPで成果物を受信し、WebSocketで全閲覧者に即時配信。Render の無料プランにそのままデプロイできる
スキル（Claude Code Skill）HTML成果物のプッシュと、セッションのミラーをエージェントに実行させる

面白いのはミラーの実現方法です。Claude Code はセッションの全ログをローカルのトランスクリプトファイル（JSONL）に書き出しています。スキルが起動する小さなリレープロセスがこのファイルを tail し、会話やツール実行をWebSocketでサーバーに流し込むのです。MCPサーバーもhooksも不要で、Skillだけで完結します。

Render無料プランで運用する工夫

Renderの無料プランは15分間アクセスがないとスピンダウンし、メモリ上の履歴も消えてしまいます。agentcast はこれを前提に、「正本はローカル」という設計にしました。

  • セッション中はリレーが定期的にpingを送り、サーバーを起こし続ける
  • サーバーが再起動したら、リレーが直近セッション全体を自動でリプレイして状態を再構築する
  • 後から見たいときは「ライブビュー復元」と言えば、ローカルのトランスクリプトとHTMLキャッシュから最後のセッションを復元できる

サーバーは完全にステートレスでよくなり、無料プランでも実用になります。

なぜ「Skill」として作るのか

MCPサーバーとして作る選択肢もありましたが、あえてSkillにしました。Skillはただの指示書（SKILL.md）と数本のスクリプトなので、導入はディレクトリを置くだけ。常駐プロセスの管理も接続設定も要りません。プッシュ側は単なるHTTP POSTなので、Claude Code に限らず、シェルを実行できるエージェントなら Codex などからでも使えます。

リポジトリ

コードはGitHubで公開しています。Render の Blueprint に対応しているので、リポジトリを取り込むだけでデプロイできます。

https://github.com/kofujimura/agentcast

おわりに

今回作ったのは一方向のミラーですが、本当に作りたいのはその先です。ビューア側に入力欄を付け、音声で指示を送れるようにすれば、ターミナルを一切見ずにエージェントと協働する世界——コンソールはエージェントの作業場であって、人間はWebから成果だけを眺めて方向を指示する世界——が見えてきます。エージェントとの付き合い方が「操作」から「観戦と采配」に変わっていく、その入り口になるツールだと思っています。ぜひ使ってみてください。