AI 正在重塑軟體的生產方式，而前端開發是最先可能受影響的領域：前端開發邏輯適合模板化，且開發者多、頭部開發語言集中。前端的視覺屬性適合使用者快速表達偏好，形成資料飛輪。隨著前端程式碼能夠被即時生成，生成式 UI 能帶來人機互動方式的創新，比 Chatbot 更智慧的 LUI+GUI 產品互動將湧現。

Vercel V0 是目前最好的 UI 生成模型，且可控性遠強於其他模態的生成模型，因為軟體的可編碼性讓使用者可以對任意一個web元件用prompt進行改寫。同時他們的 AI SDK 也讓前端開發者更無縫地將 LLM 能力融入產品中，打造出一個能即時生成 UI 的產品。對比其他程式碼模型還停留在 code autocompletion 和 demo 的狀態，Vercel 團隊對前端開發的深入理解和資料積累讓他們能成為領軍者。

Vercel 從前端開源框架 Next.js 起家，打造了開發者口碑最佳的 frontend cloud，讓使用者可以快速在其平臺上完成 web development 並進行部署。他們保持著 ARR 100%+ YoY 的高速增長，並且 AI-native application 的首選平臺：Jasper、Scale、Anthropic 等公司的 AI 產品均使用 Next.js + Vercel 打造。由於其創始人 Guillermo Rauch 對 AI 前沿技術十分敏銳，我們相信 Vercel 能抓住 web application 文藝復興的機會，成為新時代 AI 產品開發者的第一選擇。

AGI 很可能在開發領域率先實現，因為程式碼比自然語言更清晰明確、是經過形式邏輯最佳化的語言，而且開發場景的 feedback loop 是可以由機器自己驗證並迭代的，因為程式碼環境本身能夠驗證報錯。

長期最值得關注的是能夠把 coding + CI/CD 工作流完整自動化的 coding agent，比如最近由 Cognition Labs 釋出的 Devin demo 就是一個優秀的例子。但 Devin 作為 SOTA，在沒有人類干預的情況下能解決的 Github issue 比例也只有 ~13%，距離實際部署到生產環境還有一段 gap。

就像自動駕駛在 L3 的狀態時，有機會的是自動駕駛卡車這樣的垂直領域。而前端開發 web development 就是現階段 coding 最值得期待的領域，這個領域有以下幾個重要趨勢：

全球範圍內有10 億+網站，web hosting 是一個千億美金級的市場。根據 2023 年資料市場集中度低，美國市場佔了 42%，其中老牌域名託管 GoDaddy 佔了 9.3%，後面兩位分別是 GCP（7.03%）和 AWS（4.48%）。

除了專業前端開發者，很多獨立或全站開發者都承擔一定的前端工作來實現產品互動。根據 StackOverflow 2023 的統計，Javascript 和 HTML/CSS 的開發者佔比 SQL 類資料庫語言需求更普遍。後端語言中最火的語言的分佈更為離散，使用門檻更高。

StackOverflow 2023 程式語言統計

前端開發的歷史始於 1990 年代早期，當時的網頁主要由 HTML 構成。這些網頁是靜態的，使用者互動性極低，HTML 為網頁提供了骨架。

但只有一個骨架是不夠的，CSS 和 JavaScript 的引入使得網頁變得更加動態和富有互動性：

• CSS 允許開發者將網頁表現層（如字型、顏色、佈局等）與網頁內容層（HTML 語言負責）分離。

• JavaScript 則比 HTML 和 CSS 出現得更晚一些，它為網頁添加了互動性，使其能夠響應使用者操作。

同時，隨著 web 應用的複雜度增加，開始有了前端和後端的清晰分工：前端開發則專注於使用者介面和使用者體驗，負責將後端返回的資料以視覺友好的方式展示給使用者；後端開發主要關注伺服器、資料庫和應用程式邏輯，負責處理來自前端的請求，並返回所需的資料。這樣的分工下前端開發者可以更專注地投入到使用者介面和互動體驗的最佳化中，不必同時擔心伺服器的效能和負載。

隨著 JavaScript 成為 web 開發中最關鍵的程式語言，web application 的複雜度還在提高，僅使用原生 JavaScript 來管理大型專案的使用者介面會變得非常困難。這就是為什麼需要像 React、Vue 這樣的庫（library）。它們就像是搭積木的模具，有了這些模具，開發者可以更快速、更標準化地搭建出高效能的應用程式。

Javascript 已經成為 98% web application 使用的語言

