Stanford CS224V 第 13 講：ReactGenie 如何讓語音命令與原生 GUI 共用同一個狀態
ReactGenie 以 React 元件加 annotations 暴露資料、動作與視圖，將複合語音命令解析成 DSL，並在同一份 UI context 中產生原生圖形輸出。
#react
13 篇文章assistant-ui 完整介紹：用 Runtime 與 Primitives 組出可替換後端的 Agent Chat
assistant-ui 把 Agent Chat 拆成 headless React primitives、conversation runtime 與後端 adapters；UI 不必直接綁死某個模型 SDK 的 message state。
CopilotKit 完整介紹：把 Agent 狀態、工具與 Human-in-the-Loop 接進 React
CopilotKit 不只提供聊天框；它用 React 元件、AG-UI 事件、共享狀態與中斷流程，把 Agent 的執行過程接進既有產品介面。
Liveblocks：Presence、Storage、Comments 與 Notifications 的協作後端
Liveblocks 把 room、presence、conflict-free storage、comments 與 notifications 做成 managed product primitives；導入時仍須對齊既有 auth、canonical DB 與 data lifecycle。
AI SDK 的 message parts：對話介面的資料骨架
AI SDK v5 把一則 AI 訊息拆成 parts 陣列——text、reasoning、source-url、tool-* 各自是獨立片段。這個資料結構決定了現代 AI 對話介面怎麼寫：render 時 switch part.type，每種片段交給對應元件。這篇拆解 parts 模型的設計邏輯、useChat 的串流機制，以及它如何成為 AI Elements 這類元件庫的地基。
shadcn registry 與 MCP：元件分發的第三條路
元件分發向來只有兩條路：npm 套件（黑盒依賴）或手動複製貼上。shadcn registry 把第三條路標準化——元件以 JSON 描述原始碼與依賴，CLI 一鍵裝進你的 repo 變成你的程式碼。任何人都能架自己的 registry（AI Elements 就是一個），官方 MCP server 更讓 AI agent 直接瀏覽與安裝元件。
TanStack Router：把路由變成編譯期可驗證的東西
TanStack Router（2023-12 發 1.0，週下載約 20M）把路徑、params、search params 全部做成編譯期推導：導航到不存在的路由是型別錯誤，不是執行期 404。這篇拆解它的三個核心設計——型別安全、search params 一等公民、與 Query 整合的 loader——以及為什麼這在 AI agent 寫碼的時代價值被放大。
AI 時代的 React 套件選型：從 TanStack 三件組到整層 Stack 的地圖
以 TanStack Router（19.7M 週下載）+ Query（55.8M）+ Zustand（44.5M）為核心，配 Vite、react-hook-form + Zod（224M）、Tailwind + shadcn、Vitest + Playwright，整理純 SPA 的當代預設 stack。AI 時代選套件多了三個判準：文件有沒有 llms.txt（TanStack 全家有、React Router 沒有）、型別安全能不能當 agent 護欄、原始碼是不是在你 repo 裡讓 agent 讀得到。
AI Elements：Vercel 把 ChatGPT 式介面拆成可複製的 shadcn 積木
AI Elements 是 Vercel 為 AI SDK 生態出的 React 元件庫，registry 現有 48 個元件，涵蓋 Conversation、Reasoning、Sources、Tool 等 AI 介面積木。走 shadcn 模式：npx ai-elements@latest 把原始碼直接複製進專案，完全可改，跟 useChat 的 message parts 一一對應。
Next.js 15 + App Router：Server Components 和 use cache 實際上在做什麼
Next.js 15 + React 19 的 App Router 把渲染責任從客戶端移到伺服器，use cache 讓快取邏輯直接跟資料綁在一起而不是散在 fetch 選項裡。島島和 NobodyClimb 都選它，原因很務實。
shadcn/ui：不是套件，是複製貼上的元件原始碼
shadcn/ui 不是 npm 套件，它把元件原始碼複製到你的專案，你完全擁有這些程式碼。島島用它建立 packages/ui 元件庫，讓三個 Next.js app 共用同一套 UI。
Zustand：React 最輕量的全域狀態管理
不需要 Provider、不需要 reducer，幾行就能設定好全域狀態。NobodyClimb 用它管 auth 和 UI 狀態，搭配 TanStack Query 處理 server state。
Agentic RAG：讓 LLM 自己決定要不要再搜尋一次
複雜多跳問題，RAG 一次搜尋不夠。Agentic RAG 讓 LLM 評估結果是否充分，不夠就改寫查詢再搜一次，形成 ReAct 迴圈。