GCP Vertex AI Agent Builder 部署 part 1 - 使用 Dialogflow Messenger
這篇說明如何把前幾篇的 ChatWithArxiv 輸出 (或是連結) 到 WebChat,官方說法是 Diagflow Messenger,不過預期就是會輸出一段 JavaScript 會連結到 GCP project 對應的 Agent 。
Step 01. 點選左上方,Dialogflow CX (https://dialogflow.cloud.google.com/
Step 02. 點 Integrations
Step 03. 點選 Dialogflow Messenger
跳出一段 code snippet 要你複製,貼上。
建議先點選 View Document 看一下詳細設定。
https://cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger
重點:如果 Code snippet 跑不起來,建議看一下官方說明文件的 Example,會包括完整的 html code,你只需要把你的 project id and agent name 替換掉即可。
Example: https://cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger#example
Step 04. 拿到 test code snippet 之後,存成 index.html,這時候用瀏覽器打開是會報錯,原因是 CORS ,GCP agent javascript 不允許 localhost 呼叫。解法:用個你習慣的 Web framework 可以 host html 就可以。在這邊我就順便拿 Vercel Gemini ChatBot 專案練習一下前端手感好了 (?
Vercel Gemini chatbot: https://github.com/vercel-labs/gemini-chatbot
Step 05. 根據底下的截圖,將 index.html 放在 public 資料夾下,然後修改 next.config.js ,新增這段
rewrites: async () => [ { source: "/", destination: "/index.html", }, ],
Step 06. 跑起 nextjs,收工