ChatKitから自作AIチャットへの移行

Agent builderは2026年11月にサービス終了予定、それに巻き込まれてChatKitOpenAI hosted backendも使えなくなってしまう
まずは校正さんに相談機能にて、ChatKitから脱出する

この際にAIチャットを自作してみるhata6502
ChatKitでは手が届かなかった箇所がある
例えばAI回答中にキャンセルできず、待たされたりする

WebサイトにAIチャットを置く目的…
チャットではなくアプリ内にデータを貯めたい
AIとの会話で得た指摘や文章を、校正さんアプリ内のメモに残す
メモ横断で校正に繋げたい
Webアプリの上からナビゲーションを被せる
主体(執筆)ではないが、便利な補助(校正)
Webサイトに被せるAIチャットを作ってると、不思議とカーナビを連想するhata6502
ただこの位置取りは、WebMCPで変わってくる可能性もある
WebサイトにAIチャットを積まなくても、ブラウザに積まれるかもしれない
ブラウザなら、Webサイト間を横断してAIが使える


技術構成
Headless Chat Primitives
Tailwind CSSでデザインを当てる
MUIのような、コンポーネントとスタイルが分離してないライブラリは不可
frontend tool
ChatKit Client toolsに相当する
Suggestion
Local Storageでスレッド永続化
Markdownレンダリング
AI SDK
サーバーとクライアント間のプロトコル実装が楽になる
OpenAI API
ChatKitの頃と同様にreCAPTCHAは入れておく
ユーザーがメッセージを送信するたびにreCAPTCHA検証を挟んで、楽な実装に抑える
reCAPTCHAのコストがかかってきても、そのときにはAI費用も爆増してそう
システムプロンプト
真似されたくないレシピなので、サーバーに置いて隠蔽する




メッセージに対するアクションは、再編集だけに留めた
コピーボタン付けるのやめる
AIの回答は自分に閉じて解釈してから、
他の人に伝えてほしいから
再生成ボタン付けるのやめる
都合の良い回答を引き当てたりしないでほしいから
メッセージを編集してから再送信してほしい

AIチャット内にデータが溜まる機能は、いったん実装を見送った
メモ横断で校正に繋げたいため
スレッド一覧
新しいスレッドをどんどん建てて、AIチャット内にデータを溜めていかない
1メモあたり1スレッドにした
代わりにスレッドをリセットするボタンを用意したい
リセットするときに、重要な情報を抽出してメモに残せるといいな
しかしいい方法は思いついてない
AIのcompactが参考になるかも?
ファイル添付
代わりにファイルをドラッグ & ドロップしてメモ化する機能実装をしようかな

その他やめたこと
まさかのMUIもチャットUI出してた
いまからMUIを選ぼうとは思わないかも
さすがにAI SDKを挟まないと、特にサーバー側の実装が大変になる
AIが回答中にメッセージを再送信したい
ドキュメントの記述と実際の挙動がズレてて、実装するのが以外と難しい
gpt-5.6が十分高速なので、実装する手間より、回答完了を待ってもらおう
assistant-uiでスレッドの永続化を実装するとき、マネージドサービスに誘導してくる
AIチャットを自作する目的の1つに、データ収集したいというのがあるのだろうか
外部サービスへの依存を増やしたくない