第 1 課 · 我們要出貨的東西——以及「產品不是 demo」的四件事

你八成幹過這件事：某個下午，接上 OpenAI 或 Anthropic 的 SDK，寫個一百行的腳本，讓模型幫你做了件很炫的事——摘要、分類、生成一段文案。跑起來那一刻你很爽，截圖丟給朋友，朋友回「哇酷」。

然後呢？然後就沒有然後了。那個 demo 靜靜躺在你的資料夾裡，沒有人付你錢。

這門課要處理的，就是那個「然後」。我們不是要再做一個會讓人說「哇酷」的 demo，而是要出貨一個陌生人願意每個月刷卡付費的產品。這兩件事之間隔著一條又深又髒的溝，而這門課從頭到尾，就是在陪你把這條溝填平、走過去。

💡 這一課是地圖，不是程式碼。我們先把「要蓋什麼、為什麼這樣蓋、用什麼蓋」講清楚，讓你手上有張全景圖。真正的程式碼從第 2 課開始。

先講一句貫穿全系列的話，你先記著，後面每一課都在兌現它：

demo 回答的是「模型能不能做到這件酷事一次」；產品回答的是「一個陌生人願不願意為它每個月付錢」。

這一課，我們回答四個問題：（1）我們到底要蓋什麼、它長什麼樣？（2）為什麼它的大腦非得在後端不可、不能塞進前端？（3）為什麼「產品」等於四件事一起做、缺一角就只是 demo？（4）為什麼用 LangGraph.js＋全 TypeScript，而不是 Python、不是自己手刻？

一、我們要出貨什麼：競品情報週報

整門課，我們會一起蓋一個真實產品，我叫它競品情報週報（Competitive-Intelligence Digest）。

它解決一個每家公司都有、但沒人有空好好做的痛：你的競爭對手每週都在動——偷偷漲價、悄悄上線新功能、換掉官網主打的賣點、開始招某個職位——而你往往是最後一個知道的人。 等你發現對手三週前就漲價了、上個月就上線了跟你撞車的功能，黃花菜都涼了。

傳統解法是「派個人每週去巡」：巡對手的定價頁、changelog、部落格、招聘頁、評價網站……巡完整理成一份報告。這件事每週都要重來一次，一個人做要花掉大半天。這正是願意付錢的地方——後面會算給你看。

產出長什麼樣：儀表板 ＋ 每週週報，不是 chatbot

先把最重要的定位釘死：我們的產出是「一個情報儀表板」＋「一封每週自動送達的週報」。它不是一個聊天機器人。

這個區別是整個產品的靈魂，值得你停下來想三秒。市面上一堆 AI 產品長成一個 chat 泡泡——給你一個對話框，等你打字問問題，它才回答。我們刻意不做這件事。為什麼？因為忙碌的 PM、行銷主管、創辦人不想再多一個要他打字伺候的框。他們要的是：答案自己送上門。

所以我們的週報長這樣（這是一份真實會產出的東西，你先感受一下）：

競品情報週報 · 第 27 週（2026-07-06 ~ 07-10）
只列「跟上週相比變了的事」。本週追蹤 3 個競品，偵測到 4 則變化。

🔴 需要注意（2 則）
1. Acme Planner 把「Pro 方案」從 $12/座 漲到 $15/座（+25%）。
   └ 上週還是 $12。定價頁截圖已存檔。
2. BoltBoard 上線了「AI 週報」功能——和我們自己的路線圖直接撞車。
   └ 來源：他們的 changelog，2026-07-08。

🟡 留意（2 則）
3. Cascade 換掉首頁主標，從「團隊協作」改打「給遠端團隊」。
4. Acme Planner 官方部落格連續兩週在談 SOC 2，疑似要進企業市場。

（本週「沒有變化」的：Cascade 定價、BoltBoard 定價、三家的招聘頁——
  已自動略過，不佔你版面。）

看懂這份週報，你就看懂了整個產品的三個關鍵設計：

