news 2026/4/15 0:55:59

前端智能化场景解决方案UI库，轻松构建你的AI应用，如何进行模型的对接

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端智能化场景解决方案UI库，轻松构建你的AI应用，如何进行模型的对接

华为MateChat组件是为AI生成内容（AIGC）场景设计的UI库。MateChat，作为华为专为AIGC场景精心打造的UI库，旨在助力开发者高效构建AI对话应用。实际上，它不仅支撑了华为内部多个应用的对话需求，还融入了CodeArts、InsCode AI IDE等智能化助手的构建之中。

MateChat 是由华为 DevUI 团队开发的一款开源前端 AI 组件库，旨在帮助开发者快速构建智能对话应用。

它专注于生成式 AI（GenAI）场景，提供了一套完整的对话式交互组件，如消息气泡、输入框和过程监督组件，以实现流畅、易用的用户体验。 其核心特点包括：

  • 即插即用：轻量化设计，支持快速集成到 React、Vue 等主流前端框架中，降低开发门槛。
  • 高扩展性：允许自定义消息格式、主题样式和对话逻辑，兼容 OpenAI、Gemini 等主流 AI 模型。
  • 多场景适配：不仅适用于通用网站（如企业官网、电商平台），还特别优化了研发工具领域（如 IDE 插件），支持沉浸式、情境化的交互体验。

MateChat 已在华为内部多个应用及 CodeArts、InsCode AI IDE 等产品中落地，体现了其在实际项目中的可靠性。 通过提供开箱即用的组件和灵活的定制能力，它致力于简化 AI 对话功能的开发流程，助力应用智能化升级。

在安装完成MateChat 后，我们需要将AI大模型进行对接进来。

OpenAI

在搭建完成页面后，我们可以开始对接模型服务，如 DeepSeek、盘古大模型、ChatGPT 等优秀大模型。在注册并生成对应模型的调用API_Key后，可以参考如下方法进行调用：

通过 npm 安装 openai:

$ npm install openai

使用OpenAI初始化并调用模型接口，如下为一段代码示例：
注意：通常openai-node用于node环境，如果在浏览器环境使用，需要开启dangerouslyAllowBrowser，开启该配置存在安全风险（API凭证泄露），请确保在安全环境中使用，详见openai-node官方文档说明。

