使用 AI SDK 构建 Angular AI 应用Chat、Completion 与结构化对象生成的完整实战指南【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai本指南基于当前仓库中的 examples/angular 示例应用系统讲解如何在 Angular 应用中集成 AI SDKai-sdk/angularai通过 Express 后端串联 AI Gateway实现实时聊天、文本补全与结构化对象生成三种典型交互模式。读完本文你将掌握Chat、Completion、StructuredObject三个 Angular 服务类的用法、服务端流式响应管线以及前后端代理配置可直接照搬到自己的 Angular 项目中。示例应用概览Angular 前端 Express 后端examples/angular 是一个小型的 Angular 应用核心目标是跑通 AI SDK 的 UI 包在 Angular 生态中的完整链路Angular 负责交互界面Express 负责代理模型请求AI Gateway 作为默认 Provider 提供模型能力。从 package.json 可以看到完整技术栈Angular 20使用 standalone 组件、ReactiveFormsModule与新的switch/for控制流语法并启用了zoneless变更检测见 app.config.ts 中的provideZonelessChangeDetection()Express.js 5作为本地 API 服务端提供/api/chat、/api/completion、/api/analyze三个端点AI SDK 核心包ai服务端流式工具与ai-sdk/angularAngular UI 绑定两者均为 workspace 内部版本AI Gateway默认 Provider示例默认通过 AI Gateway 调用模型模型 ID 形如openai/gpt-5.6Zod用于结构化对象生成的 schema 定义。应用 UI 由 app.component.ts 以三个 Tab 组织分别对应三个独立组件ChatComponent聊天、CompletionComponent补全、StructuredObjectComponent结构化对象。环境准备与启动原文档给出了完整的启动流程这里原样保留并补充说明# 安装依赖仓库使用 pnpm workspace 管理 pnpm install # 创建 .env 文件并写入 AI Gateway API Key echo AI_GATEWAY_API_KEYyour_key_here .env # 或者使用 OIDC 认证方式二选一 # echo VERCEL_OIDC_TOKENyour_token_here .env # 启动应用 pnpm start其中pnpm start由 package.json 中的concurrently脚本驱动同时并行启动两个进程Angular 开发服务器ng serve --proxy-config proxy.conf.json默认监听localhost:4200Express 后端tsx src/server.ts默认监听localhost:3000。浏览器访问localhost:4200即可看到带三个 Tab 的界面。.env文件会被服务端的dotenv/config自动加载见 server.ts 顶部import dotenv/configAI SDK 与 AI Gateway 会自动读取AI_GATEWAY_API_KEY或VERCEL_OIDC_TOKEN完成鉴权。三种核心交互模式Chat、Completion 与 StructuredObjectai-sdk/angular提供与框架深度集成的服务类分别对应 AI SDK 的三种能力多轮对话、单次文本补全、按 schema 生成结构化数据。模式一实时聊天Chatchat.component.ts 演示了最完整的聊天场景核心只有一行public chat: Chat new Chat({});Chat实例自动管理消息数组、加载状态与流式状态。发送消息时通过sendMessage传入用户文本并在第二个参数中附带自定义bodythis.chat.sendMessage( { text: userInput, }, { body: { selectedModel: openai/gpt-5.6, // 动态选择模型 }, }, );body中的selectedModel会随请求发送到服务端由服务端解析并覆盖默认模型——这就是在运行时切换模型的机制。消息渲染在 chat.component.html 中完成该模板几乎覆盖了 AI SDK UI 消息协议的全部 part 类型text普通文本part.state streaming时显示打字光标reasoning推理过程文本用details折叠展示tool-*工具调用通过isToolUIPart类型守卫判断展示工具名、状态、输入与输出 JSONdata-*自定义数据 part通过part.type.startsWith(data-)判断file / source-url / source-document文件与引用来源展示。组件同时提供了停止生成chat.stop()、等待状态chat.status submitted与错误状态的处理构成一个完整的生产级聊天界面骨架。模式二文本补全Completioncompletion.component.ts 演示单次文本生成使用Completion类public completion new Completion({ api: /api/completion, streamProtocol: text, // 使用纯文本流协议 onFinish: (prompt, completion) { console.log(Completed:, { prompt, completion }); }, });关键点在于streamProtocol: text服务端返回的是纯文本流text stream而非完整的 UI 消息协议前端通过completion.complete(input)触发生成completion.loading控制按钮状态completion.stop()中断生成结果以pre原样展示。模式三结构化对象生成StructuredObjectstructured-object.component.ts 演示输入一段内容、输出结构化 JSON的场景。首先用 Zod 定义输出 schemaconst schema z.object({ title: z.string(), summary: z.string(), tags: z.array(z.string()), sentiment: z.enum([positive, negative, neutral]), });再交给StructuredObjectstructuredObject new StructuredObject({ api: /api/analyze, schema, onFinish: ({ object, error }) { if (error) { console.error(Schema validation failed:, error); } else { console.log(Generated object:, object); } }, });提交后structuredObject.object即持有校验通过的强类型对象模板中直接绑定object.title、object.tags.join(, )等字段。onFinish回调中error非空即代表 schema 校验失败这保证了前端拿到的永远是合法结构。服务端实现一条流式响应管线串起三种能力所有前端请求最终都汇聚到 server.ts。这段代码是 AI SDK 服务端用法的浓缩示例值得逐行拆解。统一的请求入口streamText UIMessageStream/api/chat端点是最复杂的app.post(/api/chat, async (req: Request, res: Response) { const { messages, selectedModel } req.body; const modelId typeof selectedModel string selectedModel.length 0 ? selectedModel : defaultModel; const result streamText({ model: modelId, messages: await convertToModelMessages(messages ?? []), stopWhen: isStepCount(5), providerOptions: { openai: { reasoningEffort: low, reasoningSummary: detailed, } satisfies OpenAILanguageModelResponsesOptions, }, tools: { getWeatherInformation: { description: Get the weather in a given city., inputSchema: z.object({ city: z.string() }), execute: async ({ city }: { city: string }) { // 模拟天气查询随机返回一种天气状况 const conditions [sunny, cloudy, rainy, snowy, windy]; return ${city}: ${conditions[Math.floor(Math.random() * conditions.length)]}; }, }, }, }); pipeUIMessageStreamToResponse({ response: res, stream: toUIMessageStream({ stream: result.stream, sendReasoning: true, onError: error error instanceof Error ? error.message : String(error), }), }); });几个值得注意的实现细节模型解析selectedModel支持从请求体动态传入空值时回退到defaultModelopenai/gpt-5.6历史消息转换convertToModelMessages将前端 UI 消息协议转换为模型可消费的消息格式这是前后端协议解耦的关键多步推理上限stopWhen: isStepCount(5)限制 agent 最多执行 5 步工具循环防止无限调用推理流透传toUIMessageStream开启sendReasoning: true配合 providerOptions 中的reasoningEffort: low与reasoningSummary: detailed将模型的推理过程一并流式下发仅支持推理的模型生效服务端工具getWeatherInformation是一个服务端执行的 fake tool输入用 Zod schema 约束执行函数模拟 500ms 延迟后随机返回天气前端通过isToolUIPart识别并渲染调用过程响应管线toUIMessageStream将result.stream包装为 UI 消息流再由pipeUIMessageStreamToResponse直接写入 HTTP 响应——全程流式前端逐 token 渲染。补全与结构化对象的精简管线/api/completion与/api/analyze则使用更轻量的纯文本流管线// 补全直接以 prompt 生成文本 const result streamText({ model: defaultModel, prompt }); pipeTextStreamToResponse({ response: res, stream: toTextStream({ stream: result.stream }), }); // 结构化对象用 Output.object 约束输出 const result streamText({ model: defaultModel, output: Output.object({ schema: z.object({ title: z.string(), summary: z.string(), tags: z.array(z.string()), sentiment: z.enum([positive, negative, neutral]), }), }), prompt: Analyze this content: ${prompt}, });注意两个细节Output.object是服务端的结构化输出机制它保证模型输出满足 schema而前端的StructuredObject类同样持有 schema形成前后端双重校验server.ts 使用了express.json({ strict: false })其注释说明这是为了允许/api/analyze接收 JSON 原始值如纯字符串作为请求体——服务端会先把请求体序列化为prompt再交给模型。前后端代理与模型选择Angular 开发服务器默认不跨域proxy.conf.json 将/api前缀的请求代理到 Express 后端{ /api: { target: http://localhost:3000, secure: false, changeOrigin: true } }因此前端组件中的api: /api/completion等相对路径可以直接命中后端端口 3000无需处理 CORS。关于模型选择原文档的说明在此补全为完整结论默认模型定义在 server.ts 的defaultModel openai/gpt-5.6同时前端 chat.component.ts 的sendMessage也硬编码了selectedModel: openai/gpt-5.6动态切换修改chat.component.ts中的selectedModel参数即可切换模型模型 ID 格式使用 AI Gateway 模型 ID例如openai/gpt-5.4、openai/gpt-5.6格式为provider/model-name。从示例到生产可借鉴的工程要点综合整个 examples/angular 目录这个示例虽然小巧但浓缩了 Angular AI SDK 应用的关键工程决策zoneless 变更检测AI 流式场景高频更新 UIprovideZonelessChangeDetection()app.config.ts避免 Zone.js 带来的性能开销是 Angular 20 下的推荐做法协议分层前端消费 UI 消息协议toUIMessageStream后端内部使用模型消息convertToModelMessages两层协议由ai包自动转换业务代码无需关心格式细节类型安全贯穿前后端工具输入用 Zod、结构化输出用Output.object Zod、前端渲染用isToolUIPart类型守卫整个工具调用与对象生成链路全程有类型保障agent 循环可控stopWhen: isStepCount(5)明确限制了多步工具调用的上限避免失控循环一应用三模式同一份 Express 后端同时服务聊天、补全、结构化对象三种场景展示了streamText一条 API 的三种用法messages/prompt/output参数组合。源码速查应用入口与 Tab 容器app.component.ts、app.config.ts聊天组件chat.component.ts、chat.component.html补全组件completion.component.ts结构化对象组件structured-object.component.ts服务端实现server.ts构建与依赖package.json、angular.json开发代理配置proxy.conf.json【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
使用 AI SDK 构建 Angular AI 应用：Chat、Completion 与结构化对象生成的完整实战指南
使用 AI SDK 构建 Angular AI 应用Chat、Completion 与结构化对象生成的完整实战指南【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai本指南基于当前仓库中的 examples/angular 示例应用系统讲解如何在 Angular 应用中集成 AI SDKai-sdk/angularai通过 Express 后端串联 AI Gateway实现实时聊天、文本补全与结构化对象生成三种典型交互模式。读完本文你将掌握Chat、Completion、StructuredObject三个 Angular 服务类的用法、服务端流式响应管线以及前后端代理配置可直接照搬到自己的 Angular 项目中。示例应用概览Angular 前端 Express 后端examples/angular 是一个小型的 Angular 应用核心目标是跑通 AI SDK 的 UI 包在 Angular 生态中的完整链路Angular 负责交互界面Express 负责代理模型请求AI Gateway 作为默认 Provider 提供模型能力。从 package.json 可以看到完整技术栈Angular 20使用 standalone 组件、ReactiveFormsModule与新的switch/for控制流语法并启用了zoneless变更检测见 app.config.ts 中的provideZonelessChangeDetection()Express.js 5作为本地 API 服务端提供/api/chat、/api/completion、/api/analyze三个端点AI SDK 核心包ai服务端流式工具与ai-sdk/angularAngular UI 绑定两者均为 workspace 内部版本AI Gateway默认 Provider示例默认通过 AI Gateway 调用模型模型 ID 形如openai/gpt-5.6Zod用于结构化对象生成的 schema 定义。应用 UI 由 app.component.ts 以三个 Tab 组织分别对应三个独立组件ChatComponent聊天、CompletionComponent补全、StructuredObjectComponent结构化对象。环境准备与启动原文档给出了完整的启动流程这里原样保留并补充说明# 安装依赖仓库使用 pnpm workspace 管理 pnpm install # 创建 .env 文件并写入 AI Gateway API Key echo AI_GATEWAY_API_KEYyour_key_here .env # 或者使用 OIDC 认证方式二选一 # echo VERCEL_OIDC_TOKENyour_token_here .env # 启动应用 pnpm start其中pnpm start由 package.json 中的concurrently脚本驱动同时并行启动两个进程Angular 开发服务器ng serve --proxy-config proxy.conf.json默认监听localhost:4200Express 后端tsx src/server.ts默认监听localhost:3000。浏览器访问localhost:4200即可看到带三个 Tab 的界面。.env文件会被服务端的dotenv/config自动加载见 server.ts 顶部import dotenv/configAI SDK 与 AI Gateway 会自动读取AI_GATEWAY_API_KEY或VERCEL_OIDC_TOKEN完成鉴权。三种核心交互模式Chat、Completion 与 StructuredObjectai-sdk/angular提供与框架深度集成的服务类分别对应 AI SDK 的三种能力多轮对话、单次文本补全、按 schema 生成结构化数据。模式一实时聊天Chatchat.component.ts 演示了最完整的聊天场景核心只有一行public chat: Chat new Chat({});Chat实例自动管理消息数组、加载状态与流式状态。发送消息时通过sendMessage传入用户文本并在第二个参数中附带自定义bodythis.chat.sendMessage( { text: userInput, }, { body: { selectedModel: openai/gpt-5.6, // 动态选择模型 }, }, );body中的selectedModel会随请求发送到服务端由服务端解析并覆盖默认模型——这就是在运行时切换模型的机制。消息渲染在 chat.component.html 中完成该模板几乎覆盖了 AI SDK UI 消息协议的全部 part 类型text普通文本part.state streaming时显示打字光标reasoning推理过程文本用details折叠展示tool-*工具调用通过isToolUIPart类型守卫判断展示工具名、状态、输入与输出 JSONdata-*自定义数据 part通过part.type.startsWith(data-)判断file / source-url / source-document文件与引用来源展示。组件同时提供了停止生成chat.stop()、等待状态chat.status submitted与错误状态的处理构成一个完整的生产级聊天界面骨架。模式二文本补全Completioncompletion.component.ts 演示单次文本生成使用Completion类public completion new Completion({ api: /api/completion, streamProtocol: text, // 使用纯文本流协议 onFinish: (prompt, completion) { console.log(Completed:, { prompt, completion }); }, });关键点在于streamProtocol: text服务端返回的是纯文本流text stream而非完整的 UI 消息协议前端通过completion.complete(input)触发生成completion.loading控制按钮状态completion.stop()中断生成结果以pre原样展示。模式三结构化对象生成StructuredObjectstructured-object.component.ts 演示输入一段内容、输出结构化 JSON的场景。首先用 Zod 定义输出 schemaconst schema z.object({ title: z.string(), summary: z.string(), tags: z.array(z.string()), sentiment: z.enum([positive, negative, neutral]), });再交给StructuredObjectstructuredObject new StructuredObject({ api: /api/analyze, schema, onFinish: ({ object, error }) { if (error) { console.error(Schema validation failed:, error); } else { console.log(Generated object:, object); } }, });提交后structuredObject.object即持有校验通过的强类型对象模板中直接绑定object.title、object.tags.join(, )等字段。onFinish回调中error非空即代表 schema 校验失败这保证了前端拿到的永远是合法结构。服务端实现一条流式响应管线串起三种能力所有前端请求最终都汇聚到 server.ts。这段代码是 AI SDK 服务端用法的浓缩示例值得逐行拆解。统一的请求入口streamText UIMessageStream/api/chat端点是最复杂的app.post(/api/chat, async (req: Request, res: Response) { const { messages, selectedModel } req.body; const modelId typeof selectedModel string selectedModel.length 0 ? selectedModel : defaultModel; const result streamText({ model: modelId, messages: await convertToModelMessages(messages ?? []), stopWhen: isStepCount(5), providerOptions: { openai: { reasoningEffort: low, reasoningSummary: detailed, } satisfies OpenAILanguageModelResponsesOptions, }, tools: { getWeatherInformation: { description: Get the weather in a given city., inputSchema: z.object({ city: z.string() }), execute: async ({ city }: { city: string }) { // 模拟天气查询随机返回一种天气状况 const conditions [sunny, cloudy, rainy, snowy, windy]; return ${city}: ${conditions[Math.floor(Math.random() * conditions.length)]}; }, }, }, }); pipeUIMessageStreamToResponse({ response: res, stream: toUIMessageStream({ stream: result.stream, sendReasoning: true, onError: error error instanceof Error ? error.message : String(error), }), }); });几个值得注意的实现细节模型解析selectedModel支持从请求体动态传入空值时回退到defaultModelopenai/gpt-5.6历史消息转换convertToModelMessages将前端 UI 消息协议转换为模型可消费的消息格式这是前后端协议解耦的关键多步推理上限stopWhen: isStepCount(5)限制 agent 最多执行 5 步工具循环防止无限调用推理流透传toUIMessageStream开启sendReasoning: true配合 providerOptions 中的reasoningEffort: low与reasoningSummary: detailed将模型的推理过程一并流式下发仅支持推理的模型生效服务端工具getWeatherInformation是一个服务端执行的 fake tool输入用 Zod schema 约束执行函数模拟 500ms 延迟后随机返回天气前端通过isToolUIPart识别并渲染调用过程响应管线toUIMessageStream将result.stream包装为 UI 消息流再由pipeUIMessageStreamToResponse直接写入 HTTP 响应——全程流式前端逐 token 渲染。补全与结构化对象的精简管线/api/completion与/api/analyze则使用更轻量的纯文本流管线// 补全直接以 prompt 生成文本 const result streamText({ model: defaultModel, prompt }); pipeTextStreamToResponse({ response: res, stream: toTextStream({ stream: result.stream }), }); // 结构化对象用 Output.object 约束输出 const result streamText({ model: defaultModel, output: Output.object({ schema: z.object({ title: z.string(), summary: z.string(), tags: z.array(z.string()), sentiment: z.enum([positive, negative, neutral]), }), }), prompt: Analyze this content: ${prompt}, });注意两个细节Output.object是服务端的结构化输出机制它保证模型输出满足 schema而前端的StructuredObject类同样持有 schema形成前后端双重校验server.ts 使用了express.json({ strict: false })其注释说明这是为了允许/api/analyze接收 JSON 原始值如纯字符串作为请求体——服务端会先把请求体序列化为prompt再交给模型。前后端代理与模型选择Angular 开发服务器默认不跨域proxy.conf.json 将/api前缀的请求代理到 Express 后端{ /api: { target: http://localhost:3000, secure: false, changeOrigin: true } }因此前端组件中的api: /api/completion等相对路径可以直接命中后端端口 3000无需处理 CORS。关于模型选择原文档的说明在此补全为完整结论默认模型定义在 server.ts 的defaultModel openai/gpt-5.6同时前端 chat.component.ts 的sendMessage也硬编码了selectedModel: openai/gpt-5.6动态切换修改chat.component.ts中的selectedModel参数即可切换模型模型 ID 格式使用 AI Gateway 模型 ID例如openai/gpt-5.4、openai/gpt-5.6格式为provider/model-name。从示例到生产可借鉴的工程要点综合整个 examples/angular 目录这个示例虽然小巧但浓缩了 Angular AI SDK 应用的关键工程决策zoneless 变更检测AI 流式场景高频更新 UIprovideZonelessChangeDetection()app.config.ts避免 Zone.js 带来的性能开销是 Angular 20 下的推荐做法协议分层前端消费 UI 消息协议toUIMessageStream后端内部使用模型消息convertToModelMessages两层协议由ai包自动转换业务代码无需关心格式细节类型安全贯穿前后端工具输入用 Zod、结构化输出用Output.object Zod、前端渲染用isToolUIPart类型守卫整个工具调用与对象生成链路全程有类型保障agent 循环可控stopWhen: isStepCount(5)明确限制了多步工具调用的上限避免失控循环一应用三模式同一份 Express 后端同时服务聊天、补全、结构化对象三种场景展示了streamText一条 API 的三种用法messages/prompt/output参数组合。源码速查应用入口与 Tab 容器app.component.ts、app.config.ts聊天组件chat.component.ts、chat.component.html补全组件completion.component.ts结构化对象组件structured-object.component.ts服务端实现server.ts构建与依赖package.json、angular.json开发代理配置proxy.conf.json【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