• 它只報變化（diff）：不是把三個競品的所有資訊倒給你一份 40 頁的報告，而是拿本週的狀態去比上週的狀態，只留下「變了的部分」。上面那句「上週還是 $12」就是 diff 的靈魂——它知道上週是多少，所以能告訴你「漲了」。這個「只報變化」在術語表裡就叫 diff（只報變化），是這個產品最值錢的一招。
• 它是決策級的：每一則變化，一個 PM 看了會調路線圖、一個行銷看了會調文案、一個創辦人看了會調定位。跟「花錢的決定」綁在一起的東西，人們才願意付錢。
• 沒變化的它自動閉嘴：「本週沒變化的自動略過」——這句話省下的，正是使用者最寶貴的注意力。一個每週準時送達、只講重點、不廢話的東西，比一個要你自己去問的對話框，價值高一個量級。

💡 順帶對照一下：如果做成 chat 泡泡，使用者得自己記得「上週對手定價多少」、自己開口問「這週有沒有變」——你把最累的活（記憶與比對）推回給了使用者。而做成週報，這些累活是我們（後端）扛的。誰扛累活，誰收月費。這條線，後面每一課都會回來。

為什麼 B2B 使用者願意付月費？

把帳算白一點你就懂了。假設你的客戶是一家 B 輪、20 人的 SaaS 新創：

• 手動做的成本：派一個人每週巡 5～10 個競品、整理成報告，一週 4～6 小時。以他的薪水折算，一個月光這件事就燒掉幾百美金的人力，而且巡得零散、容易漏、格式每週還不一樣。
• 我們收的價：假設月費 $149。對一家融資過的新創，這是四捨五入等於零的一筆錢，卻換回一個人每週半天的時間，還巡得更全、更準、只推重點給決策者。

這是一筆一眼就划算的交易。而且它天然適合訂閱制，因為兩邊都是「每週重複發生」：情報每週都有新的（價值持續產生），我們每跑一次也要付 LLM 的錢（成本持續發生）。價值與成本都按週滾動，月費就是最自然的收法。

⚠️ 別把「願意付費」想得太理所當然。這門生意有個硬前提：你每跑一次的成本，必須遠低於你收的月費——否則賣越多虧越多。這個「一次跑值多少錢」的算術，術語叫單位經濟（unit economics），是第三根柱子的核心，我們等一下會專門講。先在心裡種下這顆種子：能不能收費，一半取決於能不能控制成本。

二、為什麼大腦非得在後端不可

現在回頭看週報裡那句不起眼的話：「上週還是 $12」。

這句話藏著整個技術架構的分水嶺。要說得出「上週還是 $12」，這個產品必須記得上週——它得在某個地方存著「上上週我看到 Acme 的 Pro 是 $12」，這週抓到 $15，一比對，才吐得出「漲了」。

記得上週，跨越一次又一次的執行——這個能力，決定了大腦該放哪裡。

回指：fe-admin-ai-chat 把大腦放前端，我們反過來

如果你讀過fe-admin-ai-chat（那是「大腦在前端」的經典範例），你會記得它的架構：瀏覽器裡跑一個 ReAct loop（迭代最多 5 次），由前端的迴圈臨場決定「下一步要呼叫哪個工具」，後端只是一層薄薄的 proxy，負責藏 API 金鑰、轉發格式。 大腦（決定下一步做什麼的那顆腦）在瀏覽器裡。

那套架構對它的場景非常合適：一個後台管理員坐在螢幕前，即席問「幫我查帳號 123 的餘額」，在一個 session 內、開著頁面、來回幾輪拿到答案。大腦在前端，反應快、包袱小。

但我們的產品恰恰相反，因為它的場景相反：

一個必須在週一凌晨三點、沒人開著頁面時準時跑、而且要記得上週發生過什麼的東西，它的大腦不可能是「一個瀏覽器分頁」——分頁關了，大腦就沒了；換台電腦開，記憶就丟了。這種產品的大腦，只能是後端一個持續存在、跨執行還記得事情的東西。