其中 React 是由 Facebook 團隊開發的開源 JavaScript library，用於構建使用者介面，特別是單頁應用程式。它的出現極大地改變了前端開發的方式，使得開發複雜的動態網頁應用變得更加簡單和高效。它很好地提高了 Javascript 程式碼的可維護性和重用性，成為 Javascript 語言使用最多的框架。

React 成為最火的 Javascript 庫

而 React 也不能滿足所有現在網頁開發需求，在其之上有進一步最佳化的框架。其中 Next.js 是最近幾年增長最快的框架。它的開發者就是 Vercel CEO Guillermo Rauch，一個傳奇的開源開發者。Next.js 在 React 框架中的下載量遠超其他框架，並且仍在穩步增長：

圖中的 Gatsby 和 Remix 均為 Next 的直接競爭對手。Gatsby 是 Vercel 競對 Netlify 收購的框架，從資料看這次收購併不成功

Next.js 的流行背後是其技術選型更適合現代 web 開發需求：

1. 支援服務端渲染(SSR)和靜態站點生成(SSG)，實現更快的內容載入和更好的 SEO；

2. 內建功能豐富，如自動程式碼拆分、強大的路由功能和影像最佳化，簡化了複雜應用的開發；

3. 優先考慮開發者體驗，提供直觀高效的開發流程，如 TypeScript 支援和程式碼熱過載；‍

總結一下，JavaScript、React 和 Next.js 之間的關係可以概括為：JavaScript 是構建 Web 應用的基礎；React 在此基礎上提供了一種高效的方式來構建使用者介面；而 Next.js 則在 React 的基礎上增加了伺服器渲染、路由處理等功能，使得構建現代 Web 應用變得更加高效和強大。

自 ChatGPT 問世開始，大家對下一代人機互動的形式有很多想象，尤其是 Language UI 和 Graphic UI 結合成為了焦點話題。實現互動創新的前置條件是什麼呢？

在之前的 Agent 綜述文章中，我們提到過隨著 coding AI 的發展，軟體開發將進入一個新的自適應生產階段（adaptive software）。就像 3D 列印技術一樣，軟體將根據使用者的具體需求自動生成相應的UI元件。

而打造 Next.js 的 Vercel 團隊打造了 V0：第一個能生成 production-ready 水平前端程式碼的生成模型。

Vercel V0 是一個程式碼生成模型，能讓使用者生成網頁 demo 和程式碼，程式碼能直接夠部署成為一個基礎版網頁，也在其產品 demo 上進行進一步修改。每次生成之後，v0 類似 MidJourney 會給 3 個版本 AI 生成的 UI，可以選擇一個進行深入編輯，甚至貼上到自己原本的專案中進一步開發。

例如我可以先要求 V0 生成一個 Saas dashboard 佈局作為底稿（V0 名字的來源，version 0），再在其基礎上進行互動。demo 中的每一個元件都是可以單獨點選並進行修改的，例如，下圖中可以讓 V0 將 logo 改成藍色，模型就會直接進行對應元件。

V0 的使用體驗充分展現了前端程式碼模型的可編碼性，這帶來了網頁生成遠大於圖片生成的可控性。其中的每一個元件都對應著具體的幾行程式碼，如果我們要求對某個元件進行修改的話，這幾行程式碼就可以重新生成，並用其他程式碼作為上下文，保證新生成程式碼有著很高的可用性，能直接融入原本的程式碼。

這些能力已經對所有開發者開放，且已經被不少新團隊用於自己的產品開發中：Ingo 使用 v0 構建了他們的簡歷生成器產品的第一個版本。Braintrust ，一個新的 AI 平臺，使用 v0 構建了其定價頁面。以下 gallery 中都是使用者使用 prompt 對應生成的網頁和前端元件：

對比現在的大多 coding model 不是在做 Github Copilot 那樣的程式碼自動補全，就是仍在不可用的 demo 階段。Vercel V0 在可用性上比其他模型強很多，其團隊對前端程式碼的深刻理解是其中的重要原因：

• V0 模型的訓練資料有三部分：團隊自己積累寫的 code、開源前端程式碼和 AI 合成數據。每次生成之後，v0 類似 MidJourney 會給3個版本 AI 生成的 UI，可以形成優秀的 RLHF 反饋閉環。

• Vercel 作為使用者做網頁開發的 go-to 選項，有足夠多的使用者web開發資料積累，有高質量模板和程式碼庫。而且團隊自己本身是設計 Next.js framework出身，有 know-how 定義什麼是從語言設計出發的高質量程式碼。

v0 的野心是下一代使用者介面的起點。Vercel 團隊藍圖中的下一步有：支援自定義設計、多模態識別將影像轉化為程式碼，以及更強的程式碼安全和訪問控制。這些路線圖很清晰，會有效地提升開發者體驗。

