mvp Step2

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

mvp Step2

{“status”:”ok”,”role”:”mcp-gateway”}liutekiMacBook-Air:~ maggie$ curl -X POST httent-Type: application/json” \H “Con

-d ‘{“provider”:”openai”,”messages”:[{“role”:”user”,”content”:”嗨”}]}’
{“provider”:”openai”,”text”:”[mock openai] 這是模擬回覆”}liutekiMacBook-Air:~ maggie$ # 沒放 OPENAI_API_KEY 會看到 mock 回覆
liutekiMacBook-Air:~ maggie$ curl -X POST http://localhost:4000/api/chat -H “Content-Type: application/json”
-d ‘{“provider”:”deepseek”,”messages”:[{“role”:”user”,”content”:”嗨”}]}’
{“provider”:”deepseek”,”text”:”[mock deepseek] 這是模擬回覆”}liutekiMacBook-Air:~ maggie$
liutekiMacBook-Air:~ maggie$
下一步（我會給你）

Step 2（前端 Ask 頁）：我會給 Windows 上可放的最小 Vue Ask.vue 檔案，教你如何從 Windows 呼叫 Mac B 的 MCP（含 proxy 或直接呼叫 Mac 的 LAN IP）。

之後是 Step 3、Step 4（加 pm2 常駐、log、或實際放 API keys）。

太好了 👍 — Step 1 完成，MCP Gateway 已經可以回 mock 回覆了。

現在進入 Step 2：在 Windows 上建立最小 Vue 前端頁面 Ask.vue，可以呼叫 Mac B 的 MCP，並顯示回覆。

Step 2 — Windows 最小前端 Ask.vue

1️⃣ 建立 Vite + Vue 專案

在 Windows 11 上 Terminal / PowerShell 輸入：

1
2
3
4
5
6
7
# 建立新專案
npm create vite@latest mindsite-frontend
cd mindsite-frontend

# 選 Vue + JavaScript
npm install
npm run dev

完成後你會看到 Local: http://localhost:5173/（或類似 port）。

2️⃣ 建立最小 Vue 元件 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
<template>
  <div style="padding:20px">
    <h2>心靈算命 Ask 頁（MVP）</h2>
    <input v-model="question" placeholder="輸入你的問題" style="width:300px"/>
    <button @click="sendQuestion">送出</button>
    <div v-if="answer" style="margin-top:20px">
      <strong>回覆：</strong>{{ answer }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const question = ref('')
const answer = ref('')

// 改成你的 Mac B MCP IP
const MCP_URL = 'http://192.168.1.100:4000/api/chat'

async function sendQuestion() {
  if (!question.value) return
  try {
    const res = await fetch(MCP_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        provider: 'openai',
        messages: [{ role: 'user', content: question.value }]
      })
    })
    const data = await res.json()
    answer.value = data.text
  } catch (err) {
    answer.value = 'Error: ' + err.message
  }
}
</script>

⚠️ 記得把 MCP_URL 改成 Mac B 的 LAN IP，例如 192.168.1.100（確保 Mac B 與 Windows 在同一區域網路）。

3️⃣ Windows 測試步驟

  1. 確保 Mac B 的 MCP 正在跑：
1
node gateway.mjs
  1. Windows 上 Vite 專案啟動：
1
npm run dev
  1. 瀏覽器打開 http://localhost:5173/
  2. 在輸入框輸入問題 → 點送出 → 應該看到 [mock openai] 這是模擬回覆

4️⃣ 驗收標準

  • Windows 前端可輸入問題並送出
  • MCP 回 mock 回覆（或如果你已放 OPENAI_KEY，會回真實 ChatGPT 回覆）
  • 前端能即時顯示回答

完成後回覆我「Step2 完成」，我就給你 Step 3：在 Mac B 用 pm2 常駐 MCP server，還有怎麼把實際 API key 放進去的方式。

你現在可以先確認 Windows 能呼叫 Mac B MCP 嗎？我再教防火牆或 LAN IP 設定方法。