上周刷到一条开发者吐槽:用Claude写长文,用户等了8秒才看到第一个字,直接关掉页面。这不是模型慢,是调用方式错了。Anthropic官方工程师在Supabase社区分享了一套边缘函数实战方案,三个技术点全是省钱+提速的硬货。
流式响应:让用户1秒内看见字
![]()
长文本生成最怕什么?不是总耗时长,是用户盯着空白屏幕的焦虑感。Claude的流式响应(Streaming)把"等待8秒看全文"变成"1秒内开始蹦字",感知延迟直接砍到脚脖子。
技术实现不复杂。服务端用Server-Sent Events(SSE,服务器推送事件)逐块吐数据,客户端边收边渲染。Supabase Edge Function里这么写:
```typescript
const stream = await client.messages.stream({
model: "claude-haiku-4-5",
max_tokens: 1024,
messages: [{ role: "user", content: prompt }],
});
```
关键是把ReadableStream包装成SSE格式,每收到一个`content_block_delta`就立即推给前端。Flutter端用`LineSplitter`逐行解析,匹配到`data:`前缀就实时追加到界面。
实测效果:博客草稿、会议纪要这类长生成场景,用户留存率提升明显。不是模型变快了,是心理预期管理对了。
工具调用:让AI能查数据库、算数据
纯对话AI的天花板很低。用户问"我今天有什么待办",模型要么瞎编,要么让你自己去查。工具调用(Tool Use,即函数调用)打破这个僵局——AI可以触发真实的数据库查询、API请求或计算逻辑。
实现分三步走:
第一步,定义工具模式。比如搜索任务列表:
```typescript
const tools: Anthropic.Tool[] = [{
name: "search_tasks",
description: "Search the user's task list",
input_schema: {
type: "object",
properties: {
query: { type: "string" },
status: { enum: ["pending", "done", "all"] }
},
required: ["query"]
}
}];
```
第二步,首次请求时把工具列表塞给模型。如果`stop_reason`返回`tool_use`,说明AI决定调用函数。
第三步,执行真实查询,把结果塞回第二轮对话。模型拿到数据后,再用自然语言组织回答。
这套模式是任务管理AI、客服机器人、智能报表的底层骨架。关键是边界清晰:AI负责意图理解和语言组织,系统负责数据准确性和权限控制。
提示词缓存:重复系统指令的省钱秘诀
生产环境有个隐形杀手:每次请求都重复发送冗长的系统提示词(system prompt)。几百上千字的角色设定、输出格式要求、安全约束,来回传几十遍,token费用和延迟双双爆炸。
Claude的提示词缓存(Prompt Caching)专门治这个。原理是把高频复用的前缀内容缓存起来,后续请求只传变化的变量部分。
适用场景很具体:
- 多轮对话中,系统角色设定不变,只有用户消息在变
- 批量处理同类任务,比如给100篇文章打标签,分类标准相同
- RAG(检索增强生成)流程,知识库上下文固定,只有查询问题不同
缓存命中后,成本降幅可观。原文没给具体数字,但参考行业惯例,重复token的计费通常能打到1折以下。更隐蔽的收益是首token时间(Time to First Token)缩短,因为服务端省去了重复解析长提示词的开销。
三招组合的生产环境打法
单用任何一招都有局限,组合拳才值钱。一个典型的工作流:
1. 系统提示词走缓存,固定角色和输出格式
2. 用户问题进来,触发流式响应,1秒内开始反馈
3. 模型判断需要查数据,自动调用工具函数
4. 查询结果回传,继续流式生成最终回答
这套架构在Supabase Edge Function里跑,边缘部署意味着全球用户都能就近访问,冷启动问题比传统服务器less方案轻很多。Deno运行时原生支持TypeScript,省去了构建步骤,代码即写即跑。
Flutter客户端的配合也很关键。SSE不是HTTP标准请求,不能用普通的`http.get`,得用`client.send`拿到StreamResponse,再逐行解码。UI层建议用`AnimatedBuilder`或`Riverpod`管理增量文本,避免`setState`频繁触发重绘。
省钱的底层逻辑:减少重复计算和无效等待
这三个模式指向同一个产品思维:成本不是按调用次数算的,是按"无效消耗"算的。
流式响应消灭的是用户等待的心理成本,降低跳出率。工具调用消灭的是模型幻觉的修正成本,减少人工复核。提示词缓存消灭的是重复传输的计算成本,直接打折账单。
Claude Haiku 4.5在这个方案里被反复使用,不是因为它最强,而是速度和成本的甜点区卡得准。长生成用流式补短板,工具调用补能力,缓存补成本,中小团队也能跑出接近大厂的体验。
原文代码全是MIT风格的开源片段,复制改改就能跑。如果你正在用Claude做产品,建议先把流式响应加上——这是用户最能感知的一步,也是实现成本最低的一步。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.