codex CLIでCodex GUIを実装してみた
GitHub リポジトリ:
https://github.com/HimizuNoa/Codex-GUI
OpenAIの提供するcodex CLIを活用し、Electron + Reactベースのデスクトップアプリ「Codex GUI」を実装しました。本記事では、プロジェクトの背景、アーキテクチャ、主要な機能、技術的ハイライト、そして今後の展望について解説します。
背景
- コマンドラインツールの利便性を保ちつつ、より直感的なGUI操作を実現したい
- コード生成やdiff表示、セキュリティレビューを一連の開発ワークフローとして統合したい
- Electronでクロスプラットフォーム対応し、ReactとChakra UIでモダンなUIを構築したい
プロジェクト概要
- リポジトリ: https://github.com/HimizuNoa/Codex-GUI
- ライセンス: MIT
-
技術スタック:
- Electron (Main process)
- React + Vite (Renderer process)
- Chakra UI (デザインシステム)
- child_process.spawn (codex CLI実行)
- keytar (APIキー管理)
- diff・code-reviewユーティリティ
アーキテクチャ
-
Main Process (
main/index.js)-
ipcMain.handle('run-codex', ...)でCLIをspawn -
child_process.spawnによる codex CLI 実行、stdout/stderrをストリーミング -
saveFilesFromOutputでコードフェンスからファイルを抽出し、作業ディレクトリに保存 -
shellScannerとpromptScannerによる安全性検証 - keytarでAPIキーを安全に永続化
-
-
Preload Script (
main/preload.js)-
contextBridgeでIPCをブラウザに公開 -
window.electron.invoke('run-codex', ...)を可能に
-
-
Renderer Process (
renderer/src/App.jsx)-
ChatPanelコンポーネントでプロンプトとbot応答をチャットUI表示 -
Progressインジケータで生成進捗を可視化 - 保存されたファイルをファイルブラウザに反映
-
SettingsModalでCLIフラグやLLMモデル名を設定可能
-
主な機能
1. プロンプト実行（spawn-based flow）
// main/index.js
const { spawn } = require('child_process');
ipcMain.handle('run-codex', async (_, { prompt, mode }) => {
const cli = path.resolve(__dirname, '../vendor/codex-cli/bin/codex.js');
const child = spawn(cli, ['--quiet', mode, prompt], { cwd: workingFolder, env: { OPENAI_API_KEY: apiKey } });
child.stdout.on('data', chunk => mainWin.webContents.send('run-log', chunk.toString()));
});
2. Diffビューア & インタラクティブ編集
-
diffパッチを解析し、ファイルに適用可能 - Monaco Editorと組み合わせたプレビューモードを実装
3. 自動セキュリティレビュー
-
codeReviewerサービスでOpenAIを呼び出し、生成コードの脆弱性を検査 - レビュー結果をモーダルで表示し、適用前に確認可能
4. 設定管理 & プロンプト履歴
- Electron StoreでCLIオプション（モデル、temperatureなど）を永続化
- プロンプト履歴のリスト表示 & 再実行機能
技術的ハイライト
-
node-ptyフォールバック: Ink TUI互換のため試行しつつ、標準spawnへ安全に戻す -
saveFilesFromOutput: 出力中のjavascriptブロックを自動抽出してファイル化 -
Streaming UI:
useToastとProgressフックでユーザー体験を向上 -
Vite最適化:
manualChunks設定でバンドルサイズを抑制 -
E2E IPCテスト:
__tests__/runCodex.e2e.test.jsでハンドラ動作をモック検証
今後の展望
- Monaco Editorの統合による高度なコード編集機能
- プロンプトインジェクション対策フローの強化
- プラグイン機構 & アクセシビティ強化
おわりに
追記: 本プロジェクトのコードおよびこの記事の文章は、すべてcodex CLIを用いて生成・執筆されました。
Codex CLIのパワーを直感的なGUIで扱うことで、プロンプト開発やコード生成のワークフローを大幅に効率化できます。OSSとして公開していますので、ぜひフィードバックやPRをお寄せください。
プロジェクトURL: https://github.com/HimizuNoa/Codex-GUI