当前位置：首页 > news >正文

前端智能化场景解决方案UI库matechat，如何在项目中使用matechat使用AI功能进行搜索（对接模型服务）

news 2026/8/19 10:38:35

MateChat / Angular

前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。

特性

面向智能化场景组件库
开箱即用
多场景匹配
多主题适配

🧩 对接模型服务

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

通过 npm 安装 openai:

$ npm install openai

使用OpenAI初始化并调用模型接口，如下为一段代码示例：

importOpenAIfrom'openai';constclient=newOpenAI({apiKey:'',// 模型APIKeybaseURL:'',// 模型API地址dangerouslyAllowBrowser:true,});constfetchData=(ques)=>{constcompletion=awaitclient.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);}}

那么参考以上步骤，【快速开始】中示例可调整下代码。

将以下代码：

onSubmit=(evt)=>{this.inputValue='';// 用户发送消息this.messages.push({from:'user',content:evt,});setTimeout(()=>{// 模型返回消息this.messages.push({from:'model',content:evt,});},200);};

修改为：

importOpenAIfrom'openai';client=newOpenAI({apiKey:'',// 模型APIKeybaseURL:'',// 模型API地址dangerouslyAllowBrowser:true,});onSubmit=async(evt)=>{this.inputValue='';// 用户发送消息this.messages.push({from:'user',content:evt,avatarConfig:{name:'user'},});this.fetchData(evt);};fetchData=async(ques)=>{this.messages.push({from:'model',content:'',avatarConfig:{name:'model'},id:'',loading:true,});constcompletion=awaitthis.client.chat.completions.create({model:'my-model',// 替换为自己的model名称messages:[{role:'user',content:ques}],stream:true,// 为 true 则开启接口的流式返回});forawait(constchunkofcompletion){this.messages[this.messages.length-1].loading=false;constcontent=chunk.choices[0]?.delta?.content||'';constchatId=chunk.id;this.messages[this.messages.length-1].content+=content;this.messages[this.messages.length-1].id=chatId;}};

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

ModelArts Studio 大模型即服务平台

集模型体验、精调、部署、管理、应用开发于一体，降低企业使用大模型的开发门槛，加速AI应用落地。

在ModelArts Studio（MaaS）预置服务中开通商用服务

MaaS预置服务的商用服务为企业用户提供高性能、高可用的推理API服务，支持按Token用量计费的模式。该服务适用于需要商用级稳定性、更高调用频次和专业支持的场景。

操作场景

企业智能客服：企业希望利用推理API优化客服系统，实现智能问答、意图识别，提升客服效率与客户满意度。
内容创作辅助：媒体、广告公司借助推理API进行文案创作、创意生成，提高内容产出的效率与质量。
智能数据分析：金融、电商企业通过推理API对海量数据深度分析，挖掘数据价值，辅助决策制定。

importrequestsimportjsonif__name__=='__main__':url="https://api.modelarts-maas.com/v2/chat/completions"#API地址 api_key="MAAS_API_KEY"# 把MAAS_API_KEY替换成已获取的APIKey # Send request.headers={'Content-Type':'application/json','Authorization':f'Bearer {api_key}'}data={"model":"DeepSeek-V3",# model参数"messages":[{"role":"system","content":"You are a helpful assistant."},{"role":"user","content":"你好"}]}response=requests.post(url,headers=headers,data=json.dumps(data),verify=False)# Print result.print(response.status_code)print(response.text)

修改为非openai的模式：

import{Component,signal}from'@angular/core';import{CommonModule}from'@angular/common';import{BubbleModule,InputModule,MarkdownCardModule}from'@matechat/ng';@Component({selector:'app-root',standalone:true,imports:[CommonModule,BubbleModule,InputModule,MarkdownCardModule],templateUrl:'./app.html',styleUrl:'./app.less',})exportclassApp{protectedreadonly title=signal('matechat-demo');theme:string='default';// 或其他类型inputValue='';messages:any=[];newPage=true;questionList=['帮我写一篇文章','你可以帮我做些什么？','帮我写一个快速排序','使用 js 格式化时间',];avatarConfig={imgSrc:'https://matechat.gitcode.com/png/demo/userAvatar.svg',};modelAvatar={imgSrc:'https://matechat.gitcode.com/logo.svg',};onSubmit=(evt:any)=>{this.newPage=false;this.inputValue='';// 用户发送消息this.messages.push({from:'user',content:evt,});this.fetchData(evt);setTimeout(()=>{// 模型返回消息this.messages.push({from:'model',content:evt,});},200);};fetchData=async(ques:string)=>{consturl="https://api.modelarts-maas.com/v2/chat/completions";constapiKey="替换自己的吧，小样";// 替换为实际的API Key// 添加loading状态消息this.messages.push({from:'model',content:'',avatarConfig:{name:'model'},id:'',loading:true,});constresponse=awaitfetch(url,{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer${apiKey}`},body:JSON.stringify({model:'DeepSeek-V3',messages:[{role:'user',content:ques}],stream:true// 开启流式返回})});if(!response.ok){thrownewError(`HTTP error! status:${response.status}`);}if(!response.body){thrownewError('Response body is null or undefined.');}constreader=response.body.getReader();constdecoder=newTextDecoder();letaccumulatedContent='';letchatId='';while(true){const{done,value}=awaitreader.read();if(done)break;constchunk=decoder.decode(value);constlines=chunk.split('\n');for(constlineoflines){if(line.startsWith('data: ')&&line!=='data: [DONE]'){try{constjsonData=JSON.parse(line.slice(6));if(jsonData.id){chatId=jsonData.id;this.messages[this.messages.length-1].id=chatId;}constcontent=jsonData.choices?.[0]?.delta?.content||'';if(content){accumulatedContent+=content;this.messages[this.messages.length-1].content=accumulatedContent;this.messages[this.messages.length-1].loading=false;}}catch(e){// 忽略解析错误，继续处理下一个数据块}}}}};}

前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。MateChat官网：https://matechat.gitcode.com。完成模型API地址与APIKey填充后，即拥有了一个对接大模型的简单应用。DevUI官网：https://devui.design/home。那么参考以上步骤，【快速开始】中示例可调整下代码。

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

查看全文

http://www.cnnetsun.cn/news/5696.html