MateChat 进阶实战：打造零后端、隐私安全的“端侧记忆”智能体

目录

[前言：AI 为什么总是"失忆"？](#前言：AI 为什么总是“失忆”？)

[一、 架构设计：轻量级"双层记忆"模型](#一、 架构设计：轻量级“双层记忆”模型)

[二、 核心实现：封装记忆与引擎](#二、 核心实现：封装记忆与引擎)

[三、 深度集成：让 MateChat "感知"记忆](#三、 深度集成：让 MateChat “感知”记忆)

[四、 效果演示：零后端的个性化体验](#四、 效果演示：零后端的个性化体验)

[五、 总结与展望：把控制权还给用户](#五、 总结与展望：把控制权还给用户)

前言：AI 为什么总是"失忆"？

AI 智能体的"记忆"能力通常意味着昂贵的向量数据库（Vector DB）和复杂的后端架构（Redis/Postgres）。但在构建轻量级垂直应用时，我们常遇到这样的尴尬：

• 重复配置 ：用户每天打开助手，都要重新输入一遍"我是产品经理，帮我写周报"。
• 隐私顾虑 ：企业用户担心："我的偏好数据会被传到云端吗？由于合规要求，我不敢用。"
• 部署成本 ：为了存几个用户配置，还得专门维护一个后端服务？

我们能否换个思路？

如果我们利用浏览器原生的 LocalStorage，将"记忆"的责任从云端下放到客户端，是否就能构建一个既懂你、又安全、且零成本的智能体？

本文将演示如何基于 华为云 DevUI MateChat 组件库，配合 Vue Composables 设计模式，在 100% 纯前端环境下，实现一个具备"长期偏好记忆"与"短期上下文理解"的个性化助手。

🛠️ 代码获取：本文 Demo 完整代码详见 https://gitcode.com/kaminono/MateChatMemoryAgent

🚀 在线体验：立即体验"懂你"的 AI https://mate-chat-memory-agent.vercel.app/

一、 架构设计：轻量级"双层记忆"模型

为了让 AI 既有"长期个性"，又有"短期逻辑"，我们采用 "数据本地化，智能服务端化" 的架构。数据存储在用户浏览器中，只有在发送请求的那一刻，才将必要的记忆注入 Prompt。

我们设计了双层存储结构：

|----------------|--------------|----------|-----------------------|--------------------------------|
| 记忆类型 | 存储介质 | 生命周期 | 关键用途 | 数据示例 |
| LTM (长期记忆) | localStorage | 永久 | 存储用户画像 (User Profile) | { role: "架构师", topic: "DDD" } |
| STM (短期记忆) | 内存 / ref | 会话级 | 维持多轮对话上下文 | ["User: 什么是聚合根?", "AI: ..."] |

二、 核心实现：封装记忆与引擎

为了保持代码的整洁，我们将逻辑拆分为两个核心 Hooks。

1、记忆中枢：useMemory.ts

这个 Composable 负责读写浏览器存储，并利用 Vue 的 computed 实时生成"记忆增强版"的 System Prompt。

// playground/src/memory-agent/composables/useMemory.tsexport function useMemory() {`
`  // 1. 响应式长期记忆const userProfile = ref({`
`    name: '',`
`    role: '全栈开发者',`
`    topic: '前端工程化',`
`    language: '中文'`
`  });`

`  // 2. 自动持久化 (Auto-Save)// 利用 watch 深度监听，一旦 UI 上修改了配置，立即写入 LocalStorage`
`  watch(userProfile, (newVal) => {`
`    localStorage.setItem('matechat_ltm_profile', JSON.stringify(newVal));`
`  }, { deep: true });`

`  // 3. 核心：生成注入 Prompt// 在发送请求前，将这些"人设"动态拼接成 System Messageconst memorySystemPrompt = computed(() => ``
`    You are a personalized AI assistant.`
`    === USER PROFILE ===`
`    - Role: ${userProfile.value.role}`
`    - Interest: ${userProfile.value.topic}`
`    - Language: ${userProfile.value.language}`
`    === INSTRUCTIONS ===`
`    Tailor your answer to the user's role.`
`  `);`

`  return { userProfile, memorySystemPrompt };`
`}`
`

2、智能引擎： useAgentEngine.ts

这是智能体的心脏。它负责调用真实的 LLM API（如 DeepSeek/OpenAI），处理流式响应或 JSON 数据，并管理消息上屏。

// playground/src/memory-agent/composables/useAgentEngine.tsexport function useAgentEngine() {`
`  const { userProfile, memorySystemPrompt } = useMemory();`

`  const handleSend = async (content: string) => {`
`    // 1. 读取配置面板中的 API Keyconst apiKey = localStorage.getItem('matechat_api_key');`
`    if (!apiKey) return alert('请先配置 API Key');`

`    // 2. 构造请求：将"记忆 Prompt"作为 System 角色发送const payload = {`
`      model: 'deepseek-chat',`
`      messages: [`
`        { role: 'system', content: memorySystemPrompt.value }, // 注入记忆`
`        { role: 'user', content: content }`
`      ]`
`    };`

`    // 3. 调用真实接口const res = await fetch('https://api.deepseek.com/chat/completions', { ... });`
`    // ... 处理响应并上屏`
`  };`
`}`
`

三、 深度集成：让 MateChat "感知"记忆

有了数据逻辑，我们需要通过 UI 让用户感知到 AI 是"活"的。我们利用 MateChat 的原子组件重构了布局。

1、动态快捷指令 (Computed Prompts)

最直观的"懂你"，就是 AI 猜到你想问什么。在 App.vue 中，我们通过计算属性，根据 userProfile 实时改变界面上的 Prompt：

// App.vueconst dynamicPrompts = computed(() => [`
`  { `
`    // 如果你在记忆面板把角色改成"产品经理"，这里会自动变label: `我是 ${userProfile.value.role}，有什么新工具？`, `
`    value: `作为一名 ${userProfile.value.role}，请推荐一些适合我的新工具。` `
`  },`
`  { `
`    label: `聊聊 ${userProfile.value.topic}`, `
`    value: `我想了解更多关于 ${userProfile.value.topic} 的内容。` `
`  }`
`]);`
`

2、原子化布局 (Atomic Layout)

为了解决传统聊天组件在复杂布局下的高度塌陷问题，我们放弃了单体的 <mate-chat>，转而使用 McLayout 家族组件进行原子化组装。

这种布局确保了"底部输入框"永远固定， "快捷指令"随时可见，且能完美适配左侧的 "记忆设置面板"。

        <!-- 3. 底部输入区 (包含 Prompt 和 Input) -->`
`        <McLayoutSender class="sender-override">`
`          <!-- 快捷指令条 (放在输入框上方) -->`
`          <div class="prompt-bar" v-if="!isThinking && messages.length < 10">`
`            <McPrompt :list="dynamicPrompts" @itemClick="onPromptClick" />`
`          </div>`

`          <!-- 输入框 -->`
`          <McInput`
`            :value="inputValue"`
`            placeholder="输入内容，我会记住你的偏好..."`
`            :maxLength="2000"`
`            @change="(v: string) => inputValue = v"`
`            @submit="onSubmit"`
`          />`
`        </McLayoutSender>`
`

四、 效果演示：零后端的个性化体验

通过上述代码，我们实现了一个神奇的闭环：

1. 初次配置 ：
   1. 用户在左侧 MemoryPanel 输入名字 "Tony"，角色选 "UI 设计师" 。
   2. 无需点击保存，watch 自动将其写入 LocalStorage。
2. 即时反馈 ：
   1. 右侧聊天框的快捷指令立即变为 "我是 UI 设计师，有什么新工具？" 。
   2. 发送该指令后，AI 会回复："Tony 你好，作为设计师，推荐你试试 Figma 的最新 AI 插件..." ------ 它真的"记住"了你。
3. 持久化验证 ：
   1. 按下 F5 刷新页面 。
   2. 页面重载后，你的 API Key、你的角色配置、你的偏好话题依然存在 。AI 依然能叫出你的名字。

五、 总结与展望：把控制权还给用户

本方案最大的价值在于隐私安全 与极低成本 。

• 数据主权 ：所有的记忆数据都存储在用户的 localStorage 中。用户可以随时打开控制台查看，或者点击"清除记忆"一键重置。
• 零后端 ：不需要 Redis，不需要向量库，甚至不需要后端服务器。只要有一个静态页面服务器（如 Vercel/Github Pages），你就能发布一个高度个性化的 AI 应用。

借助 MateChat 强大的原子组件生态和 Vue 的响应式机制，我们仅用几百行代码，就构建了一个"端侧垂直领域模型"的雏形。这为未来的 AI 应用开发提供了一种全新的、去中心化的思路。

附官网链接：

DevUI

MateChat - 轻松构建你的AI应用