mvp Step2-1

發表於 分類於 閱讀次數：
mvp Step2-1

mvp Step2-1

很好 👍 我懂了，你現在要進入 Step 2：Windows 前端 Vue 最小 Ask.vue + App.vue。
我們先做一個最簡單的版本：前端可以輸入訊息 → 經由 HTTP 呼叫 Mac B 的 MCP Gateway → 回傳結果顯示在畫面上。

✅ Step 2-1 修改 App.vue

你已經有 App.vue，現在只要在 <template> 中放入 Ask 元件即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- App.vue -->
<script setup>
import Ask from './components/Ask.vue'
</script>

<template>
  <div>
    <h2>🧘 心靈算命 MVP</h2>
    <Ask />
  </div>
</template>

<style scoped>
h2 {
  color: darkblue;
}
</style>

✅ Step 2-2 建立 Ask.vue（最小版）

在 src/components/Ask.vue 建立一個檔案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- Ask.vue -->
<script setup>
import { ref } from 'vue'

// 使用者輸入
const userInput = ref('')
// 從 MCP server 回覆的結果
const reply = ref('')

// 呼叫 Mac B 的 MCP Gateway
const askServer = async () => {
  reply.value = "⌛ 等待回覆..."

  try {
    const res = await fetch("http://localhost:4000/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        provider: "openai",   // 你可以換成 "deepseek"
        messages: [{ role: "user", content: userInput.value }]
      })
    })

    const data = await res.json()
    reply.value = data.text
  } catch (err) {
    reply.value = "⚠️ 錯誤：" + err.message
  }
}
</script>

<template>
  <div>
    <input v-model="userInput" placeholder="輸入問題..." />
    <button @click="askServer">送出</button>
    <p>🔮 回覆：{{ reply }}</p>
  </div>
</template>

<style scoped>
input {
  padding: 5px;
  margin-right: 10px;
}
button {
  padding: 5px 10px;
}
</style>

✅ Step 2-3 測試方式

  1. 確保 Mac B 的 MCP Gateway 有在跑：

    1
    node gateway.mjs

    或者用 pm2 start gateway.mjs --name mcp-gateway。

  2. 在 Windows 開啟你的 Vue 專案：

    1
    npm run dev

  3. 打開瀏覽器 → http://localhost:5173

    • 輸入「嗨」
    • 會看到從 Mac B 的 MCP Gateway 回覆（mock 或 API 回覆）。

👉 下一步（Step 3），我可以教你如何把 localhost 換成 Mac B 的 LAN IP，讓 Windows 可以直接呼叫 Mac（同區域網路下）。

要不要我直接幫你做 LAN IP 設定教學？

太好了 👍 你的 Mac B（MCP Gateway） 的區域網路 IP 是 192.168.0.103。
那麼 Windows 上的 Vue 前端就可以直接透過這個 IP 呼叫 Mac B，而不是 localhost。

✅ 修改 Ask.vue

把原本的 fetch("http://localhost:4000/api/chat", ...) 改成：

1
2
3
4
5
6
7
8
const res = await fetch("http://192.168.0.103:4000/api/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    provider: "openai",   // 或 "deepseek"
    messages: [{ role: "user", content: userInput.value }]
  })
})

✅ 測試流程

  1. 在 Mac B 上啟動 MCP Gateway：

    1
    node gateway.mjs

    或者如果你有用 pm2：

    1
    pm2 start mcp-gateway

  2. 在 Windows 上啟動 Vue 前端：

    1
    npm run dev

  3. 瀏覽器打開 http://localhost:5173

    • 在輸入框輸入「嗨」
    • 點「送出」
    • 會透過 192.168.0.103:4000/api/chat 向 Mac B 發送請求
    • 收到回覆（目前應該還是 [mock openai] 或 [mock deepseek]）。

⚠️ 注意：

  • Windows 必須跟 Mac B 在同一個 Wi-Fi 或 LAN 網路下。
  • 如果 Windows 無法連到 192.168.0.103:4000，可能是 Mac 防火牆 擋住，要去 系統偏好設定 → 安全性與隱私 → 防火牆 → 開啟防火牆選項 → 允許 node。

要不要我幫你整理一份 Windows ←→ Mac B 測試清單，讓你一步步確認能不能通？