鐵人檔案
「AI × Web：生活魔法方程式」是一場把人工智慧融入日常網頁應用的探索旅程。透過簡單的程式實作，我們將 AI 技術化為生活中的小魔法——從智慧聊天、學習助手到即時資訊服務，讓網頁不只是資訊展示的平台，而是能主動理解、互動、甚至解決問題的夥伴。
近年來，AI 不再只是實驗室裡的技術名詞，而是逐漸走進我們的生活。從聊天機器人、智慧助理到自動化服務，AI 的存在無處不在。而在這股浪潮中，「AI Agent」...
昨天我們提到要用 AI × Web 做一些日常小專案。那在開始之前，我們要先搞清楚一個重點：到底什麼是 AI Agent？ AI Agent 是自動化系統，不...
這個小專案是一個簡單又直覺的智慧聊天機器人，使用 React 製作網頁介面，搭配 Gemini API 提供回覆功能。使用者只要在網頁輸入訊息，就能立即看到系統...
昨天我們有提到智慧聊天機器人的前端頁面是透過React製作，那我們今天就來簡單介紹一下甚麼是React吧!在現代網頁開發中，React 是最流行的前端框架之一，...
在開始寫 React 元件之前，我們需要先建立開發環境。 安裝 Node.jsReact 需要 Node.js 環境，Node.js 內建 npm（套件管理工...
了解了 React 的基礎概念和環境設定後，接下來就讓我們透過程式碼，看看 React 如何運作吧！在 React 裡，我們常看到一種「長得像 HTML」的語法...
今天我們要先用 Next.js 建立聊天機器人的前端基本畫面。這一天的重點是畫面框架，還不會加入互動功能。 1. 建立標題元件我們先建立一個簡單的標題，顯示在畫...
前一天我們已經完成了靜態的畫面框架，現在要加入互動功能，讓使用者可以輸入訊息，並立即在訊息區看到自己發送的內容。 1. 使用 useState 儲存訊息Reac...
前兩天我們完成了聊天機器人的 前端畫面 與 互動功能。 今天的目標是：在 Next.js 專案裡建立 後端 API Route，讓前端可以呼叫 Gemini A...
今天我們要把前幾天的成果整合，讓前端畫面可以呼叫後端 API，實際拿到 Gemini 回覆，完成真正的智慧聊天功能。 1️⃣ 前端呼叫後端 API 我們在 D...
