手搓一个ChatUI需要分几步_chat ui

只关注项目代码的同学可以直接跳转目录中的正文部分，查看项目仓库和功能介绍。

引言

Chatbot的UI界面设计，是和传统软件不同的：都是当面一个简洁的对话框，框里预备着热乎的工具，可以随时更新。

像我这样做工的牛马，午休傍晚下了班，每每花几个token，问一两句弱智吧的问题，——这是一年多前的事，现在一个问题都得设计个COT，——不用登录，在主页改改prompt，测完了就发群里刷一下存在感。

倘肯多费点心思，便可以问问3.11和3.9谁大，或者让姥姥念CD-Key哄你睡，姑且当作谈资了。如果充点真金白金，那就能获得一个API-Key，但我们这些牛马，多是白嫖党，大抵没有这样阔绰。只有公司报销的领域专家，才能点进绑定支付方式的页面里，买这买那的，写个脚本直接调用API慢慢跑着测。

我从毕业起，就在IT通信行业当伙计，父母和掌柜都说，不是e人，怕侍候不了VIP客户，就在组里开发开发后端。

公司内的stackholder，虽然容易说话，但是唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着代码跑起来，看过消息交互的抓包格式对了没有，又亲看将服务器整到shutdown，还能定时恢复，然后放心：在这严重监督之下，出一点小问题也很为难。

所以过了几天，掌柜说这些活太简单了，让去看看AI。幸亏大学里有点底子，也算对口，便改为既要开发后端，又要设计前端，还要兼顾AI算法和应用场景的奇怪职务了。

我从此便每天挂在Github上，看看有什么可以拿来用的App做个Demo。虽然没什么失职，但是总觉有些单调。

有些App太臃肿，npm install跑完就带上了全家；

有些太简单，没法适配微信群里一天更新三回的模型和后端框架。

只有最后狠下心来自己悄悄写一个，取个名就叫Chat-UI，算是勉强满意，所以来说说。

https://github.com/AI-QL/chat-uihttps://github.com/AI-QL/chat-ui

Chat-UI是不需要npm install和run time就能运行的，只需唯一的html单文件。

它身材很小巧；蓝白配色，底部夹杂着一些mdi图标；只有简单的light主题。

用的虽然是VUE，可是只用CDN引入了JS库，简单快捷，而且都是latest版本，似乎不用更新，也不用安装。

    <script src="https://cdn.jsdelivr.org/npm/vue/dist/vue.global.prod.min.js"></script>
    <script src="https://cdn.jsdelivr.org/npm/vuetify/dist/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.org/npm/vuetify/dist/vuetify.css" rel="stylesheet">

LLM对人说话，总是满口markdown，教人半懂不懂的。又因为我自己前端开发经验不过关，便直接引入了md-editor-v3，替我可视化markdown。

fetch回来的JSON body刚收到，所有的组件就都看着它笑，有的叫道，

“OpenAI，你又增加新的限制区域了！”它不回答，只是吐出一行，“Fail to fetch XXX”便不再多言。

他们又故意的高声嚷道，“Nidia NIM 都免费提供 Llama 405B 了！”

OpenAI睁大眼睛说，“哪有什么免费的…”

“就是免费的，只要注册时候额外申请一下免费token就行了，随便用。”

OpenAI便涨红了脸，额上的青筋条条绽出，争辩道，“那也是有数量上限的，而且不支持跨域，跨域你懂吗？”接连便是难懂的话，什么“CORS”， 什么“Allow Headers”之类，

引得众后端都哄笑起来：那我再开发一个Proxy不就搞定了吗，workflow内充满了开源的空气。

简单小巧的OpenAI API访问：一键部署，轻松上手-优快云博客文章浏览阅读1.6k次，点赞62次，收藏16次。OpenAI Proxy Docker项目不仅简单小巧，而且易于上手。通过使用最新的Bun运行时，你可以在保持高性能的同时，得到可靠的代理服务解决方案。https://blog.youkuaiyun.com/aiqlcom/article/details/144684140

