哎呀，今天咱们聊点儿轻松的——怎么用 Vue 搞一个简易的 Agent 问答系统。

先说实话，这玩意儿听起来高大上，其实也不算难。

你只要把几个关键库装好，写点儿代码，配点儿 API 密钥，就Neng让前端小伙伴们跟 AI 聊得飞起。

项目背景：为什么要搞个 Agent？

现在大模型火得不行，hen多业务dou想借助它来Zuo客服、智Neng助理之类的。

但直接把模型塞进前端，那是要命的事儿——响应慢、费用高，还容易泄露密钥。

所以我们把模型放在后端，用前端来调度、显示、记忆对话，这样既安全又省心。

咱们这套方案，就是把 Vue 当作 UI 层，后端跑一个轻量级的 Agent，把大模型当脑子，记忆当心脏，工具调用当手脚。

核心依赖：装啥包Zui关键？

说真的，你只需要三包：

npm install @langchain/core @langchain/langgraph @langchain/openai

@langchain/core 是底层基座，负责消息结构、链式调用之类的。

@langchain/langgraph 用来组织工作流，让你的 Agent Neng够顺序执行或并行跑多个工具。

@langchain/openai 则是和 OpenAI打交道的适配层。

环境变量：别忘了这些小细节

TITLE=聊天机器人
VITE_API_KEY=你的ApiKey
VITE_AI_MODEL=模型名称
VITE_AI_BASE_URL=你的API地址   # 这里填入对应的大模型接口地址
# 高德地图配置
VITE_AMAP_KEY=你的高德地图APIKey

记得把上面的占位符换成真实值，不然跑不起来呀。

TS 类型定义，让代码geng有“安全感”

export type ROLE = 'user' | 'assistant' | 'system';
interface IChat {
  id: string,
  name: string,
  messages: string,
  role: ROLE,
  created_at: Date
}
export type Chat = IChat;

创建 Agent：从 LLM 到 Prompt 再到 Chain

下面给你整段代码，你照搬基本就Neng跑通。

import type { Chat } from "@/types/chat";
import { AIMessage, HumanMessage } from "@langchain/core/messages";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { RunnableSequence } from "@langchain/core/runnables";
import { ChatOpenAI } from "@langchain/openai";
function createLLM {
  // 创建 LLM 实例
  const llm = new ChatOpenAI({
    model: import.meta.env.VITE_AI_MODEL,
    apiKey: import.meta.env.VITE_API_KEY,
    configuration: {
      baseURL: import.meta.env.VITE_AI_BASE_URL,
    },
    temperature: 0.7 // ai生成内容的丰富度，可自行调节
  });
  return llm;
}
function createPrompt {
  // Prompt 模板，把系统指令、历史记录和用户输入拼起来
  return ChatPromptTemplate.fromMessages(,   // 系统角色设定
    ,                // 对话记忆占位符
                                   // 用户本轮输入
  ]);
}
function createChain {
  const llm = createLLM;
  const prompt = createPrompt;
  // 把 Prompt 和 LLM 串成一条流水线
  return RunnableSequence.from;
}
export default async function chat(
  input: string,
  onChat:  => void,
  messages: Chat = 
) {
  const allMessages: Array = ;
  // 把历史对话转成 LangChain Neng识别的 Message 对象
  for  {
    if  {
      allMessages.push);
    } else if  {
      allMessages.push);
    }
  }
  // 加上本次用户输入
  allMessages.push);
  const chain = createChain;
  const res = await chain.invoke({
    chat_history: allMessages,
    input: input,
});
onChat || '');
}

页面组件：Vue 那边怎么写？

小技巧：让记忆geng持久

默认情况下我们只保留当前会话的短期记忆，要想让 AI “记住”用户之前的偏好，Ke以把历史记录持久化到 localStorage 或后端数据库，然后在初始化时读取进去。

工具调用示例：天气查询、IP 定位等

Ru果你想让 Agent Neng够主动去查天气或者定位 IP，只需要在 LangChain 的 graph 中挂一个自定义 tool，然后在 Prompt 裏写明“Ru果用户问天气，请调用天气工具”。这样 LLM 就会自行决定是否触发工具调用啦。

常见坑点 & 调试经验

- 密钥泄露：千万别把 API Key 写进前端代码里。Zui好走后端代理或者使用 Vite 的环境变量注入方式。

- CORS 问题：有些大模型接口没有跨域头，需要你自己部署一个小代理转发请求。

- 温度参数：温度太高会导致答案胡言乱语，太低又显得死板。一般取值在 0.6‑0.9 之间比较稳妥。

- 上下文长度：LLaMA 系列模型Zui多只Neng接受约 4k Token。Ru果聊天记录太长，需要Zuo截断或摘要处理，否则会报错。

性Neng优化建议

a）PWA 缓存：把静态资源缓存到 Service Worker，让离线时还Neng查kan历史对话。哈哈，这种感觉像是给聊天机器人装了个背包！

b）SSE：If you want streaming responses so user sees partial answer while model is thinking – use Server‑Sent Events on backend and Vue’s EventSource 来实时渲染。说实话，这体验比一次性返回好太多了。

# 小结一下吧

整个流程其实就四步：

#1 安装依赖

#2 配置环境变量

#3 编写 Agent 链路

#4 在 Vue 页面调起聊天

Ehh，你kan完了吧？其实动手敲几遍代码就熟悉了。别怕出错，多打开 console kan日志，哪里报错哪里改，一步步调通才是王道。

A/B 测试思路：提升交互质量的小技巧

- 改变系统提示词，例如加入“请用简短口语化回答”。观察用户满意度变化。

- 调整 temperature 参数，kan回答是否geng具创意或geng精准。

# Zui后再唠叨一句：

Coding 本身就是一场对话——你跟代码交流，它跟大模型交流，又跟用户交流。搞清楚每一环的职责，你就Neng像老友一样自然地把这个 Agent 系统搭起来啦！祝你玩得开心~ 哈哈 🚀.

---