智能化场景开发效率提升！MateChat一站式解决方案全新视觉发布，附实战教程

Create-MateChat V1.0.0 智能化视觉重磅提升，用户开箱即用 ~

源码：https://gitcode.com/DevCloudFE/MateChat/overview（点关注不迷路，留个star再走呗~）

体验地址：https://matechat.gitcode.com/vue-starter/

引言

一站式解决方案帮助开发者快速搭建对话界面及对接模型，并提供了响应式布局，支持在不同终端设备上搭建对话界面。

• ✨ 支持记录对话历史，并提供对话历史搜索和删除能力，对话历史以天为单位分类展示
• 提供响应式布局设计，支持在移动端搭建对话界面
• 更加便捷模型接入，接入DeepSeek模型填充apiKey即可，也可自行接入其他模型
• 焕新视觉设计，支持与DevUI风格一致的深色和浅色两套主题
• 一键切换语言，支持中英文国际化切换能力

这套模板设计风格真的一绝，太满足当前的设计美感，由DevUI 内部专业设计团队精心打造，曾获德国红点设计奖，话不多说，你自己直接体验吧~

使用指南

创建应用

可通过如下命令创建一个应用：

// 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

模板适配

应用默认使用的Mock数据进行对话，在src/models/config.ts文件中做如下修改可启用真实模型进行对话：

export const MODEL_CONFIGS = {
  //...
  enableMock: false, // 是否使用mock数据
};

应用默认接入了DeepSeek，在src/models/config.ts文件的LLM_MODELS配置中填充自己申请的apiKey可使用模型进行对话，如需要接入其他模型，可参考LLM_MODELS的配置自行补充。

配置化

在src/global-config.ts文件中可对应用进行简单的配置，比如将模板修改为助手式，此时将隐藏左侧导航栏，历史记录将移动到右上角。

配置如下：

// src/global-config.ts
export default {
  displayShape: 'Assistant',
  //...
};

效果如下：

响应式

默认已支持响应式和移动端适配

主题化

默认已支持深色和浅色主题，可在src/global-config.ts文件中配置只显示一种主题。

国际化

默认已支持中英文两套语言，可在src/global-config.ts文件中配置只显示一种语言。

结语

MateChat年初发布到现在收获了大批粉丝喜爱~六月我们在华为HDC大会吸引了大批用户以及开发者体验，现场设置了展台、产品体验官以及训练营多方面活动，收到很多用户给我们的体验反馈以及赞赏，感谢大家的支持与热爱~

近期也发现很多自媒体文章的归纳宣传，MateChat都在热榜上~谢谢大家的喜爱与推广

• 开箱即用！推荐6款国产开源的AI前端组件
• 如何做好AI产品设计？先收好这5个国产顶尖AI设计系统！

广纳贤士：AI赋能各行各业，MateChat期待更多感兴趣的小伙伴加入我们~

• 欢迎大家前来提交Issue，认领Issue；