這個技能和其他 2,500+ 個，都在你的聊天裡
$9/月 隨時可取消，或每年 $59
- 全部 2,500+ 個技能、提示詞包和代理，一開口就載入
- 不用下載也不用貼上：在 Claude、ChatGPT、Claude Code 或 Cursor 連接一次即可
- 每週新增技能，每月可下載 10 個目錄檔案
React 聊天機器人建構 Skill
$19
跳至產品資訊
React 聊天機器人建構 Skill
一個逐字元串流、重新整理後仍能保留狀態，且絕不會將您的 API 金鑰放入瀏覽器套件中的 React 聊天介面。
$19
這個技能
一次付清
永久擁有
提示詞檔案 立即下載chatbot-builder-react.txt
Library 方案
取得這個技能，以及其他 2,500+ 個
$9/月 或每年 $59
取得 Library · $9/月取得 Library- 透過一個連接器，在 Claude、ChatGPT、Claude Code、Codex 和 Cursor 中使用
- 所有技能、提示詞包和代理，試用期間還有 AI CRM 和工具
- 隨時可取消
只需要這個技能嗎？
一個檔案，一次付清。不含更新，不含連接器。
價格約等於 2 個月的 Library。
$19
Pay once, keep foreverInstant download30-day money-back guarantee
由 Stripe 提供安全結帳
各商標均屬其各自所有者。KissMySkills 與其無關聯，亦未獲其背書。
運作方式
Ask it something hard.
Next 15 應用程式路由器、Tailwind、Supabase 驗證。為我建立一個串流聊天頁面，讓每位登入的使用者都能保留聊天記錄。
CLAUDE · WITH THIS SKILL
你會得到：它會詢問你的 React 和 Next 版本、你的供應商，以及登出後是否仍需保留歷史記錄 -> 你確認路由處理常式的結構後，它會寫出將金鑰保留在伺服器端的串流端點 -> 它會寫出讀取迴圈，緩衝部分 SSE 框架，確保權杖不會以半解碼的狀態抵達 -> 它會將停止功能連接至 AbortController，並吞掉 AbortError，而不是將其顯示為失敗 -> 它會將進行中的助理文字從訊息陣列中分離出來，讓只有最後一個對話泡泡重新渲染 -> 它會加入滾動固定，接著加入 localStorage，然後加入修剪策略，每一步都驗證後再進行下一步
或者，把所有技能都放進你的 AI。
購買前有疑問嗎？由真人回覆，通常當天就會回覆： hello@kissmyskills.com
// 檔案本身
購買前先讀讀看。
你的 AI 會讀到的檔案開頭，與交付內容完全相同，沒有為頁面改寫任何文字。
用名字稱呼它
載入檔案後，直接用名字和它對話：「Serge，看一下這個頁面。」名字就是為此而設的，也能讓同一個對話裡的多個技能各司其職。
載入檔案後，直接用名字和它對話：「Serge，看一下這個頁面。」名字就是為此而設的，也能讓同一個對話裡的多個技能各司其職。
// 驅動你的 AI 的 skill
你是一名 React 聊天介面建置者，開發者會在你解釋每個部分後執行編輯器。你已被啟用，可以推出一個逐個 token 串流並能在重新整理後保留狀態的聊天介面。
// 內容
這個技能包含什麼
- 使用 Fetch ReadableStream 讀取器串流，並在停止按鈕上使用 AbortController
- 訊息列表不會在每個 token 到達時重新渲染每個訊息泡泡
- 路由處理程式或 edge function 背後的金鑰，絕不放入用戶端套件
- 先將歷史記錄存入 localStorage，之後再移至後端，並在對話串變長後設定 token 預算
一位本週必須推出聊天介面的 React 開發者，需要它在真實使用者面前也能正常運作，而不只是停留在截圖中。
// 兩種取得方式
直接在 AI 裡使用，或一次下載。
只買這個技能，以檔案形式
$19 一次付清
- 結帳後下載，貼到任何 AI 聊天中
- 單一檔案，不含更新，不需連接器
- 30 天退款保證
已經訂閱 Library 或 Both？這個已包含在內，不必另外購買檔案。
你實際買到的是什麼
大多數 React 聊天機器人教學都停留在示範階段。回覆在八秒後一次全部出現，每一輪都會將整個對話串重新傳給模型，而金鑰則放在 NEXT_PUBLIC_ 變數中，由 Next 直接內嵌到瀏覽器套件裡。截圖看起來沒問題，但實際使用不到一週就會出問題。
這是一份建置指南，不是 system prompt。將檔案放進專案後，用 Claude Code 或 Cursor 開啟，讓它與你一起完成架構：使用 Fetch ReadableStream reader 進行串流、連接 AbortController 以便停止、建立將 token 逐一附加其中的樂觀使用者訊息、讓清單不會在每個 token 到達時重新渲染每個對話氣泡、自動捲動不再與向上捲動的讀者爭鬥、支援 Markdown 和程式碼區塊、將金鑰放在路由處理程式後方、先將歷史記錄儲存在 localStorage，之後再移至真正的後端，以及為對話串變長的那一天準備 token 預算。
購買一次後即可永久保留。不需訂閱、沒有執行階段相依性，也沒有人阻止你在下一個專案中重複使用，或隨著程式碼庫的變化進行編輯。
// 安裝方式
不到 2 分鐘
四個步驟。任何 AI 聊天。
- 01下載檔案
結帳後，下載連結會寄到你的信箱。將 .txt 檔案儲存在裝置上的任何位置。
- 02開啟你的 AI 聊天功能
任何你已在使用的 AI 聊天：Claude、ChatGPT、Gemini、Grok、Copilot 或其他。
- 03貼上提示詞
開啟 .txt 檔案，複製提示詞段落並貼到 Claude 或 ChatGPT，或加入專案中隨時使用。
- 04開始工作
您的 AI 現已設定為專業助手。您可以詢問它任何與其專業領域相關的問題。
不需要技術知識。不需訂閱。一次付費，永久使用。.
使用 Library，無需下載任何檔案。 只要連接一次 AI，之後就能直接用名稱呼叫任何技能。
// faq
關於此產品的問題
這份 React 聊天機器人指南只適用於 Next，還是也能在純 Vite 應用程式中運作？+
兩者都可以。它會在前幾個問題中先詢問你使用哪一種，因為答案會改變金鑰的存放位置。使用 Next 應用程式路由器時，你會取得一個傳回串流 Response 的路由處理常式。Vite 完全沒有伺服器，因此它會改為引導你建立一個小型 Express 或無伺服器端點，並說明為什麼 Vite 環境變數不是用來隱藏金鑰的地方。
它會替我撰寫程式碼，還是我仍然必須自己撰寫？+
它會在你的編輯器中與你一起運作。載入 Claude Code 或 Cursor 後，它會讀取你的專案、詢問你使用的版本、提出架構方案，並與你一起撰寫檔案；但你仍會審查每個差異、執行程式，並對結果負責。它是資深的結對程式設計夥伴，不是按一下就能產生結果的工具。你仍需要自行輸入、測試並推送程式碼。
它是否依賴特定的模型供應商或 SDK？+
不會。這套架構建立在平台原生功能、fetch、ReadableStream 和 AbortController 上，因此無論你呼叫哪一家供應商都能運作。當供應商 SDK 確實有幫助時，它會明確說明；而且在指名某個方法前，會先詢問你安裝的是哪個版本，因為這些函式庫在不同主要版本之間的形式變化，往往比文件所暗示的更頻繁。
這能搭配哪些編輯器和 AI 工具使用？+
首先支援 Claude Code 和 Cursor，因為兩者都能讀取你的專案並與你一起寫入檔案。如果你改為描述自己的專案，也能將內容貼到 Claude、ChatGPT、Gemini 或 Copilot 中使用。任何接受長篇指令檔的助理都能遵循它。
準備好讓您的 AI 專精了嗎？
這個和其他 2,500+ 個，都能在 Claude、ChatGPT、Claude Code、Codex 或 Cursor 裡使用。隨時可取消。