跳到主要內容

Google Gemini 全端 AI Agent 快速入門 - 打造「思考」的 AI 助理

一套從搜尋、反思到輸出的全端 AI 代理人範例,讓你看懂什麼叫 Research Agent

在 AI 工具百家爭鳴的今天,大家都在問一個問題:

「我能不能不只問 AI 答案,而是讓它像一位助理一樣,有流程、有反思、還有出處,真正幫我完成一件事?」

Google 最近釋出了一個相當具有指標意義的開源專案 gemini-fullstack-langgraph-quickstart,正是為了解這個問題而誕生。

這套系統到底是什麼?

這個範例不是傳統 Chatbot,而是展示一個完整的 AI research agent

它會根據使用者的提問,自動發想搜尋關鍵字、查資料、整合重點,最後給出答案還附上引用來源。背後的邏輯設計得非常扎實,不只是能跑,更是具備可讀性、可擴展性與可商用性。

它的流程大致如下:

 1. 使用者輸入問題(例如:「抖音是否影響台灣選舉?」)

 2. Gemini LLM 幫你想出關鍵字(不只是照抄問題)

 3. 呼叫 Google Search API 抓資料 

 4. LangGraph 控制流程 → 判斷資料夠不夠 → 若不足,自動補查

 5. 整合最終答案,並產生 citation(來源說明)

你可以想像這就像一位實習助理幫你寫報告,

不只輸出一段內容,而是會去查、會判斷、會補資料,而且說明「我為什麼這樣說」

LangGraph 是什麼角色?

LangGraph 就是整個 Agent 背後的控制系統

用白話講,它幫你定義 AI 每一步要幹嘛、遇到什麼狀況該走哪條路、要不要反思、要不要再查,甚至可以定義條件邏輯與資料流動。

這就不像寫一個單純的 Chat API,而是比較像「把一個流程圖變成可以跑的程式」。

對工程師來說,它提供了從 prompt 到流程控制的設計彈性;對產品設計來說,它讓 AI 有了「多步驟任務執行」的能力。


技術架構與使用方式

這整套系統是 Fullstack 架構,前後端都幫你整好了,技術選型也非常實用: 

  •  前端:Vite + React + TailwindCSS + Shadcn UI
  •  後端:FastAPI + LangGraph 
  •  核心模型:Google Gemini 2.5 
  •  搜尋引擎:Google Search API
  •  狀態管理:Redis、PostgreSQL 
  •  部署方式:Docker & docker-compose(支援快速整合)

資料夾架構清楚易懂:

gemini-fullstack-langgraph-quickstart/
├─ frontend/        // React 前端專案
├─ backend/         // FastAPI + LangGraph Agent
│    └─ src/agent/graph.py  // 核心 Agent 流程定義
├─ Dockerfile
├─ docker-compose.yml
├─ .env.example     // 環境變數範本


啟動方式也非常直觀:

→ 啟動後端:

  cd backend pip install . langgraph dev 

→ 啟動前端:

  cd frontend npm install npm run dev

→ 使用 Docker 啟動整套環境: 

整個流程不需要額外設定資料庫帳號密碼,範例已經內建開發模式設定,適合開箱即用。(當然要記得設定 ENV)

docker-compose up --build

特別之處

這不只是一個「會說話的 AI」,而是一個會查資料、會思考「查得夠不夠」、能引用來源的智慧 Agent。這正是目前 AI 實務導入時,大家最欠缺的部分:

  •  不只給結論,還給證據
  •  不只一次性回答,而是會動態調整流程
  •  不只 demo 看起來美,還能真正接近落地

這套專案讓你看見如何從一個問題出發,

透過流程控制與語言模型結合,讓 AI 完成一次「完整研究任務」


適合受眾

如果你是想做 RAG、Chatbot、研究助理型 AI 工具的人,這份範例就像是打通任督二脈的那份 demo code。它不只是展示,而是給你一份可直接 clone 下來改成自己產品的骨架。

如果你是開發者,這份 code 清楚、可讀性高、模組設計合理;如果你是設計者,也能從使用流程中思考怎麼設計一個「可信任、有說服力」的 AI 助理系統。

結語

從語言模型到流程引擎,這是一份「能跑」的信任代理原型

我認為這個開源專案的價值,不在於它跑起來多花俏,而在於它幫我們思考了一件事:

如果我們真的想做出可信任、有脈絡、有證據的 AI 系統,我們該怎麼組裝一套可控、可調、可驗證的結構?

這個問題的答案,也許每家公司不同,但這份範例無疑是一個清晰起點。它把 Gemini 的語言能力、LangGraph 的流程控制、與實務搜尋 API 結合,建立了一個具備「反思、引用與任務分解」能力的 Agent 流程。

這不是概念,而是可以直接跑起來、改起來、部署起來的骨幹結構。如果你還在找下一個 AI 助理的切入點,或者想打造一個能幫你查資料、說服老闆的 Agent,那麼,這個 repo,你該好好讀一遍。

工商服務:想實際體驗 AI + 程式創作的可能性嗎?

(這是一場給非工程師,非技術人的活動)我們將用輕鬆但實作導向的方式,帶大家從 zero 到知道 AI 如何融入 coding 流程。無論你是工程師還是設計師,只要對「AI 會寫程式、幫助你創作」這件事有點好奇,來這場就對了。

➡ 講座資訊如下:

📍6/22(日)15:30

🏠 地點:台中 monospace

📝 活動報名頁面:

👉 https://codingbear.kktix.cc/events/ai-vibe-coding-2025-06-taichung

歡迎大家現場見,一起聊聊 AI 怎麼從「回答你問題」進化到「幫你創作程式」這條路上。

Ref

https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart

工商服務 Part2

Vibe Coding 是近來開發圈很火紅的 AI 協作開發模式,結合我們自家 Cympack AI 製造平台,幫助了不少客戶「從想法 → 打樣 → 量產 → 上市」整個新產品流程 🚀。

如果你也有: 

✅ 想開發新產品 

✅ 想做新產品開發、小量客製、快速打樣 

✅ 想了解 AI 協作 + 製造流程怎麼整合

都歡迎來聊聊,我們團隊很樂意協助! 

可以聯絡我,或者來信 

📩 聯絡信箱 👉 service@cympotekc.om 

https://www.cympotek.com/

讓 AI 幫你加速產品落地。

留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。