2023年3月、数日で chatgpt-imitation を作った。Next.js で ChatGPT 風 UI を自前実装してみた回。1月に gpt-practice で API を触ったので、今度はちゃんと UI を組んでみたかった。

実装した機能

  • チャット UI（MessageItem でメッセージ一覧、入力欄）
  • useChat フック + lib/chat.ts でやり取りを集約
  • 1つ前の会話も API に送る — コンテキスト維持
  • 認証は Auth0（pages/api/auth/[...auth0].js）+ マイページ
  • Cloudflare デプロイ設定

コミット履歴が語る開発順

  1. Initial commit from Create Next App
  2. 1つ前の会話も送る ← まず会話の継続から手をつけた
  3. refactor / ベーススタイル
  4. 認証追加（Auth0）
  5. add cloudflare config

最初に手をつけたのが「1つ前の会話も送る」だったのが自分らしい。チャットらしさの核がコンテキスト維持だと分かっていたんだと思う。認証は簡易自前じゃなくて Auth0 に乗せて、その辺は楽をした。

ハマったところ / 気づき

作ってみて分かったのは、ChatGPT UI の本質は ストリーミング表示と会話状態の管理だということ。このときは非ストリーミング（返答が全部できてから表示）で動かしていて、「本物っぽさ」はやっぱりストリーミングから来るんだな、と。SSE 対応は後回しにして、まず会話が成立するところまでを優先した。

おわり

gpt-practice（API 初体験）→ この chatgpt-imitation（UI 自前）と来て、「LLM を載せた Web をどう組むか」の型がここで一段できた。のちの MetricShip まで続く、AI 開発の個人史の第2章。今ならストリーミングを最初から入れる。