llm-ui

用 React 快速搭建 LLM 聊天界面，流式输出开箱即用

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署 开源模型 🍴 复刻 90 🐛 待处理 18 👀 关注 5
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 1753
维护状态 维护中
是否开源 开源
定价模式 🏷️完全免费 开源MIT协议，完全免费，可自行部署使用。

项目预览

llm-ui 项目界面预览图
图片来源：项目官网

项目数据

分类开源模型
开发团队richardgill
官网地址https://llm-ui.com
GitHubhttps://github.com/richardgill/llm-ui
定价模式🏷️完全免费
价格说明开源MIT协议，完全免费，可自行部署使用。
访问状态🔧 仅开源项目，无在线服务，需自行部署
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型chatgpt,claude,component-library,generative-ai,llama,llm,markdown,openai,react
GitHub 星标★ 1753
上线时间2024-03-31 00:00:00
代码更新2026-09-29
仓库体积14.7 MB
本站数据更新2026-11-09
维护状态维护中
收录时间2026-08-09
浏览次数7

项目介绍

llm-ui 是一个专为大型语言模型（LLM）应用设计的 React 组件库，旨在帮助开发者快速构建聊天界面、流式输出展示和 AI 交互组件。它解决了在 React 项目中集成 LLM 功能时常见的重复劳动和复杂状态管理问题，提供了一套开箱即用的 UI 组件和 Hooks，支持流式文本渲染、Markdown 解析、代码高亮、自动滚动等功能。核心能力包括：基于流式响应的实时渲染、可定制的组件主题、与主流 LLM API 的无缝对接，以及 TypeScript 类型安全。通过模块化设计，开发者可以灵活组合组件，快速搭建从简单聊天框到复杂多轮对话的交互界面，显著提升开发效率。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 1753

使用教程

⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。

难度：入门 约 10 分钟 部署方式：库/依赖 4 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

  • 一个已搭建的 React 项目（本库为 React 组件库）
  • Node.js 与 npm/pnpm 等包管理环境（README 未指定版本）
  • 支持 TypeScript 的前端构建工具（如 Vite、Next.js 等）
  • 能获取 LLM 流式文本输出的后端或 API（用于渲染）

安装与启动步骤

  1. 1查看官方文档

    README 只提供了文档入口，安装方式、包名与用法需以官方文档 llm-ui.com/docs 为准。

  2. 2准备 React 项目

    在已有的 React + TypeScript 项目中引入本库；它是无样式组件库，需自备样式方案。

  3. 3克隆示例仓库

    克隆 llm-ui 仓库，查看其中的示例代码与组件用法，便于对照文档接入。

    git clone https://github.com/richardgill/llm-ui.git

  4. 4按文档安装接入

    依据官方文档指引安装依赖并把组件、Hooks 接入项目；README 未给出具体安装命令。

如何确认成功

按官方文档示例接入后，页面能实时渲染 LLM 的流式输出，Markdown 与代码高亮正常显示。

常见问题

Q：llm-ui 支持哪些大模型？

A：只要后端能提供流式文本输出即可，如 OpenAI、Claude、Llama 等；组件与具体 API 解耦，可按需对接。

Q：需要自己写样式吗？

A：需要。llm-ui 是 headless（无样式）库，只提供渲染逻辑与组件，样式由你自行实现。

Q：支持代码高亮和 Markdown 吗？

A：支持。它会移除残缺的 Markdown 语法，并通过 Shiki 为各语言代码块提供高亮。

Q：流式输出卡顿怎么处理？

A：库内置节流（throttling）来平滑 LLM 流式输出中的停顿，并以原生帧率渲染内容。

Q：能插入自己的组件吗？

A：可以。支持把自定义组件加入到 LLM 输出中，实现按钮、图表等丰富交互。

注意事项

  • README 未提供任何安装命令，包名与版本请以官方文档 llm-ui.com/docs 为准。
  • 本库为无样式（headless）组件库，需自备 CSS 或样式方案。
  • 项目使用 TypeScript 编写，接入项目建议同样启用 TypeScript。
  • 采用 MIT 许可证，可自由用于商业项目。

核心亮点

  • 专为 LLM 流式响应设计，内置流式文本渲染和增量更新，体验流畅
  • 组件丰富且可定制，覆盖聊天框、消息列表、Markdown 和代码高亮等常见需求
  • 基于 TypeScript 开发，类型定义完善，适合 React 生态深度集成

不足之处

  • 项目较新，文档和社区示例相对有限，学习曲线需自行摸索
  • 依赖 React 18+，对旧项目升级可能有一定门槛

适用场景

  • 快速搭建 LLM 聊天机器人前端界面
  • 在 React 应用中集成流式 AI 响应展示
  • 构建需要 Markdown 和代码高亮的 AI 助手工具

替代项目

chat-ui、react-chat-elements、stream-chat-react

上一篇：fastRAG

下一篇：lmstudio-js

同类项目推荐

k5-compose 开源

用 Kotlin 在桌面端轻松创作创意图形和动画

K5-compose is a sketchy port of p5.js for Jetpack Compose Desktop

★ 222 2026-08-09
devpace 开源

让 Claude Code 帮你把业务目标盯到每一行代码

BizDevOps rhythm manager for Claude Code — trace business goals to code changes wit···

★ 73 2026-08-09
langchain-postgres 开源

用现有 Postgres 跑 LangChain，少搭一套向量库

LangChain abstractions backed by Postgres Backend

★ 282 2026-09-25
Langchain1.0-Langgraph1.0-Learni··· 开源

跟着跑一遍，从零学会用 LangChain+LangGraph 搭 Agent

这是一个 LangChain 1.0 和 LangGraph 1.0 的学习仓库，学习如何进行agent开发，涵盖从基础···

★ 698 2026-10-13
MaxKB4j 开源

用 Java 轻松搭建企业级大模型问答应用

MaxKB4j is an open-source LLMOps platform for LLM workflow applications and RAG deve···

★ 139 2026-08-09
generative_ai_with_langchain 开源

跟着书学LangChain，从原型到生产级LLM应用一步到位

Build production-ready LLM applications and advanced agents using Python, LangChain,···

★ 1458 2026-08-09
langroid 开源

用多智能体编程，轻松编排 LLM 完成复杂任务

Harness LLMs with Multi-Agent Programming

★ 4136 2026-08-09
sagentic-af 开源

用 TypeScript 快速搭建可扩展的自主 AI 智能体

Sagentic.ai Agent Framework - Sagentic.ai is a unified platform for building, runnin···

★ 79 2026-08-09