聊《别急着换赛道：前端经验在 AI 项目里到底值多少？》之前，先说一句实在的：别急着背概念，先看它在真实项目里到底解决什么问题。

摘要

摘要：前端转大模型，界面交互是优势，但 Demo 能跑不等于项目能上线。复盘一次联调失败的排查路径，聊聊权限、日志和可观测性才是真实门槛。

---

目录

• 前端的转型优势
• AI 应用交互模式变了
• 流式输出：不只是 SSE 那么简单
• 多模态体验的坑
• 作品集方向： Demo 之外还能放什么
• 总结

---

前端的转型优势

前端做 AI 应用，上手确实快。

你会 React，会状态管理，会处理异步请求，这些能力在 Agent 项目里直接复用。模型调用就是 fetch，流式输出就是 SSE，界面渲染就是组件——概念上很连贯。

但优势也藏着陷阱。

很多前端同学的第一反应是：把 Prompt 写好，把界面做漂亮，Demo 就能交差。结果联调时才发现，后端同学说"接口通了"，但请求超时、权限校验失败、日志找不到根因——这些问题跟模型本身没关系，跟前端经验也没直接关系。

我第一次意识到这点，是去年帮一个团队接 Hermes 的 Agent 系统。前端页面已经做好了，用户输入、流式展示、工具调用结果渲染，一切看起来都很顺利。直到那天联调，用户反馈"有时候提交后页面卡死，有时候返回乱码"。

排查了三天，最后发现不是模型的问题，也不是前端的问题——是权限校验在中间层被跳过了，导致某些工具调用没有鉴权日志，出了问题根本定位不到。

---

AI 应用交互模式变了

传统前端开发，用户操作是确定的：点击、输入、提交，响应是确定的。AI 应用的交互模式完全不同。

用户输入一个问题，模型可能调用多个工具，返回可能是流式的，中间状态可能很长，最终结果可能需要多轮才能确定。

这意味着前端需要处理的状态空间比过去大得多。

以 Agent 应用为例，一个典型的对话流程可能是：

用户输入 → 前端发送请求 → 后端路由到 Agent → Agent 决定调用工具 → 工具执行 → 结果返回 Agent → Agent 生成最终回答 → 流式返回前端 → 前端渲染

每一步都可能失败，每一步都需要前端有对应的处理逻辑。

传统的前端思维是"请求-响应"模式，AI 应用是"流式-状态-重试"模式。这个转变很多前端同学没有意识到，导致联调时频频踩坑。

---

流式输出：不只是 SSE 那么简单

流式输出是 AI 应用的前端核心能力，但真正做起来，坑比想象的多。

最常见的问题是：流中断了怎么办？网络抖动怎么感知？部分响应怎么渲染？

我那次联调失败的经历，流式输出就是重灾区。

后端同学说 SSE 已经通了，前端拿到流之后逐行解析，展示在页面上。看起来没问题。但实际测试时发现，当用户快速切换对话、或者网络不稳定时，流会中途断开，前端没有重连逻辑，页面就直接卡住了。

更麻烦的是，流式响应里的错误信息往往不直观。模型调用失败时，返回的可能是一段 JSON，也可能是一段文本，甚至可能直接是空流——前端需要统一处理这些情况。

下面是一个比较实用的流式处理框架，结合错误重试和状态管理：

interface StreamOptions {
  url: string;
  body: Record<string, unknown>;
  onChunk: (chunk: string) => void;
  onComplete: (result: string) => void;
  onError: (error: Error) => void;
  maxRetries?: number;
}

async function streamFetch({
  url,
  body,
  onChunk,
  onComplete,
  onError,
  maxRetries = 3,
}: StreamOptions) {
  let retries = 0;

  while (retries <= maxRetries) {
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      const reader = response.body?.getReader();
      if (!reader) throw new Error('No readable stream');

      const decoder = new TextDecoder();
      let fullText = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n').filter(Boolean);

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') continue;
            try {
              const parsed = JSON.parse(data);
              const text = parsed.choices?.[0]?.delta?.content ?? '';
              if (text) {
                fullText += text;
                onChunk(text);
              }
            } catch {
              // 非 JSON 数据直接作为文本处理
              fullText += data;
              onChunk(data);
            }
          }
        }
      }

      onComplete(fullText);
      return;
    } catch (err) {
      retries++;
      if (retries > maxRetries) {
        onError(err instanceof Error ? err : new Error(String(err)));
        return;
      }
      // 指数退避重试
      await new Promise(r => setTimeout(r, Math.pow(2, retries) * 1000));
    }
  }
}

这个框架的核心不是多复杂，而是把"流中断"和"错误处理"当成一等公民来对待。很多前端同学写流式输出，只考虑了成功路径，联调时自然频频翻车。

---

多模态体验的坑

多模态是 AI 应用的发展趋势，但前端处理多模态输入输出，比想象中大模型本身难。

图片上传、语音识别、视频理解——每个模态都有自己的处理流程。前端需要处理文件选择、压缩、上传进度、解析结果渲染等一系列问题。

更关键的是，多模态的失败模式比纯文本复杂得多。图片上传失败、语音识别超时、视频解码异常——这些错误不是模型的问题，是前端的基础设施问题。但联调时，这些错误往往被误判为"模型能力不足"。

我见过最典型的情况是：用户上传图片后，模型返回结果很慢，前端没有加载状态，用户以为卡死了，反复刷新，导致请求堆积，后端直接熔断。

多模态体验的优化，本质上是前端工程能力的体现。权限校验、日志记录、错误分级——这些在纯文本场景里容易被忽视的问题，在多模态场景里会被放大。

---

作品集方向：Demo 之外还能放什么

很多前端同学转大模型，作品集里放的都是一个聊天界面，输入问题，模型回复。这种 Demo 能说明你会调 API，但说明不了你能做生产级应用。

建议作品集里至少包含以下内容：

1. 流式输出的错误处理：展示你在流中断、网络异常、超时等情况下的处理逻辑。

2. 权限与鉴权：展示你的应用如何处理用户权限，如何防止未授权的工具调用。

3. 可观测性：展示你的应用如何记录关键日志，如何追踪一次请求的完整链路。

4. 多模态处理：如果有能力，展示图片、语音等多模态的输入输出处理。

一个有竞争力的作品集，不是展示你能把 Demo 跑起来，而是展示你能把问题想周全。

---

总结

前端转大模型，优势在界面和交互，但真正的门槛在工程化。

Demo 能跑只是入门，联调时权限、日志、可观测性才是决定项目能不能上线的关键。那次联调失败让我明白，前端同学转大模型，不能只盯着模型调用和界面渲染，要把权限校验、日志记录、错误处理当成核心能力来 build。

这不是否定前端的优势，而是提醒：优势只是起点，工程化能力才是护城河。

资料展示

下面是我整理的AI大模型学习资料和工具包预览，适合收藏后按主题逐步学习。

如果你想看完整资料目录，可以在评论区留言「资料」；也欢迎告诉我你更关注AI大模型里的哪类内容。