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