听人家背地里谈论，OpenAI原来也免费送过5刀的token，但没有境外手机号，又不会绑境外信用卡；于是愈用愈少，弄到将要过期了。幸而开源vllm跑得一手好模型，便换一个模型当后端用用。

可惜OpenAI又传染的一样坏脾气，就是API版本控制。坐不到几天，便连JSON和定义，一齐更新了。如是几次，没有办法，便免不了再开发一个API UI，偶然查看一下最新格式。

https://api-ui.aiql.com/ 第一次登陆比较慢，可以下载html修改CDNhttps://api-ui.aiql.com/

但是OpenAI在我们这里，品行比别家都好，格式支持的最全，报错最详细；虽然间或没有在文档里更新，暂时记在Issue里，但不出一月，定然修复，从Issue里done掉了名字。

OpenAI融了几回资，涨红的股价渐渐走了高，旁人便又问道，“OpenAI，AGI当真有出路么”，OpenAI看着问他的人，显出不屑置辩的神气。

他们便接着说道，“你怎的连半个开源的模型也没有呢?”OpenAI立刻显出颓唐不安模样，脸上笼上了一层灰色，嘴里说些话；这回可是全是金鍂鑫𨰻之类，一下全懂了。在这时候，众人也都哄笑起来：workflow内充满了闭源的空气。

在这些时候，我可以附和着challenge，掌柜是决不责备的。而且掌柜见了那些用OpenAI模型的项目，也每每这样发难，引人发笑。

OpenAI自己知道不能开源，便只好向各方面发力。有一回对我发邮件，“你知道多模态和Function call么？”

我略略点一点头。

他说，“用过，……我便要考你一考。request里的messages，怎样写的?”

我想，API文档里都写着的，也配考我么? 便回过脸去，不再理会。

OpenAI等了许久，很恳切的说道，“不会用吧?……我教给你，记着!这些format应该记着。将来做掌柜的时候，装逼要用。”

我暗想我和掌柜的等级还很远呢，而且我们掌柜也从不看开发细节；又好笑，又不耐烦，懒懒的答他道，

“谁要你教，不就是content里面一个string么?”OpenAI显出极高兴的样子，将一个长长的schema敲着我的脑袋，点头说，“对呀对呀!……messages光是role就有六样写法，你知道么?”我愈不耐烦了，努着嘴走远。

OpenAI刚写了个oneOf，想在后面跟上[developer, system, user, assistent, tool, function]，见我毫不热心，便又叹一口气，显出极惋惜的样子, 把function标为了deprecated，然后又把user和tool定义了不一样的content parts。

（user, assistent, tool 里面的支持格式其实不一样哟）

有几回，隔壁开发组见得着KPI，也赶热闹，围住了OpenAI。它便给他们模型吃，一周一更新。开发组从年初加班到年尾，仍然不散，眼睛都望着array里不断新增的 [o1, o1-2024-12-17, o1-preview, o1-preview-2024-09-12, o1-mini, o1-mini-2024-09-12, gpt-4o, gpt-4o-2024-11-20, gpt-4o-2024-08-06, gpt-4o-2024-05-13, gpt-4o-audio-preview, gpt-4o-audio-preview-2024-10-01, gpt-4o-audio-preview-2024-12-17, gpt-4o-mini-audio-preview, gpt-4o-mini-audio-preview-2024-12-17, chatgpt-4o-latest, gpt-4o-mini, gpt-4o-mini-2024-07-18, gpt-4-turbo, gpt-4-turbo-2024-04-09, gpt-4-0125-preview, gpt-4-turbo-preview, gpt-4-1106-preview, gpt-4-vision-preview, gpt-4, gpt-4-0314, gpt-4-0613, gpt-4-32k, gpt-4-32k-0314, gpt-4-32k-0613, gpt-3.5-turbo, gpt-3.5-turbo-16k, gpt-3.5-turbo-0301, gpt-3.5-turbo-0613, gpt-3.5-turbo-1106, gpt-3.5-turbo-0125, gpt-3.5-turbo-16k-0613]。