importOpenAIfrom'openai';constclient=ref();client.value=newOpenAI({apiKey:'',// 模型APIKeybaseURL:'',// 模型API地址dangerouslyAllowBrowser:true,// 浏览器环境使用需要开启});constfetchData=(ques)=>{constcompletion=awaitclient.value!.chat.completions.create({model:'my-model',// 替换为自己的model名称messages:[{role:'user',content:ques},],stream:true,// 为 true 则开启接口的流式返回});forawait(constchunkofcompletion){console.log('content: ',chunk.choices[0]?.delta?.content||'');console.log('chatId: ',chunk.id);}}

结合MateChat【快速开始】示例代码，修改onSubmit函数代码如下：

importOpenAIfrom'openai';constclient=ref<OpenAI>();client.value=newOpenAI({apiKey:'',// 模型APIKeybaseURL:'',// 模型API地址dangerouslyAllowBrowser:true,});constonSubmit=(evt)=>{inputValue.value='';startPage.value=false;// 用户发送消息messages.value.push({from:'user',content:evt,avatarConfig:{name:'user'},});fetchData(evt);};constfetchData=async(ques)=>{// 消息响应气泡messages.value.push({from:'model',content:'',avatarConfig:{name:'model'},id:'',loading:true,});constcompletion=awaitclient.value!.chat.completions.create({model:'my-model',// 替换为自己的model名称messages:[{role:'user',content:ques}],stream:true,// 为 true 则开启接口的流式返回});messages.value[messages.value.length-1].loading=false;// 将流式返回拼接到消息内容中forawait(constchunkofcompletion){constcontent=chunk.choices[0]?.delta?.content||'';constchatId=chunk.id;messages.value[messages.value.length-1].content+=content;messages.value[messages.value.length-1].id=chatId;}};

完成模型API地址与APIKey填充后，即拥有了一个对接大模型的简单应用。

DeepSeek

这里我们以DeepSeek为例，介绍如何在MateChat搭建的应用中接入DeepSeek提供的模型服务。

DeepSeek API 使用与 OpenAI 兼容的 API 格式，详见官方文档：DeepSeek - 首次调用API

baseURL获取：https://api-docs.deepseek.com/zh-cn/apiKey获取：https://platform.deepseek.com/api\_keys

前往DeepSeek开发平台获取相关的baseURL和apiKey后，可以参考如下方法对【快速开始】中示例代码进行调整：

constonSubmit=(evt)=>{inputValue.value='';startPage.value=false;// 用户发送消息messages.value.push({from:'user',content:evt,});setTimeout(()=>{// 模型返回消息messages.value.push({from:'model',content:evt,});},200);};修改为：importOpenAIfrom'openai';constclient=ref<OpenAI>();client.value=newOpenAI({apiKey:'',// 模型APIKeybaseURL:'',// 模型API地址dangerouslyAllowBrowser:true,// 浏览器环境使用需要开启});constonSubmit=(evt)=>{inputValue.value='';startPage.value=false;// 用户发送消息messages.value.push({from:'user',content:evt,avatarConfig:{name:'user'},});fetchData(evt);};constfetchData=async(ques)=>{messages.value.push({from:'model',content:'',avatarConfig:{name:'model'},id:'',loading:true,});constcompletion=awaitclient.value!.chat.completions.create({model:'deepseek-reasoner',// 根据deepseek模型列表进行替换messages:[{role:'user',content:ques}],stream:true,// 为 true 则开启接口的流式返回});messages.value[messages.value.length-1].loading=false;forawait(constchunkofcompletion){constcontent=chunk.choices[0]?.delta?.content||'';constchatId=chunk.id;messages.value[messages.value.length-1].content+=content;messages.value[messages.value.length-1].id=chatId;}};

完成模型API地址与APIKey填充后，即拥有了一个对接DeepSeek大模型的简单应用。如果你想要参考更完整的页面示例.

其他

当前大部分大模型服务 API 接口都使用与 OpenAI 兼容的 API 格式，但直到目前，还没有标准的协议定义模型接口规范，所以仍会存在协议不兼容的问题。

这里补充介绍如下 fetch + SSE 的接入方案供参考：

Fetch Event Source

Fetch Event Source 是一个用于处理服务器发送事件（Server-Sent Events, SSE）的 JavaScript 库，并具有 Fetch API 中所提供的所有功能。

安装依赖

npm install @microsoft/fetch-event-source

使用 fetchEventSource 调用模型接口

import{fetchEventSource}from'@microsoft/fetch-event-source';constgetAIAnswer=(content,type)=>{abortController=newAbortController();constaiAnswer={from:'assistant',content:'',type,avatarPosition:'side-left',avatarConfig:{...aiModelAvatar},loading:true,};messages.value.push(aiAnswer);constsource=fetchEventSource(apiUrl,{method:'POST',headers:{'Content-Type':'application/json',},body:JSON.stringify({messages:[{role:'user',content,},],apikey:apiKey,}),signal:abortController.signal,onopen:(response)=>{},onmessage:(msg)=>{messages.value.at(-1).loading=false;if(msg.data==='[DONE]'){nextTick(()=>{conversationRef.value?.scrollTo({top:conversationRef.value.scrollHeight,behavior:'smooth',});});return;}constdata=JSON.parse(msg.data);constresponseContent=data.choices[0].delta.content;messages.value.at(-1).content+=responseContent;},onerror:(err)=>{messages.value.at(-1).loading=false;messages.value.at(-1).content='请求失败';throwerr;},});};conststop=()=>{if(abortController){abortController.abort();abortController=null;// 更新最后一条消息的状态if(messages.value.length>0){messages.value.at(-1).loading=false;messages.value.at(-1).content+='已中止对话';}}};

使用MateChat的多种方式

当前MateChat主要基于Vue3开发，但我们仍可以通过多种方式将MateChat与您的项目集成。

以下是一些可行方案供参考：

一、在Vue3项目中集成MateChat（主流方式）

适用场景：需要深度定制AI助手功能，并与现有Vue项目无缝融合的场景。

步骤： 参考 快速开始 的使用方式

import{createApp}from'vue';importAppfrom'./App.vue';importMateChatfrom'@matechat/core';import'@devui-design/icons/icomoon/devui-icon.css';createApp(App).use(MateChat).mount('#app');

二、通过iframe嵌入独立页面

适用场景：需快速为第三方平台添加AI助手，且不希望侵入宿主环境。

步骤：

  • 构建独立MateChat页面: 创建一个包含MateChat组件的独立Vue项目，并打包为静态资源或独立部署。
  • 嵌入iframe：在宿主页面中通过iframe加载matechat应用。

三、与其他框架集成（如React/Angular）

适用场景：需与现有其他框架的宿主应用集成

方案建议：

  • 封装Web Component: 将MateChat组件打包为自定义元素，供任意框架调用。
  • 通过微前端架构: 使用qiankun、microApp等微前端方案将MateChat作为独立子应用加载。

华为MateChat组件是为AI生成内容（AIGC）场景设计的UI库。MateChat，作为华为专为AIGC场景精心打造的UI库，旨在助力开发者高效构建AI对话应用。实际上，它不仅支撑了华为内部多个应用的对话需求，还融入了CodeArts、InsCode AI IDE等智能化助手的构建之中。MateChat 是由华为 DevUI 团队开发的一款开源前端 AI 组件库，旨在帮助开发者快速构建智能对话应用。

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/13 6:59:19

Google Cloud部署实战：快速上线企业级生成式AI应用

还在为AI应用部署的复杂性而烦恼吗&#xff1f;今天我们来聊聊如何在Google Cloud上快速部署Vertex AI Creative Studio&#xff0c;让你的生成式AI应用轻松上线。 【免费下载链接】vertex-ai-creative-studio Creative Studio is a Vertex AI generative media example user e…

作者头像 李华
网站建设 2026/4/13 9:15:05

Hubot Sans变量字体终极指南：重塑网页字体加载体验

Hubot Sans变量字体终极指南&#xff1a;重塑网页字体加载体验 【免费下载链接】hubot-sans Hubot Sans, a variable font from GitHub 项目地址: https://gitcode.com/gh_mirrors/hu/hubot-sans 想象一下这样的场景&#xff1a;你的网站加载速度很快&#xff0c;但字体…

作者头像 李华
网站建设 2026/4/14 20:37:31

Docker Offload实践全攻略（从入门到高阶的3个关键阶段）

第一章&#xff1a;Docker Offload 的云端任务卸载实践在边缘计算与云计算融合的场景中&#xff0c;Docker Offload 技术为资源受限设备提供了高效的任务卸载能力。通过将计算密集型任务从本地设备迁移至云端容器环境&#xff0c;系统整体响应速度和资源利用率显著提升。任务卸…

作者头像 李华
网站建设 2026/4/14 5:23:31

AxGlyph v12.25：矢量绘图新体验，让论文插图更专业

AxGlyph v12.25&#xff1a;矢量绘图新体验&#xff0c;让论文插图更专业 【免费下载链接】AxGlyphv12.25免费安装版-矢量图绘制软件 AxGlyph 是一款功能强大的矢量图绘制软件&#xff0c;适用于插图、曲线图标、流程图等多种矢量图的绘制。软件支持中文界面&#xff0c;操作简…

作者头像 李华
网站建设 2026/4/8 0:08:11

让AI真正理解中文：150万问答数据集的实战应用指南

让AI真正理解中文&#xff1a;150万问答数据集的实战应用指南 【免费下载链接】nlp_chinese_corpus 大规模中文自然语言处理语料 Large Scale Chinese Corpus for NLP 项目地址: https://gitcode.com/gh_mirrors/nl/nlp_chinese_corpus "为什么我的AI助手总是答非所…

作者头像 李华
网站建设 2026/4/11 1:36:33

Bodymovin插件终极指南：5分钟快速掌握AE动画转网页的完整方案

还在为After Effects中精心制作的动画无法在网页上完美呈现而苦恼吗&#xff1f;&#x1f914; 本指南将带你从零开始&#xff0c;用Bodymovin插件轻松实现AE动画转网页&#xff0c;生成轻量级JSON动画导出的专业技巧。 【免费下载链接】bodymovin-extension Bodymovin UI exte…

作者头像 李华