ーーWeb版ChatGPTの結果を“貼り付けるだけ”で安全にコード反映できる AI Folder Editor

最近のAIコードエディタ、便利ですよね。

Cursor
Windsurf
Claude Code
Cline
Continue

などなど。

ただ、自分にはずっと不満がありました。

API Key が必要
課金前提

そこで、自分の理想のAIエディタを作りました。

AI Folder Editor

こちらです。

GitHub Pages版（すぐ使える）

GitHub（ローカル運用向け）

※ ローカル版は File System Access API を使うため、サーバー環境で動かす必要があります。

コンセプト

このエディタの思想はかなりシンプルです。

「AIは ChatGPT のWeb版で十分」

です。

つまり、

エディタ側でプロンプト生成
ChatGPT を開く
貼り付ける
出力を貼り返す
差分確認して反映

これだけです。

API Key 不要

これがかなり重要でした。

最近のAIエディタは、

OpenAI API Key
Anthropic API Key
月額課金

などが必要なことが多いです。

でも個人的には、

「ChatGPT無料版で十分強い」

と思っています。

だったら、

ChatGPTのページを開く
貼り付ける
出力を貼り返す

だけでいい。

その少しの手間と引き換えに、

API Key不要
無料でも使える
OpenAI側のUIもそのまま使える
ChatGPT Plus にもそのまま対応

という構成のほうが好みでした。

使い方

1. フォルダを開く

「フォルダを開く」を押します。

ブラウザ上でローカルフォルダを直接編集できます。

2. ファイルを選ぶ

左のツリーから編集対象を選択。

3. AIへ依頼を書く

例えば、

この関数をリファクタしてください

など。

4. 「プロンプトをコピーしてChatGPTを開く」

押すと、

必要コードを自動収集
ChatGPTを開く
プロンプトをコピー

してくれます。

参照ファイルの自動収集

地味に便利な機能です。

現在のファイル中で参照されている名前を見て、

styles.css
utils.js
Player.cs

などを自動的にプロンプトへ含めます。

そのため、

「関連コードが足りない」

問題をかなり減らせます。

差分確認が超重要

このツールは、
AIに直接ファイルを書き換えさせません。

必ず差分確認を挟みます。

追加
削除
変更

をすべて確認できます。

しかも、

提案を採用
元のまま

をファイルごとに選択できます。

ここはかなり重視しました。

「不完全に読み込んだら反映しない」安全性

このツールには、
小さいですが安全機構があります。

AIの出力は、

OLD
既存コード

NEW
変更後コード

のような形式で扱われます。

しかし、

OLD が現在コードに一致しない
OLD が複数箇所に一致する
JSONが壊れている
Patch形式が崩れている

場合は、
処理を停止します。

つまり、

「AIが中途半端に壊れた出力をした」

場合に、
無理やり反映しません。

これはかなり重要だと思っています。

最近のAIツールは、
勢いでファイルを書き換えることが多いですが、

個人的には、

「不完全なら止まれ」

のほうが安心です。

実際かなり快適

特に便利だったのは、

HTML/CSS/JS
Unity C#
小規模Webツール
リファクタ
UI修正

です。

「ChatGPTに貼るだけ」

という割り切りが、
逆にかなり快適でした。

技術的にはかなり軽量

サーバーはありません。

ほぼブラウザのみです。

使っているのは主に：

File System Access API
Vanilla JavaScript
差分表示
Patch解析

だけです。

まとめ

自分は、

「AIが全部やるIDE」

よりも、

「人間が確認しながら使うAI補助エディタ」

のほうが好きでした。

そして、

API Key不要
無料でも使える
ChatGPTそのものを使う
差分確認できる
壊れたPatchは止める

という構成が、
かなり理想に近かったです。

もし同じ思想の人がいたら、
ぜひ使ってみてください。

GitHub Pages版

GitHub