按理说，

市面上的 Agent 教程层出不穷，却大多要么内容太浅、要么碎片化。导致学习者在搭建真实项目时仍然面临以下痛点：

• 调试成本高：每次修改前端交互都需要真实调用大模型 API，既耗时又费钱。
• 网络延迟不可控：线上 API 的响应时间波动会直接拖慢本地开发效率。
• 缺少离线环境：在网络不佳或预算受限的情况下几乎无法继续开发与测试。

针对这些痛点，我变得轻松且低成本。

介绍 Vercel AI SDK

Vercel AI SDK 是目前最火热的 AI 框架之一，主要理念是「统一接口」。无论是 OpenAI、Anthropic 还是国内模型，在 SDK 中都表现为实现特定接口的 LanguageModel 对象。当我们调用 generateText/streamText 时SDK 会执行该模型的 doGenerate/doStream 方法。

这代表着，只要我们按照 SDK 要求返回数据。就可以自定义任何模型行为，包括完全脱离网络的本地 Mock。

编写简易 Mock Model

目标：在本地根据使用者输入返回硬编码文本，还能分别提供一次性生成（generateText) 和流式输出（streamText) 的体验。

响应库与匹配逻辑

const RESPONSES: Record = {
default: "你好！我是模拟模型，虽然我没有真正调用 API，但我能根据你的输入返回预设的文本。来模拟真实的对话体验 :)",greeting: "你好！虽然是模拟的，但流式输出的效果和真实 API 一致 :)"。name: '你刚才告诉我了呀！不过，我能"记住"是因为代码把对话历史传给了我。',intro: "我是大模型。在本地模拟回复，机制和真实 API 完全一致。",}，

Pain point addressed: 不再需要每次调试都调用昂贵的大模型 API，只需匹配使用者输入即可返回相应文本。

pickResponse 函数

function pickResponse(
prompt这方面，DoGenerateOptions | DoStreamOptions
): string {
const userMsgs = .filter => m.role === "user");const last = userMsgs;const text =
.map => )
.join
.toLowerCase;if || text.includes) return RESPONSES.intro;if || text.includes) return RESPONSES.greeting;if || text.includes) return RESPONSES.name;return RESPONSES.default;}

Token 使用统计

const USAGE: DoGenerateResult = {
inputTokens: 0。outputTokens: 0,totalTokens: 0,};

模型骨架

export function createMockModel: LanguageModel {
return {
specificationVersion: "v2" as const。provider: "mock",modelId: "mock-model",get supportedUrls {
// 本地模型无需外部 URL
return Promise.resolve;},// ---------- 单次生成 ----------
async doGenerate {
return {
content:。finishReason: "stop",usage: USAGE,warnings:,};
},// ---------- 流式生成 ----------
async doStream {
const text = pickResponse;const id = "mock-text";// 按 SDK 标准组织流事件块
const chunks =;说起来，// 返回包装好的 ReadableStream
return { stream: createDelayedStream };},}，}

实现流式输出

Pain point addressed: 模拟网络延迟与打字机效果，让 UI 在离线状态下仍能体验真实感。

function createDelayedStream(
从chunks来看，StreamPart。delayMs = 30
): ReadableStream {
return new ReadableStream({
start {
let i = 0;其实，function next {
if {
controller.enqueue;// 推送下一个块
setTimeout;// 人为延迟
} else {
controller.close;// 完成
}
}
next;},})，}

在业务代码中使用 Mock Model

一次性生成示例

import { generateText } from "@vercel/ai";async function demoGenerate {
const { text } = await generateText({
model这方面。createMockModel,prompt: "用一句话介绍你自己",});console.log，}
demoGenerate;怎么说呢，

流式输出示例

import { streamText } from "@vercel/ai";async function demoStream {
const result = await streamText({
再看model。createMockModel,prompt: "用一句话介绍你自己",});for await {
process.stdout.write;}
console.log;怎么说呢，// 换行
}
demoStream;

Pain point addressed:

• No network cost: 所有调用均在本地完成，无需消耗 OpenAI 等服务费用。
• No latency variance: 通过可控的 alert。开发者可以自行设定延迟，确保 UI 行为可预测。
• Easier unit testing: 可以把 Mock Model 注入到测试环境中。实现 UI 验证与行为回归测试，而不依赖外部服务。

& 推荐场景

通过实现 doGenerate/doStream,我们成功建立了一个完全本地运行、兼容 Vercel AI SDK 的 Mock Model。再看它适用于，

• A/B 测试或 UI 验证阶段的快速迭代；
• - 离线开发、网络受限或预算紧张时的兜底方案；不过，
• - 前端单元测试、集成测试还有 CI 环境下避免外部依赖；
• - 教学演示或内部培训时防止意外泄露真实 API 密钥。按理说，

*学习完成于 ——*

*基于十分钟。让你的 AI 开口说话——学习笔记整理*