所以，這門課從第一秒就定調，而且後面每一課都建立在這句話上：

大腦是後端一張有狀態的 graph（圖）；前端只是它的 control panel（控制面）。

flowchart TB
    subgraph L["fe-admin-ai-chat：大腦在前端"]
        L1["瀏覽器 ReAct loop（大腦，臨場決定下一步）"]
        L2["後端＝薄 proxy（只轉發、藏金鑰）"]
        L3["LLM"]
        L1 --> L2 --> L3
    end
    subgraph R["本系列：大腦在後端"]
        R1["前端 control panel（不是大腦）"]
        R2["後端 graph（大腦、有 state）"]
        R3["checkpointer（記得上週）"]
        R4["LLM 節點"]
        R1 --> R2
        R2 --> R4
        R3 -.-> R2
    end

上面那幾個詞——graph（圖）、節點（node）、狀態（state）、checkpointer（跨執行狀態）——現在只要有個印象就好，我在這裡只是點名它們負責什麼，還沒教你怎麼用：

• graph（圖）：後端那張「大腦」，就是一張 graph——由一個個節點（node）（抓取、去重、摘要、比對……）用邊（edge）串起來。它的正式定義和第一段程式碼在第 2 課。
• 狀態（state）：graph 跑的時候，各節點共享的那份資料物件（例如「這週抓到 Acme 定價 $15」）就存在 state 裡。同樣第 2 課正式登場。
• checkpointer（跨執行狀態）：讓 graph「記得上週」的那個原語——它把某一條追蹤線的 state 持久化下來，下週再跑時撈回來比對。我們追蹤的每一個競品，就是一條 thread（一條跨週的追蹤線）。checkpointer、thread、還有跨 thread 的長期記憶 Store，都在第 7 課才正式定義與實作。

💡 為什麼現在只點名、不展開？因為這一課是地圖。硬要在開場把 StateGraph、checkpointer 的 API 全講一遍，你會淹死在還沒有上下文的細節裡。先知道「有這幾顆螺絲、各自鎖哪」，等第 2、7 課再一顆一顆鎖上。

⚠️ 一個常見誤會先擋掉：「大腦在後端」不代表前端很笨、只能當個死掉的顯示器。control panel 當然是一個活生生的 React app——它讓使用者設定要追哪些競品、看歷史週報、在 HITL 關卡按下「核准送出」、即時看 graph 跑到哪一步。它很聰明、很互動。只是**「決定下一步做什麼、記得上週」這顆大腦的職責在後端 graph，不在瀏覽器的迴圈裡**。這條界線，後面各課只會引用、不會再重講。

三、產品不是 demo 的四件事

剛才那個「大腦在後端」的討論，其實只是四根柱子裡的頭兩根。現在把鏡頭拉遠，看全貌。

我看過太多很棒的 AI demo 死在半路，死因幾乎都一樣：它只做到了四件事裡的一件或兩件，就以為自己是產品了。 一個真正能對外收費的產品，是這四件事一起做——缺任何一角，你手上的都還只是個 demo。

flowchart LR
    P1["1. 全端<br/>前端＝control panel"]
    P2["2. 控制節點與狀態<br/>graph／node／state"]
    P3["3. 控制預算<br/>單位經濟為正"]
    P4["4. 能收費<br/>metered billing"]
    P1 --- P2 --- P3 --- P4

一根一根拆給你看——每根都告訴你「它是什麼」以及「缺了它會變成什麼」：

柱子 1：全端（前端是 control panel，不是聊天視窗）

是什麼：產品要有一個真正的前端，讓使用者訂閱、設定要追哪些競品、看歷史、在關卡上做決定。這個前端的定位就是後端 graph 的 control panel（控制面）——第一節已經釘死了。

缺了會怎樣：你有的是一個「會在 terminal 印出 JSON 的腳本」。沒人能訂閱、沒人能自助設定、沒人看得到歷史。它不是產品，是你自己的 cron job。（control panel 怎麼串進 React，是第 5 課的實作，這裡不重講定位。）

