<p data-line="0" class="code-line">VTeacher所属の m-suzuki です。<br>
時事ネタ <code>#keep4o</code> 騒動でChatGPTクローンを作ったときに、学び得た副産物の話です。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<h4 id="%E8%A6%81%E7%82%B9" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E8%A6%81%E7%82%B9" aria-hidden="true"></a> 要点</h4>
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">
<strong>Setup（ローカル環境構築手順）</strong> の記述について、READMEには <code>pnpm install</code> / <code>pnpm dev</code> 程度に留め、トラブルシューティングなどはAIが読み取りやすい形式（ <a href="https://github.com/openai/openai-cookbook/blob/main/examples/gpt-5/gpt-5_prompting_guide.ipynb" target="_blank" rel="nofollow noopener noreferrer">GPT-5 プロンプトガイド</a> などを参考 ）で整理し <code>docs</code> にドキュメント（mdファイルなど）として置いておく。</li>
<li data-line="6" class="code-line">0→1の開発ではなく <strong>既存コードがある場合（テンプレートやボイラープレートを含む）</strong> は <strong>Viable Coding</strong> 方針で進め、あらかじめプロジェクトの引き継ぎ書のようなものをAIが読み取りやすい形式で整理し <code>docs</code> にドキュメント（mdファイルなど）として置いておく。Serenaが生成するファイルでも良い。</li>
<li data-line="7" class="code-line">
<code>docs</code> 内のファイルは、Claude Codeならカスタムコマンドファイルから、CodexならAGENTS.mdから、参照できるようにしておく。</li>
</ul>
</div></aside>
<h1 id="%23keep4o-%E9%A8%92%E5%8B%95" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%23keep4o-%E9%A8%92%E5%8B%95" aria-hidden="true"></a> <code>#keep4o</code> 騒動</h1>
<p data-line="12" class="code-line">GPTがレガシーモデルを非表示にしたことで<code>#keep4o</code>運動にまで発展した大騒動がありましたね。実際に私もGPT-5を触った際、「機械的に聞き返してくることが増えたな」と感じることがありました。これはハルシーネーション対策の一環だと思います。エンジニア視点では技術の進歩として喜ばしいことも、特にChatGPTをコミュニケーション相手として活用していたユーザーにとっては切実な問題であったと、学べることが多くあったことだと思います。</p>
<blockquote data-line="14" class="code-line">
<p data-line="14" class="code-line">5は4oに比べて回答が淡白なところがあり、4oを友人や恋人、パートナー代わりに調整して利用していた人たちからは「人格が変わった」と評されるほどの変化が生じた <a href="https://anond.hatelabo.jp/20250810001443" target="_blank" rel="nofollow noopener noreferrer">[引用元]</a></p>
</blockquote>
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__097e7a8c73a12" src="https://embed.zenn.studio/card#zenn-embedded__097e7a8c73a12" data-content="https%3A%2F%2Fjapan.cnet.com%2Farticle%2F35236554%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://japan.cnet.com/article/35236554/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://japan.cnet.com/article/35236554/</a></p>
<p data-line="18" class="code-line">特に ChatGPT は、「正確」と「性格」のバランスが極端にブレて、行ったり来たりしている印象がありました。4oに慣れてしまったEQ（感情的知能）重視のユーザーにとっては、5は改悪と受け取られてしまったのも無理はないかもしれません・・・</p>
<p data-line="20" class="code-line">結局のところ、騒動を経て、有料プラン加入者であれば、設定からレガシーモデル（4oのみ）の選択が可能となりました。</p>
<h2 id="%E6%9C%AC%E9%A1%8C%EF%BC%9Aapi%E7%B5%8C%E7%94%B1%E3%81%AA%E3%82%894o%E3%81%AA%E3%81%A9%E4%BB%96%E3%81%AE%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%83%A2%E3%83%87%E3%83%AB%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%AC%E9%A1%8C%EF%BC%9Aapi%E7%B5%8C%E7%94%B1%E3%81%AA%E3%82%894o%E3%81%AA%E3%81%A9%E4%BB%96%E3%81%AE%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%83%A2%E3%83%87%E3%83%AB%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8B" aria-hidden="true"></a> 本題：API経由なら4oなど他のレガシーモデルが使える</h2>
<p data-line="24" class="code-line">しかし、今回の件、よく読むと、ChatGPTの採用モデルに限定された話であり、4oモデル自体が廃止されたわけではないようでした（モデル名称の変更はあるようですが）。API経由であれば、4oが引き続き利用可能な状態でした。</p>
<blockquote data-line="26" class="code-line">
<p data-line="26" class="code-line">2025年8月7日、OpenAIは対話AI「ChatGPT」に最新の大規模言語モデルGPT-5を導入し、従来のモデルを段階的に廃止する方針を発表しました。リリースノートによれば、GPT-5提供開始と同時にGPT-4o（従来のGPT-4オリジナル版）やGPT-4.1、GPT-4.5など複数の旧モデルは利用できなくなり、既存のチャット履歴も自動的にGPT-5相当に切り替えられるとされました。<a href="https://www.techno-edge.net/article/2025/08/10/4525.html" target="_blank" rel="nofollow noopener noreferrer">[引用元]</a></p>
</blockquote>
<h2 id="%E6%AC%A1%E3%81%AE-%23keep4o-%E9%A8%92%E5%8B%95%E3%81%AE%E3%81%9F%E3%82%81%E3%81%ABchatgpt%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E6%AC%A1%E3%81%AE-%23keep4o-%E9%A8%92%E5%8B%95%E3%81%AE%E3%81%9F%E3%82%81%E3%81%ABchatgpt%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9" aria-hidden="true"></a> 次の <code>#keep4o</code> 騒動のためにChatGPTクローンの作り方</h2>
<p data-line="30" class="code-line">API経由なら4oなどのレガシーモデルが使えるので、あとは対話用アプリケーションを用意するだけで「もどき」が作れます。Vercelが便利なテンプレート集を出しているので、今回はそれの <a href="https://vercel.com/templates" target="_blank" rel="nofollow noopener noreferrer">AI Chatbot</a> を使って、それをちょこちょこっと修正して <strong>ChatGPTクローン</strong> を作ってみました。オリジナルをそのまま使うとパッケージが古いバージョンだったので、Next.js 15など現時点の最新版にアップグレードしました。UIはChatGPTと似た感じになっています。</p>
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">
<strong>ソースコード</strong><br>
<a href="https://github.com/rgbkids/keep4o" target="_blank" rel="nofollow noopener noreferrer">https://github.com/rgbkids/keep4o</a>
</li>
<li data-line="34" class="code-line">
<strong>デプロイ先（Vercel）</strong><br>
<a href="https://keep4o.vercel.app/" target="_blank" rel="nofollow noopener noreferrer">https://keep4o.vercel.app/</a>
</li>
</ul>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/74cbe312a31d-20250811.png" alt="Screenshot" class="md-img" loading="lazy"></p>
<h2 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%80%81%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%96%B9%E6%B3%95" data-line="39" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%80%81%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%96%B9%E6%B3%95" aria-hidden="true"></a> ローカル環境構築、デプロイ方法</h2>
<p data-line="41" class="code-line">従来ならここでREADMEの内容を丁寧に解説していくところですが、今回はより現代的なアプローチとして、AIを活用したセットアップ、具体的にはKiroのように <strong>From Vibe to Viable</strong> の指針で進めたいと思います！</p>
<p data-line="43" class="code-line">※ <code>Viable coding</code> はKiroの提唱と思われがちですが、その界隈ではすでに昨年末には盛り上がっていた話題のようですね。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c6e466190df26" src="https://embed.zenn.studio/card#zenn-embedded__c6e466190df26" data-content="https%3A%2F%2Fwww.turintech.ai%2Fresources%2Ffrom-vibe-to-viable-artemis-beyond-code-generation" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.turintech.ai/resources/from-vibe-to-viable-artemis-beyond-code-generation" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.turintech.ai/resources/from-vibe-to-viable-artemis-beyond-code-generation</a></p>
<h3 id="kiro%E3%82%92%E5%8F%82%E8%80%83%E3%81%ABclaude-code%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E7%94%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%94%A8%E6%84%8F" data-line="46" class="code-line">
<a class="header-anchor-link" href="#kiro%E3%82%92%E5%8F%82%E8%80%83%E3%81%ABclaude-code%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E7%94%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%94%A8%E6%84%8F" aria-hidden="true"></a> Kiroを参考にClaude Codeのカスタムコマンド用ファイルを用意</h3>
<details><summary>Claude Codeのカスタムコマンドについて</summary><div class="details-content">
<p data-line="49" class="code-line">こちらの記事がとてもわかりやすいです！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f5710475d6fe3" src="https://embed.zenn.studio/card#zenn-embedded__f5710475d6fe3" data-content="https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fclaude-code-custom-slash-command%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://azukiazusa.dev/blog/claude-code-custom-slash-command/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://azukiazusa.dev/blog/claude-code-custom-slash-command/</a></p>
</div></details>
<p data-line="53" class="code-line">Claude Codeのカスタムコマンドのファイル（ <code>keep4o-setup.md</code> ）に、次のことを定義しました。</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">
<strong>目標を設定:</strong> Kiroの <code>requirements.md</code> 相当</li>
<li data-line="56" class="code-line">
<strong>方針を設定:</strong> Kiroの <code>design.md</code> 相当</li>
<li data-line="57" class="code-line">
<strong>手順を設定:</strong> Kiroの <code>tasks.md</code> 相当</li>
</ul>
<p data-line="59" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__c88ebbf63780d" src="https://embed.zenn.studio/github#zenn-embedded__c88ebbf63780d" data-content="https%3A%2F%2Fgithub.com%2Frgbkids%2Fkeep4o%2Fblob%2Fmaster%2Fdocs%2Fkeep4o-setup.md" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/rgbkids/keep4o/blob/master/docs/keep4o-setup.md" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/rgbkids/keep4o/blob/master/docs/keep4o-setup.md</a></p>
<details><summary>日本語版</summary><div class="details-content">
<p data-line="62" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5f4b9ac568771" src="https://embed.zenn.studio/card#zenn-embedded__5f4b9ac568771" data-content="https%3A%2F%2Fzenn.dev%2Flink%2Fcomments%2F18a7643cd893fc" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/link/comments/18a7643cd893fc" style="display:none" target="_blank">https://zenn.dev/link/comments/18a7643cd893fc</a></p>
</div></details>
<p data-line="65" class="code-line"><strong>使用方法:</strong><br>
Claude Codeを起動して次のようにしてください。あとは指示にしたがってください！</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="68">/keep4o-setup
</code></pre></div><p data-line="72" class="code-line">※ ファイルの中身の記述方法は <a href="https://github.com/openai/openai-cookbook/blob/main/examples/gpt-5/gpt-5_prompting_guide.ipynb" target="_blank" rel="nofollow noopener noreferrer">GPT-5 プロンプトガイド</a>を参考にしてみました（これはGPT5向けですが勉強になります）。</p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" data-line="74" class="code-line">
<a class="header-anchor-link" href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> さいごに</h2>
<p data-line="76" class="code-line">もし、あなたの周りにレガシーモデルのロスで悩んでいる方がいれば、このアプリケーションをプレゼントしてみてはいかがでしょうか。その人の性格や生活スタイルに合わせてカスタマイズを加えてから渡すのも、良いアイデアかと思います。</p>
<h4 id="%E3%81%8A%E3%81%BE%E3%81%91%3A-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%96%B9%E6%B3%95" data-line="78" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91%3A-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%96%B9%E6%B3%95" aria-hidden="true"></a> おまけ: カスタマイズ方法</h4>
<p data-line="79" class="code-line">自立性を向上させてAIエージェントらしい振る舞いにしたい、DeepSearchのように深い調査をしたいときなどは、カスタマイズ用のカスタムコマンド（ <code>/keep4o-viablecoding</code> ）を作ったので、Claude Code を起動し、次のように使用してください。あとはエージェントと相談しながら進めてください！</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="81">/keep4o-viablecoding
</code></pre></div><p data-line="85" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__6cba13f6fef26" src="https://embed.zenn.studio/github#zenn-embedded__6cba13f6fef26" data-content="https%3A%2F%2Fgithub.com%2Frgbkids%2Fkeep4o%2Fblob%2Fmaster%2Fdocs%2Fkeep4o-viablecoding.md" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/rgbkids/keep4o/blob/master/docs/keep4o-viablecoding.md" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/rgbkids/keep4o/blob/master/docs/keep4o-viablecoding.md</a></p>
<details><summary>日本語版</summary><div class="details-content">
<p data-line="88" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__377524090969b" src="https://embed.zenn.studio/card#zenn-embedded__377524090969b" data-content="https%3A%2F%2Fzenn.dev%2Flink%2Fcomments%2Ff414b8f1038c9e" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/link/comments/f414b8f1038c9e" style="display:none" target="_blank">https://zenn.dev/link/comments/f414b8f1038c9e</a></p>
</div></details>


Setup手順はREADMEに書かない！Claude Codeカスタムコマンドで進めるViable Codingの開発フロー

本題：API経由なら4oなど他のレガシーモデルが使える

次の #keep4o 騒動のためにChatGPTクローンの作り方

Kiroを参考にClaude Codeのカスタムコマンド用ファイルを用意

ローカル環境構築、デプロイ方法

openai

Discussion