今年前端已死了10 几次了?不,是“意图”杀死了“点击”——谈谈 AI 原生应用的架构突围

大模型开发与运维机器学习

现在的技术圈子,尤其是大前端和 AI 结合的领域,变化快得离谱。如果还在谈论“怎么用 ChatGPT 写代码”或者“如何接入 OpenAI API 做个聊天机器人”,那真的有点滞后了。

说实话,如果到了 2025 年底,你的所谓“AI 原生应用”还只是在界面右下角挂一个 Chatbot 弹窗,或者是把 API 返回的 Markdown 渲染成一堆文字,那你可能真的要小心了。

picture.image

去年初的神器 nextchat

这几天在技术群里潜水,看到还有人在争论 Vue 4 和 React 19 哪个更适合做 AI 应用。这就离谱。兄弟们,大人,时代变了 。现在的战场压根不在视图层框架,而在意图(Intent)到界面(UI)的动态映射 上。

picture.image

今天不聊那些虚头巴脑的“未来展望”,咱们只聊硬核的架构变化。这一波,是大前端的生死局。

一、 静态 UI 的“棺材板”压不住了

回想一下,过去十年我们是怎么写前端的?
产品经理给需求,UI 出图,我们把页面拆成 Header、Sidebar、Content,然后用代码把这些静态模具 刻死在项目里。状态管理再复杂,无非也就是控制这些模具的显隐和数据填充。

但 Generative UI(生成式界面)[1]把桌子掀了。

picture.image

阿里的灵光

现在的 AI SDK(比如 Vercel 那一套 ),允许服务端直接流式传输组件 ,而不是文本。这意味着什么?意味着UI 是阅后即焚的 。用户问“帮我定一张去广州的票”,屏幕上不应该吐出一堆文字,而应该直接生长 出一个选座组件、一个支付卡片 。

这不仅仅是体验问题,是架构塌方
你原来的路由表(Router)可能要失效了,因为页面不是“跳”过去的,是“生”出来的。你得习惯在 Server Actions 里写 JSX,得习惯让 LLM 决定下一帧渲染什么,而不是你的 if-else 逻辑。

这就要求我们从“编写界面”转变为“设计界面的原子和约束”。你不再是盖房子的,你是给 AI 制定“乐高积木搭建规则”的人。

二、 别把服务器当冤大头:WebGPU 的逆袭

另一个让我看不下去的现象:稍微沾点 AI 的功能,就一股脑往云端扔。

Token 不要钱吗?延迟不卡吗?
2025 年了,WebGPU 早就不是实验特性了 。现在 Chrome 和 Edge 对 WebGPU 的支持已经相当成熟,配合 WebLLM 这种库,在浏览器里跑个 Llama-3-8B-Quantized(量化版)简直不要太轻松 。

这才是真正的“大前端”复兴。
浏览器拿回了久违的计算权。以前我们做 SPA(单页应用)是为了让页面不刷新;现在我们做 AI-First App,是为了让推理不离线

设想这样一个架构:

小模型守门 :用户的鼠标轨迹、输入意图,直接在浏览器端用 WebGPU 跑个小模型(TinyLlama 级别)做预判和意图识别。

大模型兜底 :只有遇到极其复杂的推理任务,才透传到云端的 GPT-5 或 Claude 4。

隐私无感 :用户的本地文档分析,直接在端侧搞定,数据根本不出本地。

这种 Local-First AI 的架构,才是把成本打下来的关键。别老想着堆云端算力,客户端那块 RTX 4060 显卡闲着也是闲着,用起来啊!

三、 所谓的“AI 原生”,到底原生在哪?

很多人问我,现在转行还来得及吗?AI 把代码都写了,我要失业了。
扯淡。

Cursor 和 Bolt.new 确实能帮你写代码,但它们懂业务边界 吗?懂数据流转的坑 吗?
AI 原生架构的核心,不在于你接入了多少个 Model,而在于你如何处理不确定性

传统编程是确定性 的:Input A -> Output B。
AI 编程是概率性 的:Input A -> Maybe B, Maybe C, Maybe 乱码。

优秀的 AI 架构师,现在干的事儿是给 AI 擦屁股 ——哦不,是建立防抖动机制 。你需要设计一套中间层,去校验 LLM 生成的 JSON Schema 是否合法,去拦截那些可能导致 UI 崩溃的“幻觉”组件。你得在 Prompt 里写断言,在 UI 层做错误边界(Error Boundaries)的降级处理。

这比单纯写 CSS 难多了,也得劲多了。

四、 写在最后

技术圈有个坏毛病,喜欢造新词。什么 Agentic Workflow、Neuro-symbolic AI... 听得人脑仁疼。
其实剥开皮,核心逻辑很简单:
以前我们用代码指挥 CPU 干活,现在我们用代码(和提示词)指挥模型干活,然后再由模型指挥 CPU。

对于前端开发者来说,这是最好的时代,也是最坏的时代。
好的是,你终于有机会摆脱“切图仔”的标签,去触碰应用的核心逻辑;
坏的是,如果你还抱着“熟练使用 API”沾沾自喜,那离被优化真的不远了。

别看了,去研究一下 streamUI 的原理[2],去跑一下 WebLLM 的 Demo[3]。
动起来,别让自己成了那个“静态组件”。

引用链接

[1] Generative UI(生成式界面): https://ai-sdk.dev/docs/ai-sdk-ui/generative-user-interfaces
[2] 原理: https://www.youtube.com/watch?v=ttInJ0fbMQU&t=28s
[3] Demo: https://dev.to/gopisuvanam/how-to-use-llm-in-browser-using-webllm-5fon

0
0
0
0
关于作者
关于作者

文章

0

获赞

0

收藏

0

相关资源
火山引擎大规模机器学习平台架构设计与应用实践
围绕数据加速、模型分布式训练框架建设、大规模异构集群调度、模型开发过程标准化等AI工程化实践,全面分享如何以开发者的极致体验为核心,进行机器学习平台的设计与实现。
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论