柱子 2：能控制節點與狀態

是什麼：你能掌控 graph 裡每一個節點發生了什麼、**狀態（state）**怎麼流動、跑到一半掛了能不能只重跑那一步、以及——最關鍵的——跨執行記得上週（這就是 checkpointer 的活）。

缺了會怎樣：每次跑都是「重新認識世界」，記不得上週，於是給不出 diff——產品的靈魂當場沒了。而且某一步爆掉就整條從頭重跑，白白多燒一輪 LLM 的錢；出錯時你還看不到中間到底發生什麼。第一節那個「大腦在後端」，講的就是這根柱子的地基。

💡 這根柱子還藏著一個貫穿全系列的工程紀律：我們會把純邏輯（算 diff、去重、算預算、計費計量）和真正打 LLM 的節點在一條叫 seam（LLM 邊界）的接縫上切開。好處是純邏輯不需要 API 金鑰、能離線測——測試時用一個 **stub（假模型）**頂替 LLM 節點就行。你現在只要知道「有這回事」，後面每一課的程式碼都會這樣切。

柱子 3：能控制預算

是什麼：你算得出跑一次值多少錢，而且能主動壓它——給貴的節點設預算閘（budget gate）、把便宜的活丟便宜模型（模型分流，model routing）、重複的別重付（快取，cache）、防止某條線失控跑不停（max-iteration，迭代天花板）、錢吃緊時優雅**降級（fallback）**到便宜但可用。這一切服務於一個數字：單位經濟（unit economics）為正——每跑一次的成本，穩穩低於你收的月費。

缺了會怎樣：你不知道跑一次多少錢。很可能某個客戶一個月燒掉的 token，比他付的月費還多。單位經濟是負的 = 賣越多虧越多。這不是生意，是慈善。

柱子 4：能收費

是什麼：能把「用量」變成「帳單」——用量計費（metered billing）（我們會用 Stripe），而且每個付費客戶的資料要隔離，也就是多租戶（multi-tenant）。

缺了會怎樣：你有的是一個「大家共用、成本你自己吸收」的免費工具。免費工具能是很棒的 side project，但它不是一門生意。

把四根柱子擺一起看：

⚠️ 別誤會成「四角都得 day one 就做到完美」。收費可以先接最陽春的 Stripe、預算控制可以先只擺一道總閘、多租戶可以先簡單隔離。真正的重點是這四角都得存在：一個連 metered billing 都還沒接、成本從沒算過的東西，可以是很不錯的 side project，但它離「能對外收費的產品」還差著整整這門課的距離——而補完這段距離，正是我們要做的事。

四、為什麼選 LangGraph.js ＋ 全 TypeScript

工具選型，我們一次講清楚，後面不再回頭吵。

我們用 LangGraph.js（Node ＋ TypeScript 的編排框架）當後端 graph 的骨架，前端用 React，整條技術棧從頭到尾都是 TypeScript。這背後有兩個要回答的「為什麼不」。

為什麼不用 Python？

平心而論，LangGraph 的 Python 版生態更成熟、功能更全——這是實話，得先擺上桌。但對你（一個會寫 TS／React、想獨立出貨的全端開發者）來說，全 TypeScript 有一個 Python 換不來的槓桿：

這是個全端產品，前端 React、後端 graph。 如果後端用 Python，那麼「後端 graph 的 state」流到「前端 control panel」時，就跨越了一道語言的邊界——你得在 Python 和 TypeScript 兩邊各維護一份型別、來回切換心智。而全 TypeScript時，從 graph 吐出的 state 形狀、到前端接收它的型別，是同一種語言，常常可以直接共用型別定義。對一個要一個人扛全端的獨立開發者，這種「單一語言貫穿」的省力，往往勝過 Python 那套更豐富的函式庫。何況把一個 Node 服務部署上線，對你早就是解決過的問題（要上線參照，可回指 no-logic-trade/devops）。

