vue-ai-apps 是一个 Vue AI Apps Workflow 技能，用于构建 LLM 和智能体功能的 Vue/Nuxt 前端，依托 Vercel AI SDK。该技能聚焦 Vue 侧的集成；模型层（streamText、tool、provider）仅以形状（shape）呈现，需遵循 AI SDK 文档获取当前核心 API，因为核心 API 在小版本之间会发生变动。
该技能假定已具备 vue-best-practices 中的基础（组合式 API、<script setup lang="ts">、组合函数）。组件结构与响应式相关内容需加载该基础技能。
核心原则：
- 密钥绝不进入客户端。Provider API 密钥存放在服务端。浏览器与你的端点通信，绝不直接与模型提供商通信。
- 服务端流式输出，客户端消费。服务端路由运行 streamText/streamObject 并返回流；Vue 组件增量渲染它。绝不阻塞等待完整响应。
- 渲染消息的部分（parts），而非内容字符串。AI SDK 的消息是 UIMessage[]，由带类型的 parts（文本、工具调用、推理）组成。迭代 message.parts。
- 由状态（status）而非布尔值驱动 UI。禁用输入、加载指示器和停止按钮都依据 status 状态机。
使用步骤：
-
确认技术栈（必需）。包：ai（核心）、@ai-sdk/vue（组合函数）、一个 provider（@ai-sdk/openai、@ai-sdk/anthropic 等）、用于工具/对象模式（schema）的 zod。来自 @ai-sdk/vue 的 useChat 可对接任何流式后端。此处的服务端片段使用 Nuxt/Nitro（defineEventHandler、readBody）；对于非 Nuxt 后端，在自己的路由处理器中保留同样的 AI SDK 调用。该技能面向 v5+ API，已针对 ai@7 / @ai-sdk/vue@4 验证：消息带有 parts；该 hook 不管理输入；status 为 'submitted' | 'streaming' | 'ready' | 'error'；工具模式使用 inputSchema；useObject 导出为 experimental_useObject。v5 之前的 API（ai@4：message.content、hook 管理的输入、isLoading、parameters）不同，需先检查已安装版本。
-
构建流式聊天 UI（聊天功能必需）。参考：streaming-chat-ui。服务端路由使用 streamText + toUIMessageStreamResponse() 进行流式输出。客户端：useChat() 返回 Vue 的 ref。自行管理自己的输入 ref；调用 sendMessage({ text })。渲染 message.parts。
-
仅在功能需要时添加能力。工具调用（智能体动作、函数调用）→ tool-calling；结构化输出（流式返回带类型的对象，而非聊天）→ structured-output。
-
处理中止与错误（上线前必需）。参考：error-handling-and-abort。接入 stop()、error ref 和 onError。没有中止路径的流式 UI 不算完成。
-
最终自检。Provider 密钥仅服务端持有；客户端代码中无密钥或 provider 调用。组件渲染 message.parts，而非 message.content。当 status 为 submitted/streaming 时输入被禁用且显示停止按钮。错误展示给用户且可重试（clearError() + regenerate()）。工具/对象模式使用 zod 校验输入。核心 AI SDK 调用已对照已安装的 SDK 版本检查，而非假设。
适用场景：为 LLM 与智能体功能构建 Vue 3 / Nuxt 前端，特别是需要流式聊天界面、工具调用与结构化输出的项目。限制：模型层核心 API 未在本技能中完整展开，需参考 AI SDK 官方文档；依赖 vue-best-practices 的基础知识。