聊《别急着换赛道前端经验在 AI 项目里到底值多少》之前先说一句实在的别急着背概念先看它在真实项目里到底解决什么问题。摘要摘要帮一家电商团队把AI客服系统从Demo推上线流式输出只用了两周权限配置和日志兜底却拖了一个月。前端做AI应用最大的认知差不是调接口而是从页面思维切换到系统思维——用户体验好只是门槛权限边界清晰、日志可追溯才是上线的关键。---目录从Demo到上线我被权限日志教做人前端转AI应用优势在哪坑在哪流式输出前端最熟悉的领域多模态交互体验是加分项不是护城河作品集建议别再只放聊天demo了总结---从Demo到上线我被权限日志教做人去年接了个私活帮一个做知识管理的团队搭AI笔记助手。前端部分我一周就搞定了React Vercel AI SDK流式输出、Markdown渲染、打字机动画功能演示视频一发客户很满意。结果真正上线前运维团队甩过来三个问题1. 模型调用的API Key暴露在客户端 anyone can steal it2. 用户权限没接入系统A公司的员工能看到B公司的数据3. 线上报错全凭用户截图反馈定位问题靠猜我花了整整两周重写了后端层加了中间鉴权、请求链路追踪和错误分级上报。上线那一刻我才意识到前端做AI应用的最后一道门槛不是UI多好看而是你能不能接受一个事实——AI系统的复杂性远高于普通CRUD。---前端转AI应用优势在哪坑在哪优势流式体验的天然土壤前端做AI应用有几个天然优势流式响应SSE、WebStream 这些技术前端玩得最溜打字机效果、逐行渲染、进度反馈这些是用户体验的核心多模态输入图片上传、音频录制、实时预览前端处理起来驾轻就熟状态管理React/Vue 的响应式体系天然适合AI对话这种多状态切换的场景坑权限边界和错误处理最大的坑在于后端思维的缺失。传统前端项目权限通常由后端控制前端只负责展示。但AI应用不一样API Key绝对不能暴露在客户端每次对话的上下文长度限制需要合理控制模型调用失败时的降级策略用户输入内容的安全过滤我见过太多前端项目Demo跑通后直接部署结果线上被恶意调用刷爆API账单或者模型输出了不该输出的内容。---流式输出前端最熟悉的领域这是前端最能发挥的地方。我用 Vercel AI SDK 实现了一个基础的流式对话接口// app/api/chat/route.ts import { streamText } from ai; export async function POST(req: Request) { const { messages } await req.json(); // 关键在服务器端调用模型API Key不会暴露 const result streamText({ model: claude-3-5-sonnet, messages, // 设置最大token数防止上下文溢出 maxTokens: 2048, // 流式输出前端实时渲染 onFinish: ({ text, usage }) { console.log(使用了 ${usage.totalTokens} tokens); } }); return result.toDataStreamResponse(); }代码解释streamText是核心函数它接收消息列表返回一个可流式传输的结果对象model参数指定使用哪个模型这里用 Claude 3.5 Sonnetmessages是历史对话上下文注意每次请求都要带上完整的上下文maxTokens控制单次响应的最大长度避免模型输出过长导致超时或费用激增onFinish回调可以在对话结束时记录token用量用于成本监控前端接收侧// 前端组件 const { messages, append } useChat(); // append 会自动处理流式响应前端只需处理渲染逻辑排查过程有一次线上出现流式输出中断的问题现象是用户看到文字跑到一半就停了。我按以下步骤定位1. 检查浏览器网络面板发现 SSE 连接在约15秒后断开2. 查看服务器日志发现是网关超时配置为15秒3. 将网关超时调整为60秒问题解决这个案例说明流式输出断连不一定是模型的问题可能是网关或负载均衡器的超时配置。---多模态交互体验是加分项不是护城河AI笔记助手支持图片输入前端要做的事情是1. 图片上传前的压缩处理2. 上传图片的预览和删除3. 调用多模态模型时传递base64或URL// 图片处理示例 async function compressImage(file: File): PromiseFile { const canvas document.createElement(canvas); const ctx canvas.getContext(2d); const img new Image(); return new Promise((resolve) { img.onload () { // 限制最大边长 const maxSize 1024; const ratio Math.min(maxSize / img.width, maxSize / img.height, 1); canvas.width img.width * ratio; canvas.height img.height * ratio; ctx?.drawImage(img, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) { resolve(new File([blob!], file.name, { type: image/jpeg })); }, image/jpeg, 0.8); }; img.src URL.createObjectURL(file); }); }适用边界前端图片压缩适合小图5MB大图应该走服务端处理多模态模型调用的权限控制必须在后端完成不能用前端传图片URL直接调用如果涉及敏感图片如用户隐私照片必须做服务端中转不能直接在前端透传失败原因分析我们最初尝试在前端直接调用多模态模型结果导致API Key暴露。后来改为前端上传图片到OSS再把图片URL传给后端处理。这个改动虽然增加了复杂度但保证了安全性。---作品集建议别再只放聊天demo了很多前端转AI的求职者作品集里全是AI聊天机器人。这类项目同质化严重面试官已经审美疲劳了。我的建议是做一个完整的AI应用包含以下要素1. 权限隔离演示不同角色看到不同的内容2. 错误处理模型调用失败时的降级策略比如缓存兜底、默认回复3. 成本监控展示token用量统计说明你对成本有概念4. 日志追踪每个请求有唯一ID方便问题定位我见过最好的前端转AI作品集是一个内部工具平台集成了多个AI能力文本生成、图片理解、数据分析并且有完整的权限管理和操作日志。这个项目不仅展示了前端能力还体现了系统思维和工程化素养。---总结前端转AI应用最大的认知升级是从页面思维切换到系统思维。流式输出、多模态交互这些前端擅长的领域是你的入场券权限控制、日志追踪、错误兜底这些后端领域才是你的护城河作品集要展示系统能力而不仅仅是UI效果我踩过的坑希望成为你的路标。AI应用开发的真正门槛从来不是调通一个API而是让整个系统在复杂场景下稳定运行。---如果你对权限设计和可观测性搭建有具体问题欢迎在评论区交流。资料展示下面是我整理的AI大模型学习资料和工具包预览适合收藏后按主题逐步学习。如果你想看完整资料目录可以在评论区留言「资料」也欢迎告诉我你更关注AI大模型里的哪类内容。