⚠️ 邊界講清楚：如果你本來就是 Python 為主的 ML 團隊、或非用某個只有 Python 有的函式庫不可，這筆帳就會倒過來算。我們是為「TS 母語的獨立開發者出貨一個產品」這個情境最佳化的——在這個情境下，LangGraph.js 贏。

為什麼不自己手刻一個編排引擎？

你可能會想：checkpointer、state、重跑，這些聽起來我自己也刻得出來啊，何必用框架？

你說得對，而且**「自己刻」是一件很有價值的事**——但那是另一門課的事。我們有一個姊妹系列 ai-pipeline-from-scratch，專門帶你親手實作一個編排引擎：checkpoint 怎麼存、state 機器怎麼轉、retry 怎麼自己接。那條路的目的是讓你懂原理。

而這門課的目的是出貨。一句話總結兩者的分工：

手刻懂原理，框架去出貨。

一個每月付你 $149 的陌生人，完全不在乎你是自己刻的狀態機還是用現成的。他在乎的是週報準不準、有沒有準時到、貴不貴。把時間花在重新實作 checkpointer，是把幾週的工程量投在客戶不埋單的地方。LangGraph.js 直接給你一套身經百戰的現成原語，而且它們幾乎一一對上我們的四根柱子：

⚠️ 但別把框架當只能膜拜的黑盒。LangGraph.js 也有真實的缺口——最明顯的一個：它本身沒有內建 HTTP server，你不能 npm start 就得到一個能對外服務的網站。這不是地雷，是一堂課：後面我們會親手把這張 graph 包成一個可上線的服務。現在先把這件事講在明處，免得你到時候踩空。理解框架在做什麼（那份直覺，正是姊妹系列在幫你建立），能讓它出狀況時你不抓瞎——兩條路是互補的，不是二選一。

💡 至於「這產品到底是 workflow 還是 agent、五大設計模式各是什麼」——那是 ai-you-should-know 第 5 章（ch5） 已經講透的事，這門課不重講。你只要記得 ch5 那個結論：大多數穩定產品骨子裡是 workflow。我們的競品情報週報也一樣——步驟大致固定（抓取→去重→摘要→比對→送出），只在關鍵處插一道 HITL 讓真人拍板。它是「概念之後的實作」，而概念，ch5 已經備好了。

這一課建立了什麼

把地圖收攏成一張你可以隨身帶走的心智模型：

• 我們要出貨的是競品情報週報（Competitive-Intelligence Digest）：產出是情報儀表板＋每週自動送達的週報，核心賣點是 diff（只報變化）——它記得上週、只推「變了、且值得管」的事。它不是 chat 泡泡，因為 B2B 使用者要的是「答案自己送上門」，願意為此付月費，前提是我們的單位經濟為正。
• 大腦是後端一張有狀態的 graph，前端只是它的 control panel（控制面）。這跟 fe-admin-ai-chat（大腦在前端的 ReAct loop） 恰好相反，因為我們的產品排程觸發、沒人盯著也要跑、還得記得上週。這條定位線全系列共用，後面各課只引用、不再重講。
• 產品＝四件事一起做：全端（control panel）＋控制節點與狀態＋控制預算（單位經濟為正）＋能收費（metered billing／多租戶）。缺一角就只是 demo。
• 技術棧＝LangGraph.js ＋ 全 TypeScript。不用 Python，是為了「單一語言貫穿全端」的省力；不自己手刻，是因為手刻懂原理，框架去出貨——手刻那條是姊妹系列 ai-pipeline-from-scratch 的事，我們用 LangGraph.js 的現成原語把產品送出門。
• 點過名、但還沒教的原語：graph／節點（node）／邊（edge）／狀態（state）／StateGraph 在第 2 課正式登場；checkpointer／Store／thread 在第 7 課；control panel 的實作在第 5 課。這一課只給你它們的定位，不寫實作程式碼。

下一課，我們就把手弄髒：用 StateGraph 蓋出這張 graph 的第一版骨架，讓「抓取一個競品 → 摘要 → 存進 state」這條線真的在你機器上跑起來。地圖看完了，該上路了。