👻

Codex Viewer: Codex向けのWebベース管理・ビューアー

に公開
ChatGPT
AI駆動開発
Claude Code
Codex
Codex CLI
tech

はじめに

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では以下の変更を行いました。

  1. Codexセッションとの互換性
    ~/.codex/sessions/ 配下のJSONLファイルを監視対象に変更。
    Codexの出力ログに即座に対応しています。

  2. Server-Sent Events (SSE)による同期
    ファイル更新を監視しつつ、リアルタイムでWeb UIにストリーミング反映。
    これにより、進行中のCodexセッションが即座にブラウザに表示されます。

  3. 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

ソースから利用する場合

  1. リポジトリをクローン

    git clone https://github.com/nogataka/codex-viewer
cd codex-viewer

  2. パッケージをインストール

    npm install

  3. 開発サーバーを起動

    npm run dev

  4. ブラウザでアクセス

    http://localhost:3000

以上でCodex Viewerを利用できます。

今後の展望

  • Docker対応: より簡単に環境構築できるようにする予定
  • マルチユーザー対応: チーム利用を想定した認証・権限機能
  • 可視化強化: グラフやタイムライン表示によるセッション解析
  • プラグイン連携: Codexエージェント拡張との統合

まとめ

  • Codex Viewerは、Claude Code ViewerをベースにCodex環境へ対応させたWebクライアント。
  • 新規セッション作成、再開、タスク管理、リアルタイム同期などの機能を提供。
  • チーム開発やマルチプロジェクト管理に特に有効。
  • 今後の拡張性も高く、Codexユーザーにとって実用的なツール。

ぜひ試してみてください。
Codex Viewer (nogataka/codex-viewer)

Discussion