# Vercel AI 閘道 - AI 減壓小能手專案實戰

這篇文章的重點不在於開發，而在於學習 AI 閘道的概念和使用方法。透過漫畫式的講解和 Vibe Coding 專案實戰，你可以了解如何透過 Vercel AI Gateway 在 AI 應用中靈活切換不同的模型，降低開發成本和維護難度。適合想學習 AI 閘道技術、需要快速對接多個 AI 模型的同學。

---

你是小阿巴，剛入職的 AI 應用開發工程師。

![](https://pic.yupi.icu/1/1761152281564-61073333-da43-4ac2-b6ca-09460e87331a.png)

屑老闆說：公司最近要做一個智能客服系統，小阿巴，你是新人，所以這個重任就交給你了！故天將降大任於新人也~

![](https://pic.yupi.icu/1/1761645372915-7d9df0cf-f44a-4643-8d67-3e7103fb03db.png)

你一聽，心想：不就是調個 API 的事兒嘛，有啥難的？

於是你擼起袖子就開始寫代碼，先接入了 OpenAI 的 GPT 模型。

剛剛搞定，屑老闆說：還要加上 Claude 模型，聽說它在某些場景下表現更好。

於是你又寫了一堆調用 Claude 模型的代碼。

結果剛寫完，屑老闆又說：嗯，聽過國產的通義千問也不錯，也一起接入吧！

![](https://pic.yupi.icu/1/1761645406716-99acb82f-2f1f-4a62-a3c6-076ac17b1e6d.png)

你皺了皺眉，心想：又得寫調用這個模型的代碼了，老闆你是不是有點過分了。。。

屑老闆彷彿聽到了你的心聲：

- 哦，對了，調用 AI 是有成本的，得做好用戶鑑權
- 哦哦，為了防止惡意用戶瘋狂調用 AI，還得做好限流控制
- 哦哦哦，AI 生成的內容可能有問題，還得校驗內容安全
- 哦哦哦哦！還要保證系統穩定，不能因為某個模型掛了就導致整個服務都不能用
- 哦哦哦哦哦！！咱這個專案肯定能火，還得考慮 AI 怎麼抗住大量請求
- 哦哦哦哦哦哦！！！還得能讓咱們觀察到 AI 的調用次數和成本，好降本增效啊
- 哦哦哦哦哦哦哦。。。

你看著漸漸發狂的老闆，開始懷疑人生：調個 AI 接口怎麼這麼複雜？

![](https://pic.yupi.icu/1/1761645432489-6e2f67db-40f5-40fe-a6f0-c18ead6e6d8a.png)

⭐️ 本文對應影片版：[https://bilibili.com/video/BV14NyrBTEeB](https://www.bilibili.com/video/BV14NyrBTEeB)

## 什麼是 AI 閘道？

這時，號稱 “AI 小王子” 的魚皮走了過來，看到你愁眉苦臉的樣子，笑道：怎麼，這很難麼？

你有些不爽：你這是站著說話不腰疼，這麼多要求，不得寫一大坨代碼？

魚皮：老闆說的這些場景，都可以透過 **AI 閘道** 解決呀~

你疑惑地問：閘道？那是啥？

魚皮：閘道就像是火車站的檢票口，所有乘客都要先經過檢票口，檢票員會檢查你的車票，然後指引你去正確的站台。

![](https://pic.yupi.icu/1/1761645506547-26d820e6-cda3-482e-a9e9-dcadcbbb0445.png)

在系統架構中，前端用戶發來的請求要先經過閘道，閘道會統一處理用戶認證、攔截惡意請求、控制流量、監控統計請求等等，然後把請求轉發到後端伺服器進行處理。

![](https://pic.yupi.icu/1/1761645542774-a2da29dc-3d2c-4e1b-adcf-dc5dd59d0881.png)

你點了點頭：哇哦，這樣一來，如果我後端有多個服務，不用給每個服務單獨寫這些功能了。

魚皮：沒錯，而且如果一個後端服務掛了，閘道還可以自動將請求轉發到其他服務。

![](https://pic.yupi.icu/1/1761645571947-8cb4a141-7d6f-4add-a82b-7a70716f23e7.png)

你有些好奇了：那你剛剛提到的 AI 閘道又是什麼？

魚皮：傳統的 API 閘道通常放在你的應用和各種後端服務之間；而 AI 閘道是專門為 AI 應用設計的，放在你的應用和各種 AI 模型服務之間（比如 OpenAI、通義千問、DeepSeek 等等）。

![](https://pic.yupi.icu/1/1761645615469-787296d8-1fb6-4452-b406-c79ef537f193.png)

你的應用只需要發送 **標準請求** 給 AI 閘道，它就會自動幫你完成用戶鑑權、限流控制、安全防護、故障轉移、負載均衡、監控統計等一系列複雜的操作，並且將請求轉發給 AI 大模型進行處理。

![](https://pic.yupi.icu/1/1761645642401-683e786e-3e06-420a-abce-cd43f7bfa901.png)

如果你要對接不同的大模型，只需要修改標準請求中的大模型名稱，AI 閘道就會幫你完成路由，不用針對每種模型寫一套對接的代碼啦~

![](https://pic.yupi.icu/1/1761645657980-b463d0b2-eecd-4635-99ee-fed9f121bf4e.png)

你歡呼雀躍：這也太強了，有了 AI 閘道，老闆提到的所有問題都能解決了！那現在有哪些 AI 閘道產品可以用呢？

![](https://pic.yupi.icu/1/1761645679096-3ceb73df-a858-4410-abc1-041222b497f4.png)

## AI 閘道選型

很多 AI 玩家第一個接觸到的 AI 閘道可能是 [OpenRouter](https://openrouter.ai/)，它更像是一個 AI 模型的聚合平台，支援透過統一的接口對接幾百種模型。

![](https://pic.yupi.icu/1/1761645719834-eadcde16-711c-474c-9838-5ea5f01be452.png)

很多 AI 工具都支援配置 OpenRouter，對於普通的 AI 使用者來說，可以透過它使用到更多的大模型、更穩定的服務。

![](https://pic.yupi.icu/1/1761645743475-53493cb1-5be9-4b0b-8b9a-a497ac13d7c7.png)

你問到：那還有專門面向開發者的 AI 閘道產品嗎？

魚皮點點頭：當然，現在市面上已經有不少成熟的 AI 閘道產品了。比如你上網一搜，排名靠前的是下面幾個：

1）[Vercel AI Gateway](https://vercel.com/ai-gateway)：這是最近很火的一個新產品，最大的特點是上手容易，而且 **零加價**，如果你使用自己的 API Key，閘道本身不收額外費用。適合前端開發者快速搭建全棧 AI 應用。

2）[Cloudflare AI Gateway](https://www.cloudflare.com/zh-cn/developer-platform/products/ai-gateway/)：Cloudflare 作為全球最大的 CDN 服務商之一，它的 AI Gateway 主要優勢是全球節點覆蓋廣，安全防護能力強。

3）[Kong AI Gateway](https://konghq.com/products/kong-ai-gateway)：Kong 本身就是一個很成熟的 API 閘道，現在專門為 AI 場景做了增強，企業級功能比較完善。

![](https://pic.yupi.icu/1/image-20251018111819481.png)

4）[Higress AI](https://higress.ai/)：阿里雲開源的 AI 閘道，支援 100 多種大模型的統一協議轉換，提供語義緩存、令牌限流、MCP 轉換等企業級功能，適合有複雜 AI 集成需求的企業。

![](https://pic.yupi.icu/1/image-20251019163817976-20251028181254777.png)

你撓了撓頭：看起來也太複雜了吧，我應該怎麼上手 AI 閘道呢？

魚皮：別擔心，我們可以從相對簡單的 Vercel AI Gateway 開始學習。光說不練假把式，給我 2 分鐘，帶你實戰掌握 Vercel AI Gateway 的用法~

## Vercel AI Gateway 實戰

#### 1、註冊並獲取 API Key

首先打開 [Vercel 官網](https://vercel.com/) 註冊帳號，綁定銀行卡可以免費獲得 5 美元的使用額度，對於學習測試來說夠用了。

![](https://pic.yupi.icu/1/1760687990497-90720fbb-0df6-4ede-87b8-64b8702994e9-20251028181254840.png)

然後在控制台創建 API Key，注意不要洩露哦：

![](https://pic.yupi.icu/1/1760688078133-7b91b6f3-2fc4-4bb4-b2c1-d517699f0968-20251028181254879.png)

#### 2、官方 Demo

接下來，你可以透過官方提供的快速開始教程來創建專案並跑通 AI 對話的 Demo：

![](https://pic.yupi.icu/1/image-20251019160232722.png)

簡單來說就 4 個步驟：

1. 創建新專案
2. 安裝 AI SDK 和 AI Gateway 的依賴包
3. 配置環境變量，填入 API Key 配置信息
4. 編寫示例 Demo 代碼

#### 3、減壓小能手專案

但是官方提供的 Demo 有點過於簡單了，我們不妨利用 AI 來做一個《減壓小能手》網站專案吧，讓用戶可以和專門幫人減壓的 AI 聊天。

這裡我選用的 AI 開發工具是 Cursor，直接讓 AI 幫我生成符合要求的完整前端 + 後端代碼。

![](https://pic.yupi.icu/1/1761645829262-bd9950ef-6334-410f-ab27-140873cb56a4.png)

由於 Vercel AI Gateway 是比較新的玩意，AI 可能不理解它的用法，所以我直接把 Vercel AI Gateway 的官方文檔扔給 Cursor，讓他透過文檔來學習用法。

![](https://pic.yupi.icu/1/1761645854330-54b6ab38-7f1f-45a5-ac34-463ee63477a7.png)

完整提示詞如下：

```markdown
你是一位專業的程序員，請幫我開發《減壓小能手》網站，用戶可以透過和專門幫人減壓的 AI 聊天來緩解壓力。

## 開發要求

1. 需要包含完整的前端和後端，後端使用 Node.js
2. 使用 Vercel 的 AI Gateway 實現 AI 能力，需要先透過官方文檔來獲取盡可能多的用法：https://vercel.com/docs/ai-gateway/getting-started
3. 以完成核心功能為目標，確保專案可以正常運行，不用輸出文檔、也不要做任何多餘的功能
4. 整體網站界面採用讓人放鬆的淺色，響應式適配各種尺寸的設備
```

點擊執行後，AI 會先調用 MCP 工具從網頁中獲取到信息，這裡我用的是 `Firecrawl MCP`：

![](https://pic.yupi.icu/1/1760690503357-7412db47-4389-49e2-b42c-dc6eabdc283b-20251028181255024.png)

大概 6 分鐘左右，AI 完成了全部代碼的生成。可惜這裡 AI 不是很聽話，還是給我生成了一堆文檔，比生成代碼本身的時間都多！

![](https://pic.yupi.icu/1/image-20251019161322770.png)

然後在根目錄下創建 `.env` 環境變量配置文件，填入 AI Gateway 的 API Key：

![](https://pic.yupi.icu/1/1760689844332-79459841-46e3-4356-9fe7-76062a90464c-20251028181255097.png)

最後，安裝依賴並執行啟動腳本：

![](https://pic.yupi.icu/1/1760690024471-f89bf1e3-3d9e-4857-8a68-a236ffa0af14-20251028181255125.png)

訪問 `localhost:3000` 就能看到專案啦：

![](https://pic.yupi.icu/1/1760690223277-56f89c2a-b4c5-43d6-a61d-3f744bcd9aef-20251028181255161.png)

有一說一，效果可真不錯，又給了我一點點動力再多寫幾個字哈哈：

![](https://pic.yupi.icu/1/1760690245830-e877986b-1bb6-4c6a-96ad-92b738a57fed-20251028181255188.png)

你感嘆道：有了 AI + AI 閘道這套組合拳，開發 AI 專案也太快了吧！

魚皮點點頭：沒錯，而且整個過程中我們不用擔心某個模型掛掉，閘道會自動處理這些問題。

![](https://pic.yupi.icu/1/1761645903883-94c22619-2cac-41a4-87c3-d51ec96586e0.png)

#### 4、更多特性

不僅如此，Vercel AI Gateway 支援非常多的國內外大模型，不同模型的計費標準都不一樣：

![](https://pic.yupi.icu/1/image-20251019165234650.png)

你還可以配置自己的模型 API Key：

![](https://pic.yupi.icu/1/image-20251019162655475.png)

此外，還提供了 **可觀測性** 等企業級功能，幫你了解 AI 的調用情況和成本分析：

![](https://pic.yupi.icu/1/1760691345180-9ce7ec43-c651-4c19-a918-90b87034b7fe-20251028181255384.png)

你雙眼放光：哇塞，那我以後開發 AI 專案就用它了！

魚皮無奈地搖了搖頭：小阿巴，你要記住 “沒有銀彈”。

如果你的個人專案只需要簡單地調用單個 AI 模型，直接調用 API 就夠了；如果你個人或團隊的小專案需要用到 AI 閘道的特性（比如集成多個模型），那麼可以選用 Vercel AI Gateway；而如果你要開發企業級應用，對安全性和穩定性要求很高，選用 Higress 或者 Kong 這種更專業的閘道更合適，能幫你少寫億點點屎山代碼 💩！

![](https://pic.yupi.icu/1/1761645922466-4284b8ac-7928-424e-a0eb-09629e7e66a1.png)

## 結局

幾個月後，你用 AI 閘道重構了公司的智能客服系統，效果非常好。

你感慨道：這就是站在巨人的肩膀上啊，果然不要重複造輪子，懶人推動世界進步！

![](https://pic.yupi.icu/1/1761645939970-276a3391-2f40-4b85-8d23-d36c5a491f8c.jpeg)

魚皮嬌嗔：所以這就是你懶得給我點讚的理由？？？

![](https://pic.yupi.icu/1/1761646182922-0edead80-b8e9-4b8f-a90d-e35fa8712f3b.png)

## 推薦資源

1）魚皮 AI 導航網站：[AI 資源大全、最新 AI 資訊、免費 AI 教程](https://ai.codefather.cn)

2）編程導航學習圈：[學習路線、編程教程、實戰專案、求職寶典、交流答疑](https://www.codefather.cn)

3）程序員面試八股文：[實習/校招/社招高頻考點、企業真題解析](https://www.mianshiya.com)

4）程序員寫簡歷神器：[專業模板、豐富例句、直通面試](https://www.laoyujianli.com)

5）1 對 1 模擬面試：[實習/校招/社招面試拿 Offer 必備](https://ai.mianshiya.com)