OpenAI着了慌，伸开五指将文档罩住，弯腰下去说道，“不多了，我已经不多了。”直起身又看一看股价，自己摇头说，“不多不多!多乎哉?不多也。”于是这一群Prompt Engineer都在哭声里走散了。

OpenAI是这样的使人快活，可是没有他，别人也便这么过。vllm，TGI，部署个小模型当后端也不是不能用。

https://github.com/huggingface/text-generation-inferencehttps://github.com/huggingface/text-generation-inferencehttps://github.com/vllm-project/vllmhttps://github.com/vllm-project/vllm

谁曾想TGI基于conda，而这玩意license不能给大组织商用：

我知道AI多半是个杀猪盘，但是没曾想，屠夫和刀子都没动手，甚至猪还没哼哼，砧板第一个跳起来给了我一巴掌：

Anaconda 许可变更解读https://www.datacamp.com/blog/navigating-anaconda-licensing

有一天，大约是2024年圣诞前的两三天，掌柜正在慢慢的定OKR，取下粉板，忽然说，“OpenAI长久没有新东西了。”我才也觉得它的确长久没啥新闻了。

一个带着黑眼圈的人说道，“它怎么没更新? ……他o1-pro了。”

掌柜说，“哦!”

“它总仍旧是更新。这一回，是自己卷，竟连更12天。它家的新东西，200刀一个月，还只能Web访问，用得起么?”

“后来怎么样?”“怎么样?先充钱，后来是封号，信用卡记录被老婆看到了，再打折了腿。”

“后来呢?”“后来打折了腿了。”

“打折了怎样呢?”“怎样?……谁晓得?许是换用Llama了。”掌柜也不再问，仍然慢慢的算他的帐。

圣诞过后，东北风是一天凉比一天，看看将近元旦;

我整天的靠着AI的火，也须换开源模型了。

clone了一整天的模型，没有一个能用的，我正合了眼坐着。忽然间听得一个声音，“试试这MOE吧。”

这声音虽然极低，却很耳熟。看时又全没有人。站起来向外一望，竟是Deepseek在微信群里悄悄发着自己的照片：

它脸上全是benchmark，已经看不出原本的样子;穿一件自研的大衣，盘着两腿，下面垫一个MOE，用草绳在肩上挂住;见了我，又说道，“试一试MOE吧。”

掌柜也伸出头去，一面说，“新的开源模型么?训练成本才557.6万美元呢!”

Deepseek很疲惫的仰面答道，“这，v3不算新模型了……已经超过Llama 405B了。也赶上GPT-4o了，性能算好的了。”

掌柜仍然同平常一样，笑着对我说，“你看，又多了一个连部署都部署不起的模型”。但Deepseek这回却不十分分辩，单说了一句“我在Huggingface上开源了!”

“开源? 那要不我们试试?支持Function call吗” Deepseek低声说道，“支持，支，早就支持了……”他的眼色，很像恳求我，不要再细问（问就是官方文档更新慢）。

此时已经聚集了几个开发，便去查看文档了。我重新配置了Chat-UI，清空对话记录，重置了MCP server。他从新人注册里面摸出了一个月的免费token，放在我手里，见他满手都是卡，也不知是哪个哥布林洞穴里来的，想必模型便是用这2000张卡炼出来。不一会，我们调通了代码，他便又在旁人的说笑声中，去下一个交流群里了。

自此以后，就没有再看其他模型了。到了年底，掌柜取下粉板说，“还有Llama 3.3呢!”到了第二天的中午，又说，“Mistral最近有更新么？”到第三天又问，“Qwen是不是也在推新模型”，于是我狠狠心，把这些都用vllm测了一遍。

我到现在终于差不多可以确定Chat-UI大概可以拿出来给大家用一用了。

正文

其实要把一个项目说清楚，一篇短文或者回答是不够的。

