{"product_id":"chatbot-builder-react","title":"React向けチャットボット構築Skill","description":"\u003cp\u003eほとんどのReactチャットボットチュートリアルは、デモの段階で止まります。8秒後に返信がひとかたまりで表示され、ターンごとにスレッド全体がモデルへ再送信され、キーはNEXT_PUBLIC_変数に置かれてNextがそのままブラウザバンドルにインライン化します。スクリーンショットでは問題なく見えても、実際の利用が始まると最初の週で破綻します。\u003c\/p\u003e\u003cp\u003eこれはシステムpromptではなく、構築ガイドです。ファイルをプロジェクトに入れてClaude CodeまたはCursorで開くと、Fetch ReadableStreamリーダーを使ったストリーミング、停止に接続したAbortController、トークンを追加していく楽観的なユーザーメッセージ、トークンごとにすべての吹き出しが再レンダリングされないリスト、上にスクロールした読者の邪魔をしない自動スクロール、Markdownとコードブロック、ルートハンドラーの背後に置いたキー、localStorageでの履歴保存から実際のバックエンドへの移行、そしてスレッドが長くなった日のためのトークン予算まで、アーキテクチャを一緒に組み立てていけます。\u003c\/p\u003e\u003cp\u003e一度購入すれば、ずっと使えます。サブスクリプションもランタイム依存関係もなく、次のプロジェクトで再利用したり、コードベースの変化に合わせて編集したりするのを妨げるものもありません。\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58693470486792,"sku":null,"price":14.99,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/chatbot-builder-react-1.png?v=1789397346","url":"https:\/\/kissmyskills.com\/ja\/products\/chatbot-builder-react","provider":"KissMySkills","version":"1.0","type":"link"}