MateChat 進階實戰：打造零後端、隱私安全的“端側記憶”智能體詳情 - 數據,API,UI,Vue.js,前端開發小雨青年博客

前言：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>

四、效果演示：零後端的個性化體驗

通過上述代碼，我們實現了一個神奇的閉環：

初次配置：

用户在左側 MemoryPanel 輸入名字 "Tony"，角色選 "UI 設計師"。
無需點擊保存，watch 自動將其寫入 LocalStorage。

即時反饋：

右側聊天框的快捷指令立即變為 “我是 UI 設計師，有什麼新工具？”。
發送該指令後，AI 會回覆：“Tony 你好，作為設計師，推薦你試試 Figma 的最新 AI 插件...” —— 它真的“記住”了你。

持久化驗證：

按下 F5 刷新頁面。
頁面重載後，你的 API Key、你的角色配置、你的偏好話題依然存在。AI 依然能叫出你的名字。

MateChat 進階實戰：打造零後端、隱私安全的“端側記憶”智能體_數據

五、總結與展望：把控制權還給用户

本方案最大的價值在於隱私安全與極低成本。

數據主權：所有的記憶數據都存儲在用户的 localStorage 中。用户可以隨時打開控制枱查看，或者點擊“清除記憶”一鍵重置。
零後端：不需要 Redis，不需要向量庫，甚至不需要後端服務器。只要有一個靜態頁面服務器（如 Vercel/Github Pages），你就能發佈一個高度個性化的 AI 應用。

藉助 MateChat 強大的原子組件生態和 Vue 的響應式機制，我們僅用幾百行代碼，就構建了一個“端側垂直領域模型”的雛形。這為未來的 AI 應用開發提供了一種全新的、去中心化的思路。

附官網鏈接：

DevUI

MateChat - 輕鬆構建你的AI應用

小雨青年博客

小雨青年博客

博客 / 詳情