前言：當“複雜”遇上“合規”
如果我們打開手機裏的銀行 App，第一感覺往往是“功能太強大，但菜單也太深了”。想查個去年的年度賬單，或者看一眼理財收益分佈，往往需要點擊四五次跳轉才能找到入口。
在金融領域，我們一直渴望用 AI 對話來簡化這些操作。但擺在面前有一座大山，那就是數據安全與合規。我們絕不敢輕易把用户的資產數據發送給公有的通用大模型，這導致了很多金融 App 的智能助手依然停留在“關鍵詞回覆”的智障階段。
今天，我們換一種思路。利用 華為雲 DevUI MateChat 的組件化能力，我們能不能在前端構建一個“安全沙箱”？
在這個沙箱裏，敏感數據的處理邏輯完全運行在本地或受信的私有接口中，MateChat 只負責做最擅長的事——展示專業的金融圖表和交互卡片。這樣既保證了體驗的智能化，又守住了合規的底線。
為了驗證這個想法，我開發了 MateChat Bank Advisor。這是一個模擬私人銀行助理的開源項目，大家可以去 GitCode 倉庫AtomGit | GitCode - 全球開發者的開源社區,開源代碼託管平台看看代碼，或者直接點擊 https://mate-chat-bank-advisor.vercel.app/ 體驗一下“查賬只需一句話”。
一、技術選型：為什麼是 DevUI + MateChat？
在金融場景做技術選型，“合規”“安全”“專業” 是三大核心訴求，而 DevUI 與 MateChat 的組合恰好精準匹配這些需求。
華為雲 DevUI：金融級組件的可靠底座
在金融場景中，我們不需要一個臃腫的全家桶，而需要一個能完美處理“對話交互”的專用容器，同時允許我們靈活地嵌入自定義的業務邏輯。MateChat 正是為此而生。
MateChat：輕量級、高擴展的 AI 交互基座 與傳統的聊天機器人平台不同，MateChat 是一個純粹的前端組件庫。它不提供預製的業務組件（如表格、表單），而是專注於把 “AI 對話” 這一件事做到極致，通過高度的開放性來適配複雜的金融需求：
- 開箱即用的 AI 核心組件： MateChat 提供了構建現代化 Chatbot 所需的所有基礎原子組件——包括智能輸入框（Input）、消息氣泡（Message）、對話流容器（Chat）等。開發者無需手寫複雜的 CSS 佈局或處理滾動條邏輯，引入即可獲得類似 ChatGPT 的流暢對話體驗。
- “容器化”的插槽機制（Slot）： 這是 MateChat 解決金融複雜展示的核心能力。它不僅支持文本渲染，更提供了一個開放的內容插槽。 這意味着，你可以將自己開發的“資產餅圖”、“轉賬確認單”或“流水列表”（無論是基於原生 HTML 還是其他圖表庫）直接“不僅是”嵌入到對話流中。MateChat 負責交互框架，你負責業務內容，兩者完美解耦。
- 純前端的數據安全閉環： 作為一款 UI 組件庫，MateChat 不內置任何後端 API 調用。所有的意圖識別、數據獲取邏輯完全由開發者在本地 JavaScript 中控制。這種“零黑盒”的設計，天然符合銀行對“數據不出域”的嚴苛合規要求。
正是這種“基礎組件 + 開放插槽”的架構，讓我們能在不引入外部風險的前提下，在前端構建出一個既懂金融業務、又具備現代化交互體驗的私人銀行助理
項目搭建：用 MateChat CLI 快速啓動應用
MateChat 提供的 CLI 工具可以大幅簡化搭建流程。
可通過如下命令創建一個應用：
// npm
npm create matechat@latest
// pnpm
pnpm create matechat@latest
這一指令會安裝並執行create-matechat，你將會看到一些創建提示：
Please input the project name: matechat-project
Please select the template: Vue Starter
之後我們只要進入項目，即可快速啓動項目。
cd <your-project-name>
npm i
npm run dev
二、 場景痛點：我們要解決什麼？
在金融場景下，用户的核心訴求其實非常明確：高效查詢和安全交易。
傳統的圖形界面（GUI）在面對海量金融功能時顯得力不從心。用户想知道“上個月在餐飲上花了多少錢”，在傳統 App 裏可能需要導出 Excel 自己算。
而對於 AI 交互來説，最大的挑戰在於輸出的專業度。普通的聊天氣泡根本無法承載複雜的 K 線圖、基金淨值走勢或者密密麻麻的交易流水。
我們需要的是一個“懂金融的 UI”。它不僅要能聽懂“轉賬給張三”，還要能瞬間彈出一個包含收款人校驗、金額確認的專業卡片，而不是輕飄飄地回一句“好的”。這正是 MateChat 作為一個企業級交互容器的價值所在。
三、 架構設計：構建前端“安全沙箱”
為了滿足金融級的合規要求，我們在架構設計上極其剋制。我們沒有引入任何不可控的外部 AI 服務，而是採用了一套“本地意圖識別 + 組件化渲染”的方案。
在邏輯層，我們封裝了一個 useBankMock.ts 鈎子。它扮演了“端側大腦”的角色，負責在本地解析用户的自然語言指令。
請看這段核心代碼，我們是如何在不聯網的情況下，精準識別用户意圖並返回結構化數據的：
// playground/src/bank-advisor/composables/useBankMock.tsconst processQuery = async (text: string) => {
// 模擬“風控系統”的校驗延遲await new Promise(r => setTimeout(r, 800));
// 本地意圖識別：數據不出域，絕對安全if (text.includes('資產') || text.includes('餘額')) {
return {
type: 'asset_card', // 指示前端渲染資產卡片data: assets, // 敏感數據直接從本地/私有接口獲取reply: '為您查詢到當前資產全景如下：'
};
}
if (text.includes('轉賬')) {
// 自動提取金額，準備進入交易流程const amount = text.match(/(\d+)/)?.[1] || '0';
return {
type: 'transfer_confirm',
data: { amount, payee: '張三 (已校驗)' },
reply: '請確認轉賬信息，大額交易需二次驗證：'
};
}
// ...
};
這種設計確保了所有的意圖判斷和數據獲取都在可控範圍內，完美契合了金融場景對風控與集成邏輯的嚴苛要求。
四、 視覺呈現：讓數據“一目瞭然”
解決了安全問題，下一步是提升體驗。金融數據是枯燥的，但 MateChat 的插槽設計讓我們可以把數據變成漂亮的組件。
我們設計了一套高顏值的金融組件庫。當用户查詢資產時，我們不再發送文本，而是渲染一個 AssetPieChart。這個組件利用 SVG 或 ECharts，直觀地展示了存款、理財和基金的佔比。
而在查詢流水時，我們直接嵌入了 DevUI 的 Table 組件。大家可以看到，在 BankLayout.vue 中，我們是如何根據消息類型動態切換組件的：
<McLayoutContent class="chat-content"><template v-for="msg in messages" :key="msg.id"><div v-if="msg.type === 'asset_card'" class="card-msg"><McBubble :content="msg.content" /><div class="widget-container"><AssetPieChart :data="msg.data" /></div></div><div v-else-if="msg.type === 'transaction_table'" class="card-msg"><McBubble :content="msg.content" /><div class="widget-container"><TransactionTable :list="msg.data" /></div></div></template></McLayoutContent>
這種“對話 + 可視化”的組合，極大地降低了用户的認知負荷。用户不再需要在一堆數字中找重點，一眼就能看懂自己的財務狀況。
五、 落地成效與經驗沉澱
經過這一番改造，我們將原本冗長的銀行查詢流程壓縮到了極致。
從落地效果來看，用户查詢核心資產的步驟從平均 5 次點擊減少到了 1 次對話，交互效率提升了 400% 以上。同時，由於大量查詢請求被前端的意圖識別攔截，後端人工客服的諮詢壓力也得到了顯著緩解。
在經驗沉澱方面，我們探索出了一套適合金融場景的話術優化策略。AI 的回覆不再是冷冰冰的機器語言，而是帶有“風控意識”的專業顧問口吻。例如在涉及轉賬時，系統會自動追加“請核對收款人信息”的安全提示，這種細節的處理是金融應用落地的關鍵。
六、 總結
通過 MateChat Bank Advisor 這個項目，我們證明了：在金融這種強監管、高安全要求的領域，對話式交互並非 “不可行”，而是需要找對技術路徑。
DevUI 提供的金融級組件底座，解決了 “專業展示與安全合規” 的基礎需求；MateChat 提供的組件化交互容器，解決了 “本地邏輯閉環與可視化交互” 的核心痛點。兩者協同，讓 “數據不出域” 的安全沙箱成為現實，也讓金融服務從 “功能導向” 升級為 “用户體驗導向”。
這不僅是一次技術實踐，更是對未來金融服務形態的探索 —— 當 AI 交互不再依賴外部大模型，而是深度融合本地業務邏輯與專業組件，就能在守住合規底線的同時，為用户提供真正高效、便捷的服務。
我們不需要把所有數據都餵給大模型，通過“前端組件化”和“本地邏輯閉環”的架構，我們一樣能做出既聰明又安全的私人銀行助理。
這不僅是一次技術的嘗試，更是對未來金融服務形態的一種探索。
如果您也是金融科技領域的開發者，歡迎來 GitCode 關注這個項目（AtomGit | GitCode - 全球開發者的開源社區,開源代碼託管平台），一起探索 “AI + 金融” 的更多可能性。
附官網地址：
DevUI
MateChat - 輕鬆構建你的AI應用
MateChat | MateChat - 輕鬆構建你的AI應用