AI SDK 是 Vercel 為前端開發者設計的 Model Router。它提供了一個抽象層，讓開發者可以用自己熟悉的前端語言來處理資料，而不需要關心各類 LLM api 實現細節。

他們 SDK 第一批合作者接入了 Perplexity、11 Labs、Pinecone、Together 等公司。如果開發者要在 next.js 框架中使用 Perplexity API ，只需要一小段程式碼就可以融入前端中，輸入一些基礎的引數就可以產生出高質量的 streaming response 互動。這樣的開發方式對於前端程式設計師而言更 intuitive：

而 AI SDK 3.0 是其最近的一版更新，接入了 Vercel V0 使使用者可以輕鬆地做出帶有 Generative UI 的產品。 Vercel 在這裡給出了一個股票諮詢助手的案例，我們以這個 demo 為例：那麼當我們要求它給出蘋果最近的股價並進行購買時，它就能直接給出對應的 UI，給我們展示蘋果股價，並生成即時購買功能。這是一種優雅的方式實現 Language UI + Graphic UI 的結合。

目前這個產品還在 demo 階段，而且 demo 本身展現的能力過於高頻，因為股票交易是一個非常常見可複用的操作。但隨著這一能力後續可用之後，可以滿足很多使用者使用 app 時的長尾需求，能夠在一個應用中生成出新定義的小程式來滿足一些 ad-hoc 需求。

這一技術有兩個關鍵要點：

• API 設計時要以發揮 LLM 強大的 function calling 能力為出發點，讓使用者儘可能感受到 LLM 的全面性和智慧度。

• 發揮 React Server Components 對每個模組元件進行渲染的能力，使使用者進行顆粒度更細、效能更優的互動。

AI State 是一個 JSON 格式的文字，包含了大型語言模型（LLM）需要讀取的所有上下文。對於聊天應用來說，AI State 通常儲存使用者和助手之間的文字會話歷史。還可以用來儲存每條訊息的建立時間等其他 metadata。AI State 可以在伺服器和客戶端上被訪問和修改。

UI State 是應用程式用來展示 UI 的狀態，它完全在客戶端（類似於 React的 useState）。它可以保留 LLM 返回的資料和 UI 元素。這個狀態可以是任何內容，但不能在伺服器上訪問。

從技術文件來看，AI SDK 的設計有效兼顧了應用開發者的效能需求和使用者的資料安全需求。期待這一能力為開發者使用之後湧現出更多的 use case，來驗證這一開發者介面的 PMF。

上一部分介紹了 Vercel 團隊最新在 Gen AI 前沿的實踐，那麼他們在 Next.js 之後，Generative UI 之前所做的產品究竟是什麼呢？

Vercel 把自己的主產品定義為 frontend cloud，是一個易用、且 scalable 的 web application 部署平臺。其高效能建立在幾個重要的技術趨勢之上：JAMstack、邊緣計算和 serverless 設計。尤其 Serverless 設計允許開發者在無需管理底層伺服器的情況下執行和構建 Web 應用，幫助使用者能夠省去很多冗雜的 Infra 部署工作。

Vercel 產品根據前端工作流可以拆解為 4 個關鍵部分：(1) develop，(2) preview，(3) ship，(4) analytics。

• Develop: Vercel 為開發者提供了一個快速將 web application 實現的 workflow。讓開發者可以從 Github 等源頭匯入前端專案模板，並整合 MongoDB 等外部資料來源。在程式碼開發完成後，Vercel 還提供了從快取到 serverless functions 的端到端測試。

• Preview: 這一部分產品可以類比為前端開發的 Figma。設計、開發和運維團隊可以擺脫複雜的測試管線，在每次部署之前協作測試他們對網站的更改。Vercel 會自動生成一個可分享的即時預覽站點，允許在網頁 demo 在上線前進行測試，團隊間互相 comment 給反饋。

• Ship: Vercel 基於對 Next.js 的原生支援， serverless 和 edge computing 的能力為開發者提供快捷的部署、穩定的效能，和對 SEO 的支援。同時他們允許在全球範圍內部署網站，並在300毫秒內進行修改更新。這項功能直接和開發者/付費的 value prop 相關，後續會在 business model 處介紹。

• Analytics: 2022年10月，Vercel 宣佈 收購了 Splitbee，這是一個分析和運營工具，可以瞭解使用者的網站體驗。該產品和團隊被納入 Vercel 現有的分析產品。由於 Vercel 負責管理網站，因此他們旗下的分析平臺不需要第三方指令碼或 cookie 跟蹤。

