LangGraph 出貨實戰：從第一個節點到能開發票收錢
用 LangGraph.js（全 TypeScript），從一張最小的 graph 一路做到真的能對外收費的產品。不是 toy demo、不是把幾個節點接起來就收工——這套帶你把一個「產品」真正需要的四件事一起做完。
貫穿產品是 競品情報週報（Competitive-Intelligence Digest）：自動幫使用者盯 N 個競品、跨週記憶、每週只報 diff（有什麼變了），產出是情報儀表板 ＋ 週報，不是聊天機器人。
前置：本系列假設你已懂 workflow vs agent 與五大設計模式——先看 AI 應該懂的事 · 第 5 章 · AI Workflow。這裡只做「概念之後的實作」，那些定義一律回指、不重講。
姊妹作：想親手造編排引擎、理解 checkpoint / state / retry 的原理，看
ai-pipeline-from-scratch（刻意不用框架、純手刻，規劃中）。一句話分工：手刻懂原理，框架去出貨。
這套在教什麼：「產品不是 demo」的四件事
一個真正能收錢的 AI 產品，缺一角都只是 demo：
- 全端 — 後端一張有狀態的 graph 當大腦，前端是它的 control panel（控制面），不是把大腦塞進瀏覽器的聊天框。
- 控制節點與狀態 — 用
StateGraph控節點、用checkpointer/Store跨執行記住上週，這是一次性呼叫根本做不到的護城河。 - 控制預算 — per-node 預算閘、便宜/貴模型分流、快取、迭代天花板，讓「每跑一次值多少錢」可預測、有毛利。
- 能收費 — 多租戶隔離、用量計費（Stripe metered billing）、開發票，補上最後一角產品才成立。
章節
| # | 章 | 你會做出什麼 |
|---|---|---|
| 1 | 要出貨什麼 | 產品全貌、四件事、為何大腦在後端 graph（對比大腦在前端的做法） |
| 2 | 你的第一張 graph | StateGraph / node / edge / state；「單一競品 → 摘要」最小可跑 graph，並把 LLM 節點切出可離線測的 seam |
| 3 | 讓節點動手抓料 | 節點呼叫工具抓多來源（RSS / changelog / pricing），把原料寫回 state |
| 4 | 多競品一起跑 | 平行 fan-out、subgraph 複用、去重（dedup） |
| 5 | 串流進控制面 | LangGraph.js streaming 串進真實 React 儀表板（不是 chat 泡泡） |
| 6 | 發送前的人工關卡 | interrupt() / resume，把分析師策展審核卡接進 UI |
| 7 | 殺手鐧：記得上週、只報 diff ⭐ | checkpointer / Store / thread；跨執行狀態與 diff |
| 8 | 控制預算（上） | 預算閘、模型分流、快取、迭代天花板 |
| 9 | 控制預算（下） | 降級策略與單位經濟——每跑一次到底賺不賺 |
| 10 | 持久化與多租戶 | checkpointer 接 Postgres、thread routing、每租戶隔離 |
| 11 | 收費 | Stripe 用量計費與發票 |
| 12 | 上線硬化與收尾 | 自己包 Node HTTP server、CORS、金鑰、觀測 / tracing（部署回指 no-logic-trade / DevOps 子站） |
技術
- 框架 / 語言：LangGraph.js（TypeScript），Node 後端 ＋ React 前端。不用 Python、不用 LangServe（已棄用）。
- 可驗證性：把 LLM 節點與純邏輯（diff / 去重 / 預算計算 / 計費計量）在 seam 切開；純邏輯不需金鑰、用 stub 假模型離線就能單元測試，真打 LLM / Stripe 的部分只當示範。