はじめに

最近、Codexの5時間制限がまた気になるようになりました。

Codexはかなり便利なんですが、利用枠に当たると当然そこで作業が止まります。

そこで、

「ブラウザ版ChatGPTを、そのままローカル開発につなげられないかな？」

と思って作ったのが Code Edit Bridge（CEB） です。

GitHubで公開しています。

現在は v0.1.1 です。

Code Edit Bridgeとは

Code Edit Bridgeは、ブラウザ版ChatGPTとローカルのプロジェクトをつなぐアプリです。

構成はこんな感じです。

ブラウザ版ChatGPT
        ↕
    Chrome拡張
        ↕
 Code Edit Bridge
        ↕
ローカルプロジェクト
       ↙  ↘
   Serena  Git

別のLLM APIを呼び出すのではなく、今ブラウザで会話しているChatGPTをそのまま使うのが特徴です。

例えばChatGPTに、

この機能を追加して

このバグを直して

のように頼みます。

ChatGPTが編集案を出すと、Chrome拡張がそれを検出してCEBへ渡します。

CEB側で変更内容をPreviewし、問題なければローカルのファイルへ反映できます。

Applyした変更はGitにも残ります。

基本的な流れ

通常はこんな流れです。

ChatGPTに依頼
↓
編集案を生成
↓
CEBでPreview
↓
Apply
↓
Git commit

ChatGPTが出したコードを、

コピー → IDEを開く → 該当ファイルを探す → 貼り付ける

という作業を減らすのが目的です。

また、いきなりファイルを書き換えるのではなく、Previewを挟みます。

変更内容を見て違うと思ったら、そのままキャンセルできます。

導入

現在はWindows向けです。

また、変更履歴の管理にGitを使うため、Gitがインストールされている環境を前提にしています。

GitHub Releasesから配布ZIPをダウンロードします。

ZIPには主に、

Code Edit BridgeのWindowsインストーラー
Chrome拡張
README.md
INSTALL_FIRST.txt

が入っています。

1. Code Edit Bridgeをインストール

ZIP内の

Code Edit Bridge-0.1.1.exe

を実行してインストールします。

2. Chrome拡張を読み込む

Chromeで、

chrome://extensions

を開きます。

「デベロッパーモード」を有効にして、

「パッケージ化されていない拡張機能を読み込む」

からZIP内の extension フォルダを選択します。

3. プロジェクトを登録

Code Edit Bridgeを起動して、編集したいローカルプロジェクトを登録します。

4. Chrome拡張と接続

初回はChrome拡張とCEBをペアリングして接続します。

ここまで終われば、あとはブラウザ版ChatGPTから使えます。

※ローカルのファイルを編集するアプリなので、使用は自己責任でお願いします。

Serenaを使って必要なコードを調べる

ブラウザ版ChatGPTで既存プロジェクトについて相談すると、

この関数の中身を確認したい

このクラスを使っている場所を見たい

のように、追加のコードが必要になることがあります。

毎回人間がファイルを探して貼るのも面倒なので、CEBでは Serena と連携できるようにしています。

流れはこんな感じです。

ChatGPT
↓
追加のコードが必要
↓
CEB
↓
Serenaで調査
↓
結果をChatGPTへ返す
↓
続きを考える

この往復もある程度自動化しています。

役割としては、

Serena  = コードを調べる
ChatGPT = 何を変更するか考える
CEB     = 変更を確認して反映する
Git     = 履歴を残す

という分担です。

Serenaはコードを読む側で、実際のファイル編集はCEB側で行います。

Previewに失敗した場合

ChatGPTが作った編集案と現在のコードがずれていて、Previewできない場合もあります。

その場合は無理に適用しません。

Preview失敗
↓
失敗理由をChatGPTへ返す
↓
必要ならSerenaで再調査
↓
ChatGPTが編集案を作り直す
↓
再Preview

という流れでやり直せるようにしています。

安全条件を緩めて無理やり変更するのではなく、編集案側を作り直す方針です。

Git連携

Applyした変更はGitで管理します。

AIが変更した内容を履歴として残せるので、

何が変更されたか確認する
Undo / Redoする
AIによる変更と人間による変更を分けて扱う

といったことができます。

CEB自体も、ローカルファイルを直接扱うアプリなので、このGit連携はかなり重要な部分になっています。

v0.1.1を公開しました

現在、Code Edit Bridge v0.1.1 をGitHubで公開しています。

Windows版の配布ZIPはReleasesからダウンロードできます。

Chrome拡張は現在手動読み込みですが、ブラウザ版ChatGPTから、

コードを調べる → 編集案を作る → Preview → Apply → Gitに残す

ところまでつなげられるようになっています。

余談

ちなみに、このCode Edit Bridge自体もかなりCodexを使って作っています。

そもそもCEBを作り始めた理由は、

「Codexの利用枠に当たって、エージェントが使えない時間どうしよう」

というものでした。

なので最終的に、

エージェントを使って、エージェントが使えないときに使うコーディングツールを作った

という、なんか一周した状態になりました。

興味があれば触ってみてください。