以上這些產品讓 Vercel 成為市場上開發者體驗最好的 web 部署平臺。不過前面提到過，web 市場集中度不高，所以 Vercel 在存量客戶中並沒有因為優秀的開發者體驗，而成為大幅領先的第一名，而是小幅領先 Netlify、雲廠商等公司。

因此抓住增量機會就至關重要。在 ChatGPT 釋出一個月之後，Vercel 就開始成為 AI-native 應用開發的佈道者，透過部落格和模板的形式引導大家最快地使用  Vercel 來快速迭代開發 AI 應用。

而在今年初，Vercel 產品定位進一步清晰：最好的 AI 產品部署平臺。由於他們出色的產品開發體驗，已經有很多公司使用 Next.js + Vercel 開發了自己的主力 AI 應用：

• Scale AI 強調透過使用  Vercel 和 Next.js 讓他們在團隊中只有三個設計師的情況下很快地迭代和部署了自己的 Generative data engine；

• Anthropic 工程師用 Vercel + Next.js 開發了 Claude AI 的 web 產品，團隊中有人是第一次開發 Next.js 程式碼，表示其易上手且開發體驗很棒；

• Runway 稱讚 Vercel 讓團隊加快整個產品開發週期。比如團隊成員稱遷移到 Vercel 後，DNS 構建從 Netlify + GitHub Pages 的 5-8 分鐘縮短到 Vercel 的 40 秒；

• Jasper 用 Next.js 框架 + Vercel 部署，尤其強調網頁中的 content management (posts, tweets, short stories 等)體驗很好。

此外，Replicate、釋出 Devin 的 Cognition 等一眾 AI-native 公司都使用 Vercel 開發部署了自己的主力產品。我們有理由相信隨著模型升級、應用爆發，Vercel 能成為 web development 中重要的受益者。

Vercel 主產品採用 freemium 的商業模式，他們有三個主要的定價梯度:

V0 向用戶全量開放後成為了單獨定價的模型產品，其定價和主產品基本一致：

70% 的 Vercel 使用者是 Next.js 使用者。當更多開發者使用 Next.js 時，Vercel 的增長也會加速。從 2020 年 4 月到 2023 年 5 月，由 Next.js 驅動的網站數量已經從 3.5 萬個增長到 400 萬個，包括 Walmart, Apple, Nike, Netflix, TikTok, Uber, Lyft, Starbucks 等公司的網站。

優秀的 traction 讓 Vercel 的商業化收入一直在高速增長的狀態：2020 年成立的第一年，ARR 為 1mil USD；21 年達到 5 mil USD，22 年達到 25mil USD。在這一年他們以 100 倍 ARR，也就是 $2.5b 的估值進行了一輪融資。而在 2023 年，他們還是以 100%+ YoY 的高速增長，創始人在一次 23 年 6 月的訪談中公開提到他們的 ARR 已經達到 $ 50+ mil。

在整個 web 市場中，33% 的流量集中在最頂尖公司產品上：Google、Meta、Amazon 等，33% 的流量集中在第 10 名-第 10000 名的腰部 web 產品，最後 33% 則是獨立開發者開發的網站。

其中前十名的公司有自己非常成熟的 tech stack，完全自研；最後這部分使用者很多對開發的瞭解甚少，可能會選擇 Shopify、Squarespace 這樣的網頁模板產品。而 Vercel 目前客戶的基本盤主要來自腰部的 web developer。

Vercel 主要的客戶目前可以分為幾類：

• 業餘愛好者：免費使用者，託管單一網站，未來可能會將其帶到公司使用。

• 小型初創公司及中型公司（認為這是 customer base 的一大部分；這些公司可能擁有有限的開發團隊，或只有市場營銷部門）。

• 電商團隊這樣需要 SEO 帶來轉化，付費意願強的客戶在 Vercel 付費客戶中佔比比較大。

創業公司中 Netlify 是 Vercel 最直接的競爭對手，這是一家 2014 年成立的公司。2021年，Vercel 透過 D 輪融資籌集了 1.5 億美元，估值達到 25 億美元；同時，Netlify 透過 D 輪融資籌集了 1.05 億美元，估值達到 20 億美元，a16z 是他們的主要投資人之一，據瞭解，公司最新的 ARR 已經超過了 30 mil USD。

Netlify 提供的也是一個 Jamstack 開發平臺，包括 Web 應用程式和動態網站的構建、部署和無伺服器後端服務。但他們的產品沒有 Vercel 那麼 Next.js 友好，同時對 Gatsby 的收購也並不成功（伴隨著 Gatsby 的 traction 逐漸下滑）。他們團隊對 Gen AI 這一波 catch up 的速度就要慢不少。

