用 Vista.js 打造你的第一个 AI Agent：多模型、工具调用与会话记忆完整教程

用 Vista.js 打造你的第一个 AI Agent多模型、工具调用与会话记忆完整教程【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vistaVista.js 是一个面向现代 Web 的全栈框架其内置的AI Agent 能力vista/ai模块让你无需引入任何第三方 Agent SDK就能快速构建支持多模型切换、工具调用与会话记忆的智能体。本文面向新手用最简单的路径带你从零跑通第一个 AI Agent并理解它背后的每一步机制。一、Vista.js AI Agent 是什么为什么值得用Vista.js 的 Agent 能力直接内置在核心包里入口是 packages/vista/src/ai/ 目录。它把构建一个能干活的 AI所需的三块拼图一次性给你多模型接入一行字符串即可切换 OpenAI、Anthropic、Gemini、Ollama 等供应商工具调用Tool Calling让 Agent 执行查天气、搜知识库、调接口等真实操作会话记忆Memory同一用户的多轮对话自动记得上文官方文档对这部分有清晰说明建议常备packages/vista/docs/ai.md。二、多模型支持用一行字符串切换大模型创建 Agent 时model字段采用供应商:模型名的格式解析逻辑位于 packages/vista/src/ai/providers/base.ts常见写法如下模型字符串供应商需要的环境变量openai:gpt-4oOpenAIOPENAI_API_KEYanthropic:claude-3-5-sonnetAnthropicANTHROPIC_API_KEYgemini:gemini-1.5-flashGoogle GeminiGEMINI_API_KEYollama:llama3本地 Ollama无需 API Keygroq:llama-3.1-8b-instantGroqGROQ_API_KEYmock:echo内置模拟模型无需任何 Key两个新手友好的小技巧省略供应商前缀也没关系框架会根据gpt-、claude-、gemini-等前缀自动猜测供应商。没有 API Key 也能开发用mock:echo或自定义的模拟模型即可完整调试 Agent 流程正式环境再换成真实模型。官方 RAG 演示就是这种思路参见 apps/vista-rag-demo/lib/rag-agent.ts。三、创建你的第一个 AI Agentagent() 函数全解调用agent()函数即可创建一个 Agent 实例核心逻辑在 packages/vista/src/ai/agent.ts。它接收一个配置对象最常用的选项如下选项说明nameAgent 名称必填model模型字符串如openai:gpt-4osystemPrompt系统提示词定义 Agent 的角色与行为规范tools工具列表赋予 Agent 执行动作的能力memory设为true即启用内置会话记忆maxSteps单次运行的最大推理步数默认 5一个最小的客服 Agent 配置示例官方文档中的同款写法import { agent, tool } from vista/ai; export const supportAgent agent({ name: support, model: openai:gpt-4o, systemPrompt: You are a helpful AI assistant for support., tools: [ tool({ name: ping, description: Check agent connectivity, execute: async () ({ status: ok }), }), ], memory: true, }); 提示框架还提供了vista g agent support命令可以自动生成 Agent 模块文件省去手动搭建结构的麻烦。四、给 Agent 装上手和脚工具调用机制工具调用是让 AI 从只会聊天变成能办事的关键。通过tool()函数定义工具见 packages/vista/src/ai/tool.ts只需提供四样东西name工具名例如search_knowledge_basedescription给模型看的用途说明写得越清楚模型调用得越准parametersJSON Schema 描述入参可省略execute真正执行任务的函数支持返回 Promise工具调用的运行循环当 Agent 运行时框架会自动完成这套循环实现在 agent.ts 的 run 方法第 1 步模型判断需要查资料 → 发出tool-call第 2 步框架执行对应工具把结果作为tool消息写回对话第 3 步模型基于工具结果继续推理直到给出最终答案每一步都会被maxSteps上限保护防止无限循环执行失败也不会中断而是把错误信息反馈给模型让它自行纠正。更妙的是.asTool()方法agent.ts可以把一个 Agent 整体包装成另一个 Agent 的工具轻松实现多 Agent 协作。五、会话记忆让 Agent 记住我们聊过什么把memory设为true框架就会使用内置的InMemoryStore见 packages/vista/src/ai/memory.ts。你只需在每次请求中传入同一个sessionIdAgent 就会自动按sessionId读取历史对话拼接进本轮上下文本轮结束后自动保存最新对话历史默认每个会话最多保留100 条消息也支持设置ttlMs让会话过期自动清理。这套机制让你用极低的成本获得多轮对话体验无需自己手写状态管理。六、流式输出 React 组件把 Agent 接入前端真实产品里用户希望边生成边看到。Vista.js 把这条链路也做好了服务端调用agent.stream()再用toDataStreamResponse()把流式结果转成标准 SSE 响应stream.ts直接 return 给 API 路由即可前端使用vista/ai/react导出的useAgentHookuse-agent.ts一次性获得messages、input、handleSubmit、isLoading、stop中途停止、reload重新生成等状态与方法解析 SSE、更新界面这些脏活全由它代劳完整的前端示例可以参考官方 RAG 演示应用的聊天组件apps/vista-rag-demo/app/ai-playground/chat-box.tsx。七、完整案例一个无需 API Key 的 RAG 知识库助手仓库自带的 apps/vista-rag-demo/ 是一个开箱即演示的完整样例值得逐行读一读lib/rag-agent.ts用agent()组装 Agent挂上搜索知识库工具maxSteps: 4lib/rag-knowledge.ts内置演示用文档数据app/api/rag-chat/流式 API 路由app/ai-playground/带流式渲染的聊天页面它完美展示了本文讲到的全部要素多模型用自定义 mock 模型 工具调用检索知识库 流式输出是新手理解 Agent 全流程的最佳参照。八、快速上手清单 ✅在配置model前先确认对应的环境变量API Key已设置用mock:echo或 Ollama 本地模型先跑通流程再切到付费模型工具description写得越清晰模型调用越准确需要多轮对话时开启memory: true并固定sessionId前端统一使用useAgentHook避免手搓 SSE 解析至此你已经掌握了用 Vista.js 构建 AI Agent 的核心三板斧——多模型、工具调用、会话记忆。从官方文档 packages/vista/docs/ai.md 出发再参考 RAG 演示应用你的第一个生产级 AI Agent 很快就能上线。✨【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vista创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考