{"product_id":"chatbot-builder-react","title":"React 聊天機器人建構 Skill","description":"\u003cp\u003e大多數 React 聊天機器人教學都停留在示範階段。回覆在八秒後一次全部出現，每一輪都會將整個對話串重新傳給模型，而金鑰則放在 NEXT_PUBLIC_ 變數中，由 Next 直接內嵌到瀏覽器套件裡。截圖看起來沒問題，但實際使用不到一週就會出問題。\u003c\/p\u003e\u003cp\u003e這是一份建置指南，不是 system prompt。將檔案放進專案後，用 Claude Code 或 Cursor 開啟，讓它與你一起完成架構：使用 Fetch ReadableStream reader 進行串流、連接 AbortController 以便停止、建立將 token 逐一附加其中的樂觀使用者訊息、讓清單不會在每個 token 到達時重新渲染每個對話氣泡、自動捲動不再與向上捲動的讀者爭鬥、支援 Markdown 和程式碼區塊、將金鑰放在路由處理程式後方、先將歷史記錄儲存在 localStorage，之後再移至真正的後端，以及為對話串變長的那一天準備 token 預算。\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\/zh\/products\/chatbot-builder-react","provider":"KissMySkills","version":"1.0","type":"link"}