はじめに

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)