而大公司中，雲廠商都有 Web Development 產品。AWS Amplify 是雲廠商中口碑最好的，不過使用者的反映普遍是定價比較有優勢，但開發者體驗仍不如 Vercel。此外大家使用 ChatGPT、Perplexity 等產品時經常遇到的 Cloudflare，也從其雲安全產品延伸出了 Cloudflare 這個網頁開發工具，和雲廠商類似的是使用者選擇的原因是與原本選用方案的耦合度比較深，不需要上手新平臺。 

介紹到這裡，Vercel 團隊展現出了幾個重要的特點：

• 開發 Next.js 時對前端技術的前瞻性，引領最前沿趨勢；

• 從開源到商業化的高速增長。

這背後離不開 Vercel CEO Guillermo Rauch 對產品 PMF 的持續追求、優秀的技術品味和極強的執行力。

Guillermo Rauch 在阿根廷布宜諾斯艾利斯比較落後的郊區出生長大。父親對計算機的興趣讓 Guillermo 在 7 歲獲得了自己的第一臺電腦，從小種下了對程式設計、對開源熱愛的種子。第一個任務便是父親讓他將 Windows 的系統替換成 Linux，之後便一發不可收拾地在開源社群自學程式設計和英語，十一二歲在開源社群成為 celebrity。後來有陌生人在網上對 Guillermo 說你可以用這方面的 expertise 建立事業，Facebook 也丟擲橄欖枝想要招聘他，讓他意識到自己的 passion 和事業成就是完全能夠自洽的，更是從高中輟學到美國工作、創業。

這種特殊的成長經歷讓他天然更在意商業化和業務規模。相比很多技術小天才型別的 founder 喜歡做開源“玩具”，Guillermo 是希望讓產品有更高的商業認可度的。

他創辦的第一家公司 CloudUp 是一個雲端檔案儲存與分享平臺，CloudUp 其實就已經有了一部分 Vercel 的雛形，這款產品在當時的 killing feature 是拖放資料夾即可迅速建立超連結，便於線上分享檔案和協作，若檔案為 HTML 格式，還能獲得高效能的靜態網站託管。這滿足了 WordPress 在即時協作的需求，於是Guillermo 將 CloudUp 賣給 WordPress 實現了第一次成功退出、並加入了 WordPress，Guillermo 在 WordPress 的兩年間學到很多關於如何平衡開源專案和大規模商業運作的經驗。

Guillermo 來到灣區的時間讓他恰好成為 AWS 的第一批使用者，他由此認識到了雲服務價值，於此同時也認為其易用性很糟糕。加上 React 越來越流行，但同樣難以快速上手，且開發者需要自己管理和維護伺服器，他作為一個經驗豐富的開發者在開發網站時也深受困擾。在市場需求端，Guillermo 也由此想到那些正在經歷數字化轉型的傳統零售在從線下實體轉型中如果要和 Amazon、 “.com” 的競爭必然面臨更大的挑戰。Next.js 和 ZEIT 由此應運而生，在 2020 年 A 輪融資時，公司更名為 Vercel 。

Vercel 和 Next.js 成功的背後是設計原則和工程實踐的精細打磨。在正式創立 Vercel 之前，Guillermo 列出了 Web 應用開發的七項原則，底層的 philosophy 是必須 at big scale, at global scale，並且這七項原則的背後是 Guillermo 反向工程 Google、Amazon 等全球最大的網站的結果，這就為 Next.js  設定了一個很高的標準。而在釋出 Next.js 之後，最重要的權衡就是如何兼具開發者體驗與企業級應用的效能和可靠性。作為 dev tool，Next.js 必須提供出色的開發者體驗；而作為支撐企業級應用的基礎設施，它又必須兼顧業務上的高 ROI 和終端使用者體驗。這在當時被許多人認為是不可調和的 tradeoff。而 Guillermo 堅持在這個 spectrum 中兩頭都要抓，為其產品後來獲得企業和開發者認同奠定基礎。

在從 Next.js 開源框架專做商業化產品之後，Vercel 的高速增長獲得了投資人的追捧，兩年間融資 3 億美金左右：

這一波 Gen AI 的趨勢中，Guillermo 又對 Software 2.0 做了許多預言。他認為，隨著 AI 技術從 paper-first 漸漸變為 product-first，軟體開發也將從 backend-first 轉為 frontend-first。我們非常認同這個判斷，且期待看到這波機會中 Vercel 在這個千億美金的市場中將領先的開發者 mindshare 轉化為持續的產品和商業化增長。