【實戰】Day 23：告別單調聊天框！引入 next-shadcn-dashboard 打造企業級 Agent 戰情室
有了強大的後端 Agent 大腦，我們需要一個相稱的舞台。本篇文章我們將脫離單純的聊天視窗，探討如何利用開源的 next-shadcn-dashboard-starter 打造出具備前後端分離、高度視覺化的企業級戰情室。
WRITTEN BY
- Name
- Harry Chang
過去幾天，我們從底層的 PostgreSQL 資料庫 (Day 18)、FastAPI 商業邏輯層 (Day 19)，一路往上建構了 Tool Layer (Day 21) 與 User Context (Day 22)。我們的「鞋墊廠訂單決策 Agent」在後端已經擁有一顆完美的大腦。
然而，當我們要把它交給企業主管使用時，如果只提供一個長得像 ChatGPT 的黑底白字對話框，主管絕對會覺得：「這到底有什麼專業的？」
企業級應用需要的是「戰情室 (Dashboard)」。今天，我們將暫停後端程式碼，把目光轉向前端 UI 介面，並引入目前開源界最火紅的 next-shadcn-dashboard-starter。
架構決策：堅守「前後端分離」
在開始刻畫面之前，我們必須先釐清專案的資料夾架構。
許多開發者會問：「Next.js 本身就是全端框架 (具備 API Routes)，為什麼不把 AI Agent 邏輯直接寫在 Next.js 裡面就好？」
這是一個非常重要的架構決策。我們強烈建議將前端 (Next.js) 與後端 (Python FastAPI) 徹底實施資料夾與語言層級的分離，原因如下：
- AI 生態系的懸殊差異：最強大的 Agent 框架（如 Pydantic AI、CrewAI）與數據處理套件（如 Pandas）全部都在 Python 生態系。用 Python 處理底層邏輯如魚得水，如果硬塞進 Node.js 專案裡重寫會非常痛苦。
- BFF (Backend For Frontend) 模式：在企業實戰中，Next.js 應該專心扮演 BFF 的角色，處理使用者登入驗證與 UI 狀態管理。而最吃運算資源的「AI 推理」與「資料庫查詢」，則交給獨立的 Python 後端去執行。
因此，我們應該開一個全新的總資料夾，將架構一分為二：
📁 ERP-AI-Agent (全新總資料夾)
├── 📁 backend (Python：放我們寫好的 FastAPI 與 Agent 邏輯)
└── 📁 frontend (Node.js：今天的主角，Next.js 戰情室專案)
這種架構確保了後端能專心運算，前端能專心渲染，且未來如果要開發手機 APP 版，也能直接共用同一個 Python AI 大腦。
全端系統架構圖 (Day 18 ~ Day 23)
為了讓你更清楚知道我們這幾天的進度是如何無縫接軌的，這裡有一張完整的全端架構圖：
為什麼選擇 next-shadcn-dashboard-starter？
如果你在 GitHub 上搜尋這個專案，你會發現它擁有極高的星星數。對於要開發 B2B (企業對企業) 應用的我們來說，它是絕佳的起手式：
- 原生的企業級美感 (Enterprise Aesthetics) 它內建了專業的側邊欄 (Sidebar)、麵包屑導覽 (Breadcrumb) 與極簡的深色模式。這正是 ERP 系統該有的沉穩長相。
- 與資料視覺化的完美結合 它底層採用了 Shadcn UI，這意味著我們可以用最優雅的樣式，把 Day 19 算出來的「毛利率」與「預測訂單」畫成長條圖或 KPI 卡片。
- 無縫對接 Vercel AI SDK 因為它本質上是 Next.js (App Router) 架構，這代表我們後續要串接 Agent 的 Streaming (串流回應) 時，可以完美發揮 Next.js 伺服器渲染的優勢，絕不卡頓。
戰情室的版面設計藍圖
有了這個 Starter 後，我們可以將畫面規劃成三個核心區塊，完美融合「傳統數據」與「AI 智能」：
- 左側 / 主畫面區 (傳統 ERP)： 這裡不放 AI 對話框。這裡放置各種精美的數據卡片（例如本季營收、各廠稼動率）。主管一登入就能看到大盤，這是企業軟體給人的「安全感」。
- 右側 / 側邊抽屜 (AI 幕僚區)： 我們在畫面右側做一個可以彈出的 Drawer (抽屜)。當主管看著左邊的毛利圖表覺得奇怪時，打開抽屜直接問：「為什麼越南廠的毛利掉了？」AI 就會讀取當前畫面的 Context 來回答你。
- 右上角 (User Context 切換區)： 利用這個專案內建的使用者頭像 Dropdown，我們正好可以拿來實作 Day 22 提到的功能：在前端點擊「切換為總經理」或「切換為業務主管」，後端就會收到不同的身分標籤，展現不同的說話語氣。
實用建議：三個起步行動
如果你正準備跟著我們建立前端戰情室，請準備好這三個起步動作：
步驟 1：Clone 開源模板並清空冗餘頁面
將 next-shadcn-dashboard-starter 下載到你的 frontend 資料夾後，第一件事就是把裡面示範用的假頁面（如 Kanban, Employee list）刪除，保持路由 app/dashboard 的純淨。
步驟 2：設定好環境變數與 CORS
因為前端 (Next.js 通常跑在 localhost:3000) 要去呼叫後端 (FastAPI 通常跑在 localhost:8000)，你必須在 FastAPI 那邊設定好 CORS (跨來源資源共用)，否則前端的圖表會完全撈不到 JSON 資料。
步驟 3：安裝 Vercel AI SDK
在前端專案中提早執行 npm install ai，準備好核心套件。我們後續要做的流暢打字機效果，全靠這個強大的 SDK。
我的反思
在開發 AI 應用的這幾年，我得到一個深刻的體悟：一個成功的 AI 產品，往往是 80% 的傳統軟體工程與 UI/UX 設計，加上 20% 的大語言模型魔法。
就算你的 Prompt 寫得再出神入化、Agent 的推理邏輯再嚴密，如果最後呈現給使用者的介面十分粗糙，使用者對這個 AI 的信任感就會大打折扣。
透過 next-shadcn-dashboard-starter，我們站在了開源巨人的肩膀上，省下了刻板面的時間。萬事俱備，接下來我們就要把前後端縫合，讓資料在美麗的介面上流動起來！