はじめに
AnthropicのClaude向けに公開されている Claude Code Viewer をご存じでしょうか？
これはClaudeの実行内容や会話をWebブラウザから確認・管理できる非常に便利なツールです。
紹介記事はこちら → Claude Code Viewer 紹介記事
GitHubはこちら → d-kimuson/claude-code-viewer
素晴らしいツールを公開してくださった作者の方に感謝いたします。UIなどはほぼそのまま使わせてもらっており、非常に助かっています。
あと、少し前からChatGPTのPlusプラン以上のユーザーは追加料金なしでCodex CLIを利用可能になっており、これをきっかけに、Claude CodeとCodexを併用して開発する場面が増えてきました。
このClaude Code Viewerをベースに、Codexでも動作するように変更したWebクライアント「Codex Viewer」 を作成しました。
リポジトリはこちらです。
Codex Viewer (nogataka/codex-viewer)
本記事では、Codex Viewerの概要、特徴、導入方法、そして今後の展望について詳しく紹介します。
Codex Viewerとは？
Codex Viewerは、単なるログビューアーではなく、Codexの操作を効率化し、Web上から管理できるフル機能クライアントです。
Codexはエージェント的な利用やマルチプロジェクトでの活用が多く、セッションやタスクの管理が複雑になりがちです。
そこで、Web UIで以下を実現しました。
-
新規チャット作成
Web上から新しいCodexセッションを開始できます。 -
セッション再開
過去の会話をそのまま引き継いで再開可能。コンテキストを維持したまま再利用できます。 -
リアルタイムタスク管理
Codexが実行している処理をリアルタイムで監視、停止や中断も可能です。 -
ステータス表示
実行中・一時停止・完了など、現在の状態をアイコンや色で直感的に確認できます。 -
コマンド補完
グローバル／プロジェクト固有コマンドを補完し、操作を効率化します。
Claude Code Viewerとの違い
Claude Code ViewerはClaude専用でしたが、Codex Viewerでは以下の拡張を行いました。
-
Codexセッションとの互換性
~/.codex/sessions/配下のJSONLファイルを監視対象に変更。
Codexの出力ログに即座に対応しています。 -
Server-Sent Events (SSE)による同期
ファイル更新を監視しつつ、リアルタイムでWeb UIにストリーミング反映。
これにより、進行中のCodexセッションが即座にブラウザに表示されます。 -
Codexタスク特有の操作
- タスク中断
- 実行状況のモニタリング
- プロジェクト別管理
Claude Code Viewerの利便性を引き継ぎつつ、Codexに最適化されています。
技術的背景
Codex Viewerは以下の技術をベースにしています。
-
Next.js (Reactベースフレームワーク)
フロントエンドとバックエンドの統合が容易。 -
Tailwind CSS
UIをシンプルかつ美しく構築。 -
Server-Sent Events (SSE)
CodexセッションのJSONLファイル更新を即時にブラウザへ配信。 -
ファイル監視 (fs.watch)
セッションディレクトリの変更をトリガーにリアルタイム反映。
この構成により、ターミナルで確認していたCodexの実行内容を、Web UI上で快適に管理できるようになっています。
利用シナリオ
Codex Viewerは、次のような場面で特に効果を発揮します。
1. マルチプロジェクト開発
複数のCodexセッションを同時に扱う際、ターミナルではログが混在してしまいます。
Codex Viewerを使えば、プロジェクト単位でセッションを整理し、切り替えて利用可能です。
2. チームでのデバッグ共有
ブラウザベースなので、同僚と画面を共有しながらセッションを確認できます。
特にペアプロやリモート環境でのデバッグに有効です。
3. ログの可視化と履歴管理
JSONLファイルを直接確認するよりも直感的に理解できます。
また、過去のセッションを探すのも容易です。
導入方法
Quick Start (CLI)
インストール不要で、すぐに実行できます。
PORT=8080 npx @nogataka/codex-viewer@latest
ソースから利用する場合
-
リポジトリをクローン
git clone https://github.com/nogataka/codex-viewer cd codex-viewer -
パッケージをインストール
npm install -
開発サーバーを起動
npm run dev -
ブラウザでアクセス
http://localhost:3000
以上でCodex Viewerを利用できます。
今後の展望
- Docker対応: より簡単に環境構築できるようにする予定
- マルチユーザー対応: チーム利用を想定した認証・権限機能
- 可視化強化: グラフやタイムライン表示によるセッション解析
- プラグイン連携: Codexエージェント拡張との統合
まとめ
- Codex Viewerは、Claude Code ViewerをベースにCodex環境へ対応させたWebクライアント。
- 新規セッション作成、再開、タスク管理、リアルタイム同期などの機能を提供。
- チーム開発やマルチプロジェクト管理に特に有効。
- 今後の拡張性も高く、Codexユーザーにとって実用的なツール。
ぜひ試してみてください。
Codex Viewer (nogataka/codex-viewer)