2025-05-12 MVP 一步步可執行的開始計畫-1

最小、一步步可執行的開始計畫 整理好：先給出三台機器的職責分配，再給出 MVP 的第一個小步驟（最小可做的一件事），附上可直接貼上執行的程式碼與測試命令。每一步都很小、可驗收，完成後你回我「Step1 完成」我再給下一步。

同時附上你要求的簡稱翻譯（在最下面）。

---

三台筆電功能分配（簡短）

• Mac A（已在用） — Documentation（技術文件機）
  功能：寫設計文件、流程圖、記錄步驟、同步到 GitHub。
  安裝：VS Code / Typora（已運行即可）。

• Mac B（舊 Mac） — MCP Gateway（中介伺服器）
  功能：接收前端請求 → 決定並呼叫 AI provider（ChatGPT / DeepSeek）→ 回傳結果。不存資料庫（你指定）。
  安裝（MVP 必要）：Node.js（>=18 推薦）、npm、（可選）pm2。

• Lenovo Windows 11 — 前端開發 & 未來 DB（選用）
  功能：開發 Vue 前端（Ask 頁面）、做測試、未來如要 DB 可在此用 Docker 啟 MySQL。
  安裝（MVP 必要）：Node.js、npm、VS Code、Git（建議）。

---

MVP 路線（極簡、只做必要事）

目標：讓使用者能在前端發出問題 → MCP（Mac B）轉發給 ChatGPT 或 DeepSeek → 回前端（目前不儲存）。

我把整個流程拆成小步，你先做 Step 1（最小可驗收），完成回報我再給 Step 2。

---

Step 1（現在就做） — 在 Mac B 建最小 MCP gateway（中介）

目的：在 Mac B 啟一個 Node server（MCP），能回應 /health 並能接受 /api/chat 並回 mock 回覆（或實際呼叫有 key 的 provider）。

要安裝（Mac B）

1. 打開 Terminal，檢查 Node：

node -v

• 若沒有安裝或版本 < 18：請安裝 Node LTS（建議 18 或 20）：

# 需要 Homebrew
brew install node

在 Mac B 建專案與檔案

1. 建資料夾並初始化：

mkdir ~/mcp-gateway
cd ~/mcp-gateway
npm init -y
npm i express dotenv

2. 在目錄下建立 .env（先可留空 key，方便測試 mock）：

PORT=4000
OPENAI_API_KEY=
DEEPSEEK_API_KEY=

3. 建 gateway.mjs（整檔貼上並存檔）：

// gateway.mjs
import express from 'express';
import dotenv from 'dotenv';
dotenv.config();
const app = express();
app.use(express.json());

const OPENAI_KEY = process.env.OPENAI_API_KEY || '';
const DEEPSEEK_KEY = process.env.DEEPSEEK_API_KEY || '';

// provider adapters (最小示範：若沒 key 則回 mock)
const providers = {
  openai: async ({ messages }) => {
    if (!OPENAI_KEY) return { text: '[mock openai] 這是模擬回覆' };
    const resp = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${OPENAI_KEY}`, 'Content-Type': 'application/json' },
      body: JSON.stringify({ model: 'gpt-3.5-turbo', messages })
    });
    const data = await resp.json();
    return { text: data?.choices?.[0]?.message?.content ?? '', raw: data };
  },

  deepseek: async ({ messages }) => {
    if (!DEEPSEEK_KEY) return { text: '[mock deepseek] 這是模擬回覆' };
    const resp = await fetch('https://api.deepseek.com/v1/chat/completions', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${DEEPSEEK_KEY}`, 'Content-Type': 'application/json' },
      body: JSON.stringify({ model: 'deepseek-v1', messages })
    });
    const data = await resp.json();
    return { text: data?.choices?.[0]?.message?.content ?? '', raw: data };
  }
};

app.get('/health', (req, res) => res.json({ status: 'ok', role: 'mcp-gateway' }));

app.post('/api/chat', async (req, res) => {
  const { provider = 'openai', messages = [{ role:'user', content:'hello' }] } = req.body;
  const adapter = providers[provider];
  if (!adapter) return res.status(400).json({ error: 'unknown provider' });
  try {
    const { text, raw } = await adapter({ messages });
    return res.json({ provider, text, raw });
  } catch (err) {
    console.error('provider error', err);
    return res.status(500).json({ error: 'provider error' });
  }
});

const port = process.env.PORT || 4000;
app.listen(port, () => console.log(`MCP gateway listening on ${port}`));

註：若你的 Node 版本 >= 18，上面可直接使用 fetch()（不需額外安裝 node-fetch）。若 Node 版本較舊，執行前請先 npm i node-fetch 並在檔頭 import。

啟動 MCP gateway

node gateway.mjs

測試（在 Mac B 本機）

1. health:

curl http://localhost:4000/health
# 預期回應: {"status":"ok","role":"mcp-gateway"}

2. mock chat (openai):

curl -X POST http://localhost:4000/api/chat -H "Content-Type: application/json" \
  -d '{"provider":"openai","messages":[{"role":"user","content":"嗨"}]}'
# 沒放 OPENAI_API_KEY 會看到 mock 回覆

3. mock chat (deepseek):

curl -X POST http://localhost:4000/api/chat -H "Content-Type: application/json" \
  -d '{"provider":"deepseek","messages":[{"role":"user","content":"嗨"}]}'

驗收標準（若都 ok，Step1 完成）

• 能在 Mac B 上 node gateway.mjs 並在本機 curl /health 得到回應。
• POST /api/chat 針對 provider=openai 與 provider=deepseek 都能回 mock 回覆（或若你已放 key，能拿到實回覆）。

---

下一步（我會給你）

• Step 2（前端 Ask 頁）：我會給 Windows 上可放的最小 Vue Ask.vue 檔案，教你如何從 Windows 呼叫 Mac B 的 MCP（含 proxy 或直接呼叫 Mac 的 LAN IP）。
• 之後是 Step 3、Step 4（加 pm2 常駐、log、或實際放 API keys）。

---

簡稱翻譯（你要求的）

• MVP — Minimum Viable Product（最小可行產品）
• MCP — Model Context Protocol（模型上下文協定）／在你情境指中介 server
• DB — Database（資料庫）
• API — Application Programming Interface（應用程式介面）
• LAN — Local Area Network（區域網路）
• pm2 — process manager for Node（Node.js 程式常駐管理工具）

---

如果你準備好了，請在 Mac B 做完上面 Step 1 並回覆「Step1 完成」，或把執行時遇到的錯誤貼上來（我會直接修正命令或程式碼）。我接著馬上給你 Step 2（Windows：最小前端 Ask.vue + 呼叫 MCP 的方法）。