为您的 AI 打造完美 UI — 构建并部署属于您自己的 ChatGPT

---

LangUI 受到全球多家大型企业、开发者和投资者的信赖，它是一套设计精美的组件库，您可以直接复制粘贴来构建属于自己的 ChatGPT。免费、可定制、开源。

LangUI 基于 Tailwind CSS 构建，提供专为 AI 和 GPT 项目量身打造的免费组件。它包含一系列美观且开箱即用的组件，能够显著提升您 AI 应用的用户界面体验，让您专注于打造下一个卓越项目，而将 UI 交由 LangUI 完成。

⭐️ LangUI 是开源的，其 60 多个组件完全免费。请给它点个星以示支持！

文档

如需查看文档和组件，请访问 LangUI.dev。

快速开始

• LangUI 组件即插即用，无需安装或配置任何东西。

• 浏览 LangUI.dev 并选择所需组件。

• 从 LangUI 文档中复制所需的 HTML 或 JSX 代码。

• 将代码粘贴到您项目的 HTML 或 React/Vue/Angular 组件中。完成！

• ⌘ 部署：您可以在 Langbase.com 上通过创建聊天管道，使用 LangUI 构建并部署属于您自己的 ChatGPT。

Docker 部署

您可以直接使用我已构建好的镜像运行：

docker run -d -t -p 3000:3000 --name langui --restart=always docker.io/wenyang0/langui:latest

或者，如果您愿意，也可以自行手动编译：

# 克隆代码
git clone https://github.com/ahmadbilaldev/langui.git

# 构建 Docker 镜像
cd langui/
docker build -t langui:v1 .

# 启动服务
docker run -d -t -p 3000:3000 --name langui --restart=always langui:v1

最后，打开浏览器并访问服务地址 http://serverIP:3000 即可。

特性

• 复制粘贴集成：无需任何安装或依赖！只需选择您需要的组件，复制并粘贴到您的项目中即可。

• 开源且免费：LangUI 采用 MIT 许可证，适用于个人和商业项目。欢迎通过在 GitHub 上给 LangUI 点赞来支持我们。

• 深色与浅色模式：所有 LangUI 组件均支持深色和浅色模式，并经过精心设计，在两种模式下都能呈现最佳效果。

• 完全响应式：LangUI 组件具有响应式布局，确保在任何屏幕尺寸或设备上都能展现出色的视觉效果。

• 易于定制：LangUI 使用仅两种颜色的配色方案——板岩色和蓝色——方便您轻松将其调整为您品牌的专属色彩。

截图

请求新组件

您有新的组件创意吗？我们非常期待听到您的想法！只需前往我们的 GitHub 仓库 提交您的组件请求。让我们携手合作，共同打造出令人惊艳的作品吧！

贡献

我们非常欢迎对 LangUI 的贡献！无论是修复 bug、新增组件还是进行改进，我们都感激您为 AI 社区让这个库变得更好的努力。请阅读我们的 贡献指南 开始参与。

许可证

LangUI 采用 MIT 许可证。

使用的技术

• Shades of Purple 主题，由 Ahmad Awais 提供语法高亮支持。
• Tabler Icons。

作者

最初由 Ahmad Bilal 撰写——Langbase 的创始工程师。

如有任何问题、集成需求或其他讨论，欢迎随时联系我们。

---

祝您使用 LangUI 为您的 AI 和 GPT 项目打造出色的用户界面！

🌟 如果您觉得有用，请别忘了在 GitHub 上给它点个星哦！星星就像一个个虚拟的拥抱，能给我们带来持续的动力！我们非常珍惜每一份支持。

如有任何疑问或问题，请随时在仓库中提交 issue。

祝编码愉快！😊

LangUI 快速上手指南

LangUI 是一套专为 AI 和 GPT 项目设计的开源 UI 组件库。它基于 Tailwind CSS，提供 60+ 个精美组件，支持复制粘贴式集成，帮助你快速构建类似 ChatGPT 的应用界面。

环境准备

LangUI 组件本身无需安装任何依赖或配置环境，只需具备以下基础条件即可使用：

• 开发环境：任意现代浏览器用于预览，代码编辑器（如 VS Code）。
• 项目框架：支持 HTML、React、Vue、Angular 等主流前端框架。
• 样式依赖：项目需已引入 Tailwind CSS（若未引入，需在项目中先行配置）。
• 部署可选：若使用 Docker 部署完整示例项目，需安装 Docker 及 Docker Compose。

安装步骤

方式一：复制粘贴组件（推荐）

这是 LangUI 的核心用法，无需克隆仓库或安装包：

1. 访问官网 LangUI.dev。
2. 浏览并选择你需要的组件（如聊天窗口、消息气泡等）。
3. 点击组件右上角的复制按钮，获取 HTML 或 JSX 代码。
4. 将代码直接粘贴到你项目的对应文件中。
5. 确保项目已加载 Tailwind CSS，组件即可立即渲染。

方式二：Docker 部署完整示例

如果你想直接运行一个完整的 LangUI 演示服务，可以使用 Docker：

使用预构建镜像（最快）：

docker run -d -t -p 3000:3000 --name langui --restart=always docker.io/wenyang0/langui:latest

或手动构建镜像：

# 克隆代码
git clone https://github.com/ahmadbilaldev/langui.git

# 进入目录并构建
cd langui/
docker build -t langui:v1 .

# 启动服务
docker run -d -t -p 3000:3000 --name langui --restart=always langui:v1

启动完成后，在浏览器访问 http://serverIP:3000 即可查看效果。

基本使用

以下是一个在 React 项目中使用 LangUI 聊天组件的最简示例：

1. 准备环境：确保你的 React 项目已配置 Tailwind CSS。
2. 获取代码：从官网复制一个 "Chat Message" 组件的 JSX 代码。
3. 集成代码：在你的组件文件中粘贴并使用。

// 示例：在你的 React 组件中直接使用
export default function ChatInterface() {
  return (
    <div className="flex flex-col space-y-4 p-4">
      {/* 粘贴自 LangUI 的消息组件代码 */}
      <div className="flex items-start space-x-3">
        <div className="bg-blue-100 rounded-full p-2">
          <!-- 图标内容 -->
        </div>
        <div className="bg-slate-100 dark:bg-slate-800 rounded-lg p-3 max-w-xs">
          <p className="text-sm text-slate-900 dark:text-slate-100">
            你好！我是你的 AI 助手，有什么可以帮你的吗？
          </p>
        </div>
      </div>
      {/* 更多消息... */}
    </div>
  );
}

自定义颜色： LangUI 默认使用 slate（灰）和 blue（蓝）双色盘。若要适配品牌色，只需在全局 Tailwind 配置中替换这两个颜色的色值，所有组件将自动更新。

一键部署： 构建完成后，你可将项目部署至 Langbase 或其他任意静态托管平台，快速上线你的 AI 应用。