LangUI 官网

LangUI 图文介绍：

LangUI 2023 年诞生于英国伦敦，是一个面向 AI 聊天与大型语言模型应用的开源 Tailwind CSS 组件库。作者汇总了 GPT、Claude、Gemini 等主流产品的交互模式，封装成 60+ 即用组件（聊天气泡、Markdown 渲染、代码高亮、模型选择、流式打字效果等），开发者只需复制代码即可快速构建美观的 LLM 前端，省去重复设计时间。

主要功能

• 丰富组件
• 聊天：用户/助手气泡、头像、加载动画、消息状态、错误重试。
• 输入：多行框、语音输入、文件上传、emoji 选择、快捷键发送。
• 展示：Markdown 渲染、代码高亮（Prism）、表格、Mermaid 图表、折叠引用。
• 导航：模型选择、侧边历史、深色模式、响应式抽屉。
• 深色/浅色双主题
• 基于 Tailwind 2.x/3.x 变量切换，与系统主题同步。
• 无障碍支持
• ARIA 标签、键盘导航、焦点管理，符合 WCAG 2.1 AA 标准。
• 框架无关
• 纯 HTML + Tailwind，可插入 React、Vue、Svelte、Next.js、Nuxt、Laravel、Django 等任何技术栈。
• 流式消息钩子
• 提供 useStreamMessage Hook 示例（React/Vue），一键实现打字机效果。
• 主题自定义
• 通过 Tailwind 配置文件即可修改主色、圆角、间距，自动生成新样式。
• 开源协议
• MIT 许可，可商用、可二次分发，无版权风险。
• 示例项目
• 官方提供 Next.js + OpenAI 演示，克隆即可上线自己的 ChatGPT 克隆版。

应用场景：

• 独立开发者：快速为 LLM 应用套上专业界面，节省 2-3 周设计时间。
• 企业内部工具：为客服机器人、数据查询助手添加统一视觉。
• 开源项目：为 GPT 套壳、文档问答、AI 搜索提供即用前端。
• 教学示例：前端课程用 LangUI 演示 Tailwind 实战，降低门槛。
• 原型设计：产品经理复制组件即可在 Figma 拼出交互稿。

是否收费：

• 完全免费：GitHub 公开源码，任意商用、修改、再发布。
• 付费支持：作者提供 49 美元的主题定制服务（一次性），含颜色/圆角/字体调整。
• 赞助：GitHub Sponsor 3-15 美元/月，用于持续维护与新组件开发。

平台兼容性：

• 浏览器：Chrome、Edge、Safari、Firefox 最新版；无 JS 亦可显示静态组件。
• 构建工具：支持 Vite、Webpack、Parcel、Rollup、Tailwind CLI。
• 框架：React、Vue 3、Svelte、Solid、Angular、Next.js、Nuxt、Remix、Laravel、Django、Flask 均可使用。
• 系统要求：纯前端静态文件，Windows、macOS、Linux 无差异；Node ≥14 仅用于构建 Tailwind。
• 体积：组件库 gzip < 12 kB，CSS 按需生成，几乎不增加 bundle 体积。
• 更新：每月发布新增组件与示例，社区可通过 PR 提交需求。

LangUI 把「AI 聊天界面常用元素」封装成复制即可用的 Tailwind 组件，兼顾深色模式、无障碍与流式交互，让开发者 30 分钟完成高颜值 LLM 前端。对于需要快速上线 ChatGPT 克隆、企业问答机器人或教学演示的个人与团队，LangUI 是目前最轻量、开源、框架无关的 AI 开发框架之一。