随着AI大模型技术的突破性发展，证券行业正经历从传统"人海战术"向"人机协同"的深刻转型。据IDC报告显示，2024年中国金融业对AI及生成式AI的投入规模达196.94亿元，预计到2027年将增长至415.48亿元。
然而，传统投顾服务效率低，标准化不高，个性化能力有限，如何基于金融领域数据构建安全可靠的智能投顾系统，成为证券行业数字化转型的关键课题。在这一背景下， MateChat 框架为证券智能投顾系统的快速构建提供了理想的解决方案。
本文将探索并实践基于 MateChat 框架的证券智能投顾技术方案，详细阐述其架构设计、训练流程和部署策略，为金融科技开发者提供一套可落地的技术解决方案。
一、架构解析
1.1、MateChat 框架概览
MateChat 是一款生成式人工智能体验设计系统，以及企业级前端解决方案。其基于OpenAI、Midjourney、Google、Claude等业界领先的AI大模型厂商提供的API，实现了一站式多模型AI应用。
它以Vue3和TypeScript为基础，结合了组件化设计理念，提供了如McBubble（消息气泡组件）、McLayout（对话布局容器）、McInput（输入组件）等一系列与对话交互相关的组件。不仅支持Markdown语法，还提供了代码高亮、复制、折叠等功能，极大地丰富了对话内容的表现形式。
此外，MateChat还具备主题定制能力，支持明暗色模式切换以及通过CSS变量进行扩展，满足不同用户对于界面风格的需求。这些特性使得MateChat在构建智能对话界面时具有高度的灵活性和可扩展性，为证券智能投顾系统的前端开发提供了有力支持。
1.2、证券智能投顾平台定位
构建证券智能投顾系统时，我们采用了分层架构设计，将整个系统分为数据层、服务层和应用层。数据层主要负责实时行情数据的接入、用户行为数据的收集、知识图谱的构建以及历史数据的存储，为系统提供丰富的数据支持。服务层则是整个系统的核心，集成了NLP语义理解、风险评估模型、投资组合优化以及合规风控引擎等功能模块，通过对数据层提供的数据进行分析和处理，生成智能投顾所需的各类服务。应用层则主要面向用户，提供了MateChat对话界面，实现了多轮对话管理、个性化推荐以及实时监控面板等功能，为用户提供了便捷、高效的智能投顾体验。
1.3、MateChat组件架构
在前端实现方面，MateChat的组件架构发挥了关键作用。通过McLayout组件，我们搭建了一个简洁、清晰的对话布局容器，为用户与系统之间的对话提供了一个良好的交互环境。McBubble组件则负责以气泡形式展示对话内容，使得对话信息更加直观易读。McInput组件为用户提供了一个便捷的输入框，支持用户输入各种形式的问题或指令。此外，McPrompt组件提供了快捷提示功能，帮助用户快速触发一些常用的操作或查询。而McMarkdownCard组件则能够将Markdown格式的内容进行渲染，使得系统回复的内容可以包含丰富的格式和排版效果，如图表、代码等，进一步提升了用户体验。这些组件相互配合，构建了一个功能强大且具有高度可定制性的智能投顾对话界面。
二、打造金融领域的专属大模型助手
2.1、环境准备
首先进入控制台，输入npm create vite@latest使用vite首先初始化一个vue+ts项目，选择Vue和JS：
然后输入：npm i vue-devui @matechat/core @devui-design/icons ，安装所需的依赖文件，这里要注意使用node 20.19+或者 22.12+的版本，否则无法使用vite。
然后，在main.ts文件中引入matechat, 图标库 样式文件
javascript
import { createApp } from 'vue';
import App from './App.vue';
import MateChat from '@matechat/core';
import '@devui-design/icons/icomoon/devui-icon.css';
createApp(App).use(MateChat).mount('#app');之后，就可以在任意文件中使用 MateChat 组件了，比如：
xml
<template>
<McLayout class="container">
<McHeader :title="'MateChat'" :logoImg="'https://matechat.gitcode.com/logo.svg'">
<template #operationArea>
<div class="operations">
<i class="icon-helping"></i>
</div>
</template>
</McHeader>
<McLayoutContent
v-if="startPage"
style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
>
<McIntroduction
:logoImg="'https://matechat.gitcode.com/logo2x.svg'"
:title="'MateChat'"
:subTitle="'Hi，欢迎使用 MateChat'"
:description="description"
></McIntroduction>
<McPrompt
:list="introPrompt.list"
:direction="introPrompt.direction"
class="intro-prompt"
@itemClick="onSubmit($event.label)"
></McPrompt>
</McLayoutContent>
<McLayoutContent class="content-container" v-else>
<template v-for="(msg, idx) in messages" :key="idx">
<McBubble
v-if="msg.from === 'user'"
:content="msg.content"
:align="'right'"
:avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }"
>
</McBubble>
<McBubble v-else :content="msg.content" :avatarConfig="{ imgSrc: 'https://matechat.gitcode.com/logo.svg' }" :loading="msg.loading"> </McBubble>
</template>
</McLayoutContent>
<div class="shortcut" style="display: flex; align-items: center; gap: 8px">
<McPrompt
v-if="!startPage"
:list="simplePrompt"
:direction="'horizontal'"
style="flex: 1"
@itemClick="onSubmit($event.label)"
></McPrompt>
<Button
style="margin-left: auto"
icon="add"
shape="circle"
title="新建对话"
size="md"
@click="newConversation"
/>
</div>
<McLayoutSender>
<McInput :value="inputValue" :maxLength="2000" @change="(e) => (inputValue = e)" @submit="onSubmit">
<template #extra>
<div class="input-foot-wrapper">
<div class="input-foot-left">
<span v-for="(item, index) in inputFootIcons" :key="index">
<i :class="item.icon"></i>
{{ item.text }}
</span>
<span class="input-foot-dividing-line"></span>
<span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
</div>
<div class="input-foot-right">
<Button icon="op-clearup" shape="round" :disabled="!inputValue" @click="inputValue = ''"><span class="demo-button-content">清空输入</span></Button>
</div>
</div>
</template>
</McInput>
</McLayoutSender>
</McLayout>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'vue-devui/button';
import 'vue-devui/button/style.css';
const description = [
'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。',
'作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。',
];
const introPrompt = {
direction: 'horizontal',
list: [
{
value: 'quickSort',
label: '帮我写一个快速排序',
iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
desc: '使用 js 实现一个快速排序',
},
{
value: 'helpMd',
label: '你可以帮我做些什么？',
iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
desc: '了解当前大模型可以帮你做的事',
},
{
value: 'bindProjectSpace',
label: '怎么绑定项目空间',
iconConfig: { name: 'icon-priority', color: '#3ac295' },
desc: '如何绑定云空间中的项目',
},
],
};
const simplePrompt = [
{
value: 'quickSort',
iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
label: '帮我写一个快速排序',
},
{
value: 'helpMd',
iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
label: '你可以帮我做些什么？',
},
];
const startPage = ref(true);
const inputValue = ref('');
const inputFootIcons = [
{ icon: 'icon-at', text: '智能体' },
{ icon: 'icon-standard', text: '词库' },
{ icon: 'icon-add', text: '附件' },
];
const messages = ref<any[]>([]);
const newConversation = () => {
startPage.value = true;
messages.value = [];
}
const onSubmit = (evt) => {
inputValue.value='';
startPage.value = false;
// 用户发送消息
messages.value.push({
from: 'user',
content: evt,
});
setTimeout(() => {
// 模型返回消息
messages.value.push({
from: 'model',
content: evt,
});
}, 200);
};
</script>
<style>
.container {
width: 1000px;
margin: 20px auto;
height: calc(100vh - 82px);
padding: 20px;
gap: 8px;
background: #fff;
border: 1px solid #ddd;
border-radius: 16px;
}
.content-container {
display: flex;
flex-direction: column;
gap: 8px;
overflow: auto;
}
.input-foot-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
margin-right: 8px;
.input-foot-left {
display: flex;
align-items: center;
gap: 8px;
span {
font-size: 14px;
line-height: 18px;
color: #252b3a;
cursor: pointer;
}
.input-foot-dividing-line {
width: 1px;
height: 14px;
background-color: #d7d8da;
}
.input-foot-maxlength {
font-size: 14px;
color: #71757f;
}
}
.input-foot-right {
.demo-button-content {
font-size: 14px;
}
& > *:not(:first-child) {
margin-left: 8px;
}
}
}
</style>显示出Hello，MateChat这样，即为安装成功：
2.2、对接DeepSeek API
首先要安装OpenAI支持，直接终端输入npm install openai安装依赖
然后需要对接API，这里我们以DeepSeek为例，DeepSeek API 使用与 OpenAI 兼容的 API 格式，首先，前往DeepSeek开发平台，创建API Key：
然后将代码中onSubmit方法替换成接入DeepSeek的代码：
ini
const client = ref<OpenAI>();
client.value = new OpenAI({
apiKey: '', // 模型APIKey
baseURL: '', // 模型API地址
dangerouslyAllowBrowser: true, // 浏览器环境使用需要开启
});
const onSubmit = (evt) => {
inputValue.value = '';
startPage.value = false;
// 用户发送消息
messages.value.push({
from: 'user',
content: evt,
avatarConfig: { name: 'user' },
});
fetchData(evt);
};
const fetchData = async (ques) => {
messages.value.push({
from: 'model',
content: '',
avatarConfig: { name: 'model' },
id: '',
loading: true,
});
const completion = await client.value!.chat.completions.create({
model: 'deepseek-reasoner', // 根据deepseek模型列表进行替换
messages: [{ role: 'user', content: ques }],
stream: true, // 为 true 则开启接口的流式返回
});
messages.value[messages.value.length - 1].loading = false;
for await (const chunk of completion) {
const content = chunk.choices[0]?.delta?.content || '';
const chatId = chunk.id;
messages.value[messages.value.length - 1].content += content;
messages.value[messages.value.length - 1].id = chatId;
}
};并且填入刚刚复制的API key，baseURL就填api.deepseek.com/v1即可成功调用dee...
2.3、开始改造
在完成基础API对接后，参考金融领域的特点，借鉴MateChat在智能对话和业务集成方面的设计理念，对金融助手进行全面的功能增强和业务逻辑优化：
首先针对金融领域构建对应的提示词，让模型在分析当前对话，能够自动根据金融话题类型（如股票分析、风险评估、财务规划），自动构建领域特定的提示词模板，提示词库如下：
css
// 提示词库
export const PROMPT_TEMPLATES: Record<FinancialTopic, FinancialPromptTemplate> = {
[FinancialTopic.STOCK_ANALYSIS]: {
topic: '股票分析',
template: `作为专业金融分析师，请对{stockName}进行全面的投资价值分析。
请按照以下框架进行分析：
1. 基本面分析：包括财务指标（市盈率、市净率、ROE等）、盈利能力、成长性
2. 技术面分析：价格走势、成交量、技术指标
3. 行业分析：行业地位、竞争格局、发展前景
4. 估值分析：合理估值区间、投资建议
要求：
- 提供具体数据支撑
- 分析要客观全面
- 给出明确的风险提示
- 建议要具有可操作性`,
requiredMetrics: ['市盈率', '市净率', 'ROE', '营收增长率', '净利润增长率'],
qualityCriteria: ['数据准确性', '分析深度', '风险提示', '可操作性']
},
[FinancialTopic.INVESTMENT_STRATEGY]: {
topic: '投资策略',
template: `作为专业投资顾问，请为{riskProfile}风险偏好的投资者制定投资策略。
投资目标：{investmentGoal}
投资期限：{timeHorizon}
请提供：
1. 资产配置建议（股票、债券、现金等比例）
2. 具体投资标的推荐
3. 风险管理措施
4. 定期调整策略
要求：
- 策略要符合风险偏好
- 提供历史回测数据
- 考虑市场环境因素
- 给出明确的执行步骤`,
requiredMetrics: ['预期收益率', '最大回撤', '夏普比率', '资产相关性'],
qualityCriteria: ['风险匹配度', '历史表现', '适应性', '执行可行性']
},
[FinancialTopic.RISK_ASSESSMENT]: {
topic: '风险评估',
template: `作为专业风险评估师，请对{investmentTarget}进行全面的风险评估。
评估维度：
1. 市场风险：价格波动、系统性风险
2. 信用风险：违约概率、信用评级
3. 流动性风险：变现能力、交易成本
4. 操作风险：管理风险、技术风险
要求：
- 使用量化风险评估方法
- 提供风险等级评分
- 给出风险控制建议
- 考虑极端市场情况`,
requiredMetrics: ['波动率', 'VAR值', '最大回撤', '信用评级'],
qualityCriteria: ['量化程度', '全面性', '实用性', '前瞻性']
},
[FinancialTopic.FINANCIAL_PLANNING]: {
topic: '财务规划',
template: `作为专业财务规划师，请为{clientProfile}制定个性化的财务规划方案。
当前财务状况：{currentSituation}
财务目标：{financialGoals}
规划内容：
1. 现金流管理：收入支出优化
2. 资产配置：投资组合建议
3. 风险管理：保险规划
4. 税务优化：合理避税策略
要求：
- 方案要个性化定制
- 考虑生命周期阶段
- 提供具体执行计划
- 包含定期评估机制`,
requiredMetrics: ['现金流', '资产负债率', '储蓄率', '投资回报率'],
qualityCriteria: ['个性化程度', '全面性', '可执行性', '长期性']
}
};其次，通过预设的金融专业知识图谱和关键指标检查清单，对AI返回的内容进行自动质量评分。当检测到回答过于笼统或缺乏具体数据支撑时，系统会触发自动追问机制，要求补充具体案例或数据依据，确保输出内容达到金融专业标准部分核心代码如下；
typescript
// 话题检测函数
export function detectFinancialTopic(userInput: string): FinancialTopic | null {
const topicKeywords: Record<FinancialTopic, string[]> = {
[FinancialTopic.STOCK_ANALYSIS]: ['股票', '股价', '市盈率', '市净率', '财报', '估值'],
[FinancialTopic.INVESTMENT_STRATEGY]: ['投资', '策略', '组合', '配置', '资产', '收益'],
[FinancialTopic.RISK_ASSESSMENT]: ['风险', '评估', '波动', '回撤', '安全', '稳健'],
[FinancialTopic.FINANCIAL_PLANNING]: ['财务', '规划', '理财', '储蓄', '退休', '税务'],
[FinancialTopic.MARKET_TREND]: ['市场', '趋势', '行情', '预测', '宏观', '经济'],
[FinancialTopic.PORTFOLIO_MANAGEMENT]: ['组合', '管理', '优化', '再平衡', '分散']
};
for (const [topic, keywords] of Object.entries(topicKeywords)) {
if (keywords.some(keyword => userInput.includes(keyword))) {
return topic as FinancialTopic;
}
}
return null;
}
// 提示词生成器
export function generateFinancialPrompt(topic: FinancialTopic, context: Record<string, string> = {}): string {
const template = PROMPT_TEMPLATES[topic];
if (!template) return '';
let prompt = template.template;
// 替换模板中的变量
Object.entries(context).forEach(([key, value]) => {
prompt = prompt.replace(new RegExp(`{${key}}`, 'g'), value);
});
return prompt;
}
// 质量评分函数
export function assessAnswerQuality(answer: string, topic: FinancialTopic): {
score: number;
feedback: string[];
needsFollowUp: boolean;
} {
const template = PROMPT_TEMPLATES[topic];
if (!template) {
return { score: 0, feedback: ['无法评估该话题的回答质量'], needsFollowUp: false };
}
const feedback: string[] = [];
let score = 0;
let criteriaMet = 0;
// 检查是否包含必要指标
template.requiredMetrics.forEach(metric => {
if (answer.includes(metric)) {
criteriaMet++;
score += 20;
} else {
feedback.push(`缺少${metric}相关分析`);
}
});
// 检查数据支撑
const hasDataSupport = /\d+(.\d+)?%?/.test(answer) ||
answer.includes('数据') ||
answer.includes('统计') ||
answer.includes('报告');
if (hasDataSupport) {
criteriaMet++;
score += 20;
} else {
feedback.push('回答缺乏具体数据支撑');
}
// 检查分析深度
const analysisDepth = (answer.match(/\n/g) || []).length > 5;
if (analysisDepth) {
criteriaMet++;
score += 20;
} else {
feedback.push('分析深度不足，建议提供更详细的分析');
}
const needsFollowUp = criteriaMet < template.requiredMetrics.length / 2;
return {
score: Math.min(100, score),
feedback,
needsFollowUp
};
}
// 自动追问生成器
export function generateFollowUpQuestion(topic: FinancialTopic, missingMetrics: string[]): string {
const knowledge = FINANCIAL_KNOWLEDGE_GRAPH[topic];
if (!knowledge) return '请提供更详细的信息以便进行专业分析。';
if (missingMetrics.length > 0) {
return `为了更好地进行${PROMPT_TEMPLATES[topic]?.topic || '专业'}分析，请提供以下信息：${missingMetrics.join('、')}相关的具体数据或情况。`;
}
return `为了提供更精准的分析，能否分享更多关于${knowledge.keyMetrics.slice(0, 3).join('、')}的信息？`;
}最后，在交互设计上，参考华为MateChat的工具集成思路，在对话流中无缝嵌入金融工具模块。用户可以在不中断对话的情况下，直接调用复利计算器进行收益测算，使用风险评估问卷进行风险承受能力评估，或者启动收益模拟器进行投资情景分析。这种深度集成的设计大大提升了用户体验和操作效率。
当然，还可以进一步基于现有架构进行模块化扩展，提升金融助手的专业服务能力：
- 实时行情监控功能 - 集成股票、基金、指数的实时价格数据，支持设置价格预警阈值，当标的达到目标价位时主动推送提醒。
- 财报智能解读功能 - 自动解析上市公司财务报表，提取关键财务比率，进行同业对比分析，生成通俗易懂的财务健康度报告。
- 市场情绪分析功能 - 整合网络舆情数据，运用自然语言处理技术分析市场情绪指数，为投资决策提供参考依据。
三、总结
在AI大模型技术迅猛发展的背景下，证券行业正经历着从传统服务模式向智能化、个性化服务的深刻转型。华为MateChat作为业界领先的AI对话组件库，以其完善的技术架构和灵活的组件化设计，为证券智能投顾系统的快速构建提供了理想的技术基础。
其专为GenAI对话打造的输入区域支持多模态内容输入和丰富的扩展功能。可配置的快捷指令、模板化输入和智能补全能力，让用户能够自由、准确地表达复杂需求。输入区域的模块化设计便于快速适配不同业务的特定需求，保持核心体验一致的同时支持灵活扩展。
在探索这一技术的过程中，我们也发现DevUI设计系统为构建高质量的用户界面提供了强大的支持。DevUI不仅提供了丰富的组件和灵活的定制能力，还注重设计的一致性和用户体验，能够帮助开发者更好地实现金融领域的复杂交互需求。如果你对MateChat框架的深度应用感兴趣，或者想了解如何通过DevUI打造更优质的用户交互体验，深入了解DevUI的丰富组件和设计理念，不妨关注MateChat官网和DevUI官网，获取更多实用信息和技术支持，共同推动金融科技的创新与发展。
展望未来，随着多模态交互、实时数据处理等技术的持续演进，MateChat将在智能投顾领域展现出更大潜力，华为MateChat有望成为连接AI技术与金融服务的重要桥梁，推动整个行业向智能化、个性化服务的新阶段迈进。