はじめに
最近、Codexの5時間制限がまた気になるようになりました。
Codexはかなり便利なんですが、利用枠に当たると当然そこで作業が止まります。
そこで、
「ブラウザ版ChatGPTを、そのままローカル開発につなげられないかな？」
と思って作ったのが Code Edit Bridge（CEB） です。
GitHubで公開しています。
- GitHub
https://github.com/harumi-863/code-edit-bridge - Release
https://github.com/harumi-863/code-edit-bridge/releases
現在は 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.mdINSTALL_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の利用枠に当たって、エージェントが使えない時間どうしよう」
というものでした。
なので最終的に、
エージェントを使って、エージェントが使えないときに使うコーディングツールを作った
という、なんか一周した状態になりました。
興味があれば触ってみてください。