然而我这人又不善言辞，只好自欺欺人：“一个纯粹的前端项目，不需要用复杂的介绍来丰富的，交互逻辑清晰，满足基本功能需求，就可以了。“

所以这里只是估摸着说一下基本的功能，具体的代码解读，等有时间再做吧。

配置

我开发部署后端的时候，经常头疼没有一个前端可以用，主要是后端的URL和model名称一直在变，有时候又需要给别人展示，直接curl太粗暴了，所以Chat-UI里可以随意配置URL，还可以通过Json文件快速导入写好的配置：

Prompts

支持插入多个prompts，会在messages里面帮你合并一起放到system role对应的text content里。这样可以测试不同提示词以及顺序对模型的影响。暂时用不上的，但是已经写好的prompt，可以放到backup里，随时拖拽交换对比。

MD格式支持

可以支持Markdown语法显示，比如Mermaid图和代码块：

同时也可以一键复制文本，或者显示原始文本。

历史记录

记录聊天历史，可以点击载入，或者下载并保存为Json文件，也可以单独或批量删除。

多模态

可以支持图片多模态，记得选择后端模型的时候要选择vision模型，比如Llama vision或者Pixtral。

i18n

提供基本的多语言支持，选了5种特殊字符比较多的语言，有需要的同学可以自己加

MCP

可以作为渲染端对接 MCP（Model Context Protocol）Servers，具体参考另一个项目：

[MCP（Model Context Protocol）模型上下文协议 实战篇1_mcp协议内容-优快云博客文章浏览阅读2.6k次，点赞70次，收藏10次。MCP 协议（Model Context Protocol）模型上下文协议，简单实战，快速开发一个AI Agent APP_mcp协议内容

这样可以扩展更多agent功能以及function call

Response兼容

对于一些正常OpenAI SDK兼容的后端都可以支持。对于一些特殊后端，比如Cloudflare的 Workers AI （如下这种Rest API定义）：

{
  "result": {
    "response": "Hello, World first appeared in 1974 at Bell Labs when Brian Kernighan included it in the C programming language example. It became widely used as a basic test program due to simplicity and clarity. It represents an inviting greeting from a program to the world."
  },
  "success": true,
  "errors": [],
  "messages": []
}

或者python写的直接plain text返回的response，也都可以兼容（是的，真的有这样的后端，除非自己写一个不然真的找不到能支持这种离谱格式的玩意）。

也可以勾选支持流式输出（stream）。

Cloudflare Pages

项目比较简单，直接fork之后可以部署在自己的域名下，如果不熟悉Cloudflare pages请查看链接:

https://developers.cloudflare.com/pageshttps://developers.cloudflare.com/pages

Docker

也提供直接Docker部署的镜像：

Docker Image - AIQL/Chat-UIhttps://hub.docker.com/repository/docker/aiql/chat-ui/tags?page=1&ordering=last_updated

既然有了镜像，所以默认可以支持其他容器化部署，比如K8s，或者在Huggingface上直接一行代码搞定：

From aiql/chat-ui

https://huggingface.co/spaces/AI-QL/chat-ui
https://huggingface.co/spaces/AI-QL/chat-ui

这里也提供一个例子。

HTML

最后，也是最推荐的用法，可以直接在Github上下载 index.html，双击打开即可，不用安装也不用run。

零基础如何高效学习大模型？

为了帮助大家打破壁垒，快速了解大模型核心技术原理，学习相关大模型技术。从原理出发真正入局大模型。在这里我和MoPaaS魔泊云联合梳理打造了系统大模型学习脉络，这份 LLM大模型资料 分享出来：包括LLM大模型书籍、640套大模型行业报告、LLM大模型学习视频、LLM大模型学习路线、开源大模型学习教程等, 😝有需要的小伙伴，可以 扫描下方二维码免费领取🆓**⬇️⬇️⬇️

【大模型全套视频教程】

教程从当下的市场现状和趋势出发，分析各个岗位人才需求，带你充分了解自身情况，get 到适合自己的 AI 大模型入门学习路线。

从基础的 prompt 工程入手，逐步深入到 Agents，其中更是详细介绍了 LLM 最重要的编程框架 LangChain。最后把微调与预训练进行了对比介绍与分析。

同时课程详细介绍了AI大模型技能图谱知识树，规划属于你自己的大模型学习路线，并且专门提前收集了大家对大模型常见的疑问，集中解答所有疑惑！

深耕 AI 领域技术专家带你快速入门大模型

跟着行业技术专家免费学习的机会非常难得，相信跟着学习下来能够对大模型有更加深刻的认知和理解，也能真正利用起大模型，从而“弯道超车”，实现职业跃迁！

【精选AI大模型权威PDF书籍/教程】

精心筛选的经典与前沿并重的电子书和教程合集，包含《深度学习》等一百多本书籍和讲义精要等材料。绝对是深入理解理论、夯实基础的不二之选。

【AI 大模型面试题 】

除了 AI 入门课程，我还给大家准备了非常全面的**「AI 大模型面试题」，**包括字节、腾讯等一线大厂的 AI 岗面经分享、LLMs、Transformer、RAG 面试真题等，帮你在面试大模型工作中更快一步。

【大厂 AI 岗位面经分享（92份）】

【AI 大模型面试真题（102 道）】

【LLMs 面试真题（97 道）】

【640套 AI 大模型行业研究报告】

【AI大模型完整版学习路线图（2025版）】

明确学习方向，2025年 AI 要学什么，这一张图就够了！

👇👇点击下方卡片链接免费领取全部内容👇👇

抓住AI浪潮，重塑职业未来！

科技行业正处于深刻变革之中。英特尔等巨头近期进行结构性调整，缩减部分传统岗位，同时AI相关技术岗位（尤其是大模型方向）需求激增，已成为不争的事实。具备相关技能的人才在就业市场上正变得炙手可热。

行业趋势洞察：

• 转型加速： 传统IT岗位面临转型压力，拥抱AI技术成为关键。
• 人才争夺战： 拥有3-5年经验、扎实AI技术功底和真实项目经验的工程师，在头部大厂及明星AI企业中的薪资竞争力显著提升（部分核心岗位可达较高水平）。
• 门槛提高： “具备AI项目实操经验”正迅速成为简历筛选的重要标准，预计未来1-2年将成为普遍门槛。

与其观望，不如行动！

面对变革，主动学习、提升技能才是应对之道。掌握AI大模型核心原理、主流应用技术与项目实战经验，是抓住时代机遇、实现职业跃迁的关键一步。

01 为什么分享这份学习资料？

当前，我国在AI大模型领域的高质量人才供给仍显不足，行业亟需更多有志于此的专业力量加入。

因此，我们决定将这份精心整理的AI大模型学习资料，无偿分享给每一位真心渴望进入这个领域、愿意投入学习的伙伴！

我们希望能为你的学习之路提供一份助力。如果在学习过程中遇到技术问题，也欢迎交流探讨，我们乐于分享所知。

*02 这份资料的价值在哪里？*

专业背书，系统构建：

• 本资料由我与MoPaaS魔泊云的鲁为民博士共同整理。鲁博士拥有清华大学学士和美国加州理工学院博士学位，在人工智能领域造诣深厚：

• • 在IEEE Transactions等顶级学术期刊及国际会议发表论文超过50篇。
  • 拥有多项中美发明专利。
  • 荣获吴文俊人工智能科学技术奖（中国人工智能领域重要奖项）。

• 目前，我有幸与鲁博士共同进行人工智能相关研究。

内容实用，循序渐进：

• 资料体系化覆盖了从基础概念入门到核心技术进阶的知识点。

• 包含丰富的视频教程与实战项目案例，强调动手实践能力。

• 无论你是初探AI领域的新手，还是已有一定技术基础希望深入大模型的学习者，这份资料都能为你提供系统性的学习路径和宝贵的实践参考，助力你提升技术能力，向大模型相关岗位转型发展。

  

抓住机遇，开启你的AI学习之旅！