[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-run-llama--chat-ui":3,"tool-run-llama--chat-ui":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",147882,2,"2026-04-09T11:32:47",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108111,"2026-04-08T11:23:26",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":77,"owner_email":77,"owner_twitter":78,"owner_website":79,"owner_url":80,"languages":81,"stars":94,"forks":95,"last_commit_at":96,"license":97,"difficulty_score":32,"env_os":98,"env_gpu":98,"env_ram":98,"env_deps":99,"category_tags":110,"github_topics":111,"view_count":32,"oss_zip_url":77,"oss_zip_packed_at":77,"status":17,"created_at":117,"updated_at":118,"faqs":119,"releases":160},5891,"run-llama\u002Fchat-ui","chat-ui","Chat UI components for LLM apps","chat-ui 是一个专为大语言模型（LLM）应用打造的 React 组件库，旨在帮助开发者快速构建功能完善的聊天界面。在开发 AI 对话应用时，从头设计消息气泡、输入框及代码高亮等交互元素往往耗时费力，chat-ui 通过提供一套开箱即用的预制组件，有效解决了这一痛点，让团队能将精力集中于核心业务逻辑而非界面重复建设。\n\n该工具主要面向前端工程师和全栈开发者，特别是那些正在使用 Vercel AI SDK 或 LlamaIndex 构建智能助手的技术人员。其核心亮点在于极高的灵活性与现代技术栈的深度融合：底层基于流行的 shadcn UI 和 Tailwind CSS，既保证了简洁美观的默认样式，又支持开发者通过 CSS 变量轻松定制主题；同时原生支持 TypeScript 类型安全，并内置了代码高亮（highlight.js）和数学公式渲染（KaTeX）等专业功能。\n\n更值得一提的是，chat-ui 采用了高度可组合的架构设计。开发者不仅可以一键集成完整的聊天模块，还能像搭积木一样拆解并使用独立的子组件，甚至通过自定义 Hook 轻松扩展如文件上传、模型选择器等个性化功能。无论是想","chat-ui 是一个专为大语言模型（LLM）应用打造的 React 组件库，旨在帮助开发者快速构建功能完善的聊天界面。在开发 AI 对话应用时，从头设计消息气泡、输入框及代码高亮等交互元素往往耗时费力，chat-ui 通过提供一套开箱即用的预制组件，有效解决了这一痛点，让团队能将精力集中于核心业务逻辑而非界面重复建设。\n\n该工具主要面向前端工程师和全栈开发者，特别是那些正在使用 Vercel AI SDK 或 LlamaIndex 构建智能助手的技术人员。其核心亮点在于极高的灵活性与现代技术栈的深度融合：底层基于流行的 shadcn UI 和 Tailwind CSS，既保证了简洁美观的默认样式，又支持开发者通过 CSS 变量轻松定制主题；同时原生支持 TypeScript 类型安全，并内置了代码高亮（highlight.js）和数学公式渲染（KaTeX）等专业功能。\n\n更值得一提的是，chat-ui 采用了高度可组合的架构设计。开发者不仅可以一键集成完整的聊天模块，还能像搭积木一样拆解并使用独立的子组件，甚至通过自定义 Hook 轻松扩展如文件上传、模型选择器等个性化功能。无论是想要快速验证原型的初创团队，还是追求精细控制的企业级项目，chat-ui 都能提供高效且优雅的界面解决方案。","# @llamaindex\u002Fchat-ui\n\nChat UI components for LLM apps\n\n## Overview\n\n@llamaindex\u002Fchat-ui is a React component library that provides ready-to-use UI elements for building chat interfaces in LLM (Large Language Model) applications. This package is designed to streamline the development of chat-based user interfaces for AI-powered applications.\n\n## Quick Start\n\nYou can quickly add a chatbot to your project by using Shadcn CLI command:\n\n```sh\nnpx shadcn@latest add https:\u002F\u002Fui.llamaindex.ai\u002Fr\u002Fchat.json\n```\n\n## Manual Installation\n\nTo install the package, run the following command in your project directory:\n\n```sh\nnpm install @llamaindex\u002Fchat-ui\n```\n\n## Features\n\n- Pre-built chat components (e.g., message bubbles, input fields)\n- Minimal styling, fully customizable with Tailwind CSS\n- Custom widgets to extend components (e.g., for rendering generated or retrieved documents)\n- TypeScript support for type safety\n- Easy integration with LLM backends like Vercel Ai\n- Code and Latex styling with highlight.js and katex\n\n## Usage\n\n1. Install the package\n\n```sh\nnpm install @llamaindex\u002Fchat-ui\n```\n\n2. Configure Tailwind CSS to include the chat-ui components\n\nFor Tailwind CSS version 4.x, update `globals.css` to include the chat-ui components (update the relative path to node_modules if necessary):\n\n```css\n@source '..\u002Fnode_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}';\n```\n\nFor Tailwind CSS version 3.x, you need to add the following to your `tailwind.config.ts` file:\n\n```ts\nmodule.exports = {\n  content: [\n    'app\u002F**\u002F*.{ts,tsx}',\n    'node_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}',\n  ],\n  \u002F\u002F ...\n}\n```\n\n3. Import the components and use them\n\nThe easiest way to get started is to connect the whole `ChatSection` component with `useChat` hook from [vercel\u002Fai](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fai):\n\n```tsx\nimport { ChatSection } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return \u003CChatSection handler={handler} \u002F>\n}\n```\n\nThis simple example looks like this:\n\n![output](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Frun-llama_chat-ui_readme_c5096e07d26f.png)\n\n## Component Composition\n\nComponents are designed to be composable. You can use them as is:\n\n```tsx\nimport { ChatSection } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return \u003CChatSection handler={handler} \u002F>\n}\n```\n\nOr you can extend them with your own children components:\n\n```tsx\nimport { ChatSection, ChatMessages, ChatInput } from '@llamaindex\u002Fchat-ui'\nimport LlamaCloudSelector from '.\u002Fcomponents\u002FLlamaCloudSelector' \u002F\u002F your custom component\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return (\n    \u003CChatSection handler={handler}>\n      \u003CChatMessages \u002F>\n      \u003CChatInput>\n        \u003CChatInput.Form className=\"bg-lime-500\">\n          \u003CChatInput.Field type=\"textarea\" \u002F>\n          \u003CChatInput.Upload \u002F>\n          \u003CLlamaCloudSelector \u002F> {\u002F* custom component *\u002F}\n          \u003CChatInput.Submit \u002F>\n        \u003C\u002FChatInput.Form>\n      \u003C\u002FChatInput>\n    \u003C\u002FChatSection>\n  )\n}\n```\n\nYour custom component can use the `useChatUI` hook to send additional data to the chat API endpoint:\n\n```tsx\nimport { useChatInput } from '@llamaindex\u002Fchat-ui'\n\nconst LlamaCloudSelector = () => {\n  const { requestData, setRequestData } = useChatUI()\n  return (\n    \u003Cdiv>\n      \u003Cselect\n        value={requestData?.model}\n        onChange={e => setRequestData({ model: e.target.value })}\n      >\n        \u003Coption value=\"llama-3.1-70b-instruct\">Pipeline 1\u003C\u002Foption>\n        \u003Coption value=\"llama-3.1-8b-instruct\">Pipeline 2\u003C\u002Foption>\n      \u003C\u002Fselect>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Styling\n\n### Components\n\n`chat-ui` components are based on [shadcn](https:\u002F\u002Fui.shadcn.com\u002F) components using Tailwind CSS.\n\nYou can override the default styles by changing CSS variables in the `globals.css` file of your Tailwind CSS configuration. For example, to change the background and foreground colors:\n\n```css\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n}\n```\n\nFor a list of all available CSS variables, please refer to the [Shadcn Theme Config](https:\u002F\u002Fui.shadcn.com\u002Fthemes).\n\nAdditionally, you can also override each component's styles by setting custom classes in the `className` prop. For example, setting the background color of the `ChatInput.Form` component:\n\n```tsx\nimport { ChatSection, ChatMessages, ChatInput } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return (\n    \u003CChatSection handler={handler}>\n      \u003CChatMessages \u002F>\n      \u003CChatInput>\n        \u003CChatInput.Preview \u002F>\n        \u003CChatInput.Form className=\"bg-lime-500\">\n          \u003CChatInput.Field type=\"textarea\" \u002F>\n          \u003CChatInput.Upload \u002F>\n          \u003CChatInput.Submit \u002F>\n        \u003C\u002FChatInput.Form>\n      \u003C\u002FChatInput>\n    \u003C\u002FChatSection>\n  )\n}\n```\n\n### Code and Latex styling\n\nInside the markdown component, we use [highlight.js](https:\u002F\u002Fhighlightjs.org\u002F) for code blocks, [katex](https:\u002F\u002Fkatex.org\u002F) for latex, and [pdf-viewer](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fpdf-viewer) for pdf files.\nIf your app is using code, latex or pdf files, you'll need to import their CSS files:\n\n```tsx\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fmarkdown.css' \u002F\u002F code, latex and custom markdown styling\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fpdf.css' \u002F\u002F pdf styling\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Feditor.css' \u002F\u002F document editor styling\n```\n\nThe `code.css` file uses the `atom-one-dark` theme from highlight.js by default. There are a lot of others to choose from: https:\u002F\u002Fhighlightjs.org\u002Fdemo\nYou can use any of them by copying [their CSS](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002Ftree\u002Fmain\u002Fsrc\u002Fstyles\u002F) to your project and importing it.\n\n## Language renderer support (e.g. mermaid)\n\nFor any language that the LLM generates, you can specify a custom renderer to render the output.\nWe have an example for how to render mermaid code as SVG using [a custom renderer](.\u002Fapps\u002Fweb\u002Fapp\u002Fdemo\u002Fmermaid\u002F).\n\n## Example\n\nSee the [example app](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fblob\u002Fmain\u002Fapps\u002Fweb\u002FREADME.md) for a complete example. The generate a full-featured project to\nget started with, use [create-llama](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fcreate-llama).\n\n## License\n\n@llamaindex\u002Fchat-ui is released under the [MIT License](LICENSE).\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on our [GitHub repository](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues).\n","# @llamaindex\u002Fchat-ui\n\n用于 LLM 应用的聊天 UI 组件\n\n## 概述\n\n@llamaindex\u002Fchat-ui 是一个 React 组件库，为构建 LLM（大型语言模型）应用中的聊天界面提供了开箱即用的 UI 元素。该包旨在简化基于聊天的 AI 驱动应用程序用户界面的开发。\n\n## 快速开始\n\n您可以通过使用 Shadcn CLI 命令快速将聊天机器人添加到您的项目中：\n\n```sh\nnpx shadcn@latest add https:\u002F\u002Fui.llamaindex.ai\u002Fr\u002Fchat.json\n```\n\n## 手动安装\n\n要在您的项目目录中安装该包，请运行以下命令：\n\n```sh\nnpm install @llamaindex\u002Fchat-ui\n```\n\n## 功能特性\n\n- 预建的聊天组件（例如消息气泡、输入框）\n- 极简样式，可使用 Tailwind CSS 完全自定义\n- 自定义小部件以扩展组件（例如用于渲染生成或检索的文档）\n- TypeScript 支持，确保类型安全\n- 易于与 Vercel Ai 等 LLM 后端集成\n- 使用 highlight.js 和 katex 进行代码和 LaTeX 渲染\n\n## 使用方法\n\n1. 安装包\n\n```sh\nnpm install @llamaindex\u002Fchat-ui\n```\n\n2. 配置 Tailwind CSS 以包含 chat-ui 组件\n\n对于 Tailwind CSS 4.x 版本，请更新 `globals.css` 文件以包含 chat-ui 组件（如有必要，请更新指向 node_modules 的相对路径）：\n\n```css\n@source '..\u002Fnode_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}';\n```\n\n对于 Tailwind CSS 3.x 版本，您需要在 `tailwind.config.ts` 文件中添加以下内容：\n\n```ts\nmodule.exports = {\n  content: [\n    'app\u002F**\u002F*.{ts,tsx}',\n    'node_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}',\n  ],\n  \u002F\u002F ...\n}\n```\n\n3. 导入组件并使用\n\n最简单的入门方式是将整个 `ChatSection` 组件与来自 [vercel\u002Fai](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fai) 的 `useChat` 钩子连接起来：\n\n```tsx\nimport { ChatSection } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return \u003CChatSection handler={handler} \u002F>\n}\n```\n\n这个简单示例的效果如下所示：\n\n![output](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Frun-llama_chat-ui_readme_c5096e07d26f.png)\n\n## 组件组合\n\n组件被设计为可组合的。您可以直接使用它们：\n\n```tsx\nimport { ChatSection } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return \u003CChatSection handler={handler} \u002F>\n}\n```\n\n或者您也可以通过自己的子组件来扩展它们：\n\n```tsx\nimport { ChatSection、ChatMessages、ChatInput } from '@llamaindex\u002Fchat-ui'\nimport LlamaCloudSelector from '.\u002Fcomponents\u002FLlamaCloudSelector' \u002F\u002F 您的自定义组件\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return (\n    \u003CChatSection handler={handler}>\n      \u003CChatMessages \u002F>\n      \u003CChatInput>\n        \u003CChatInput.Form className=\"bg-lime-500\">\n          \u003CChatInput.Field type=\"textarea\" \u002F>\n          \u003CChatInput.Upload \u002F>\n          \u003CLlamaCloudSelector \u002F> {\u002F* 自定义组件 *\u002F}\n          \u003CChatInput.Submit \u002F>\n        \u003C\u002FChatInput.Form>\n      \u003C\u002FChatInput>\n    \u003C\u002FChatSection>\n  )\n}\n```\n\n您的自定义组件可以使用 `useChatUI` 钩子向聊天 API 端点发送额外的数据：\n\n```tsx\nimport { useChatInput } from '@llamaindex\u002Fchat-ui'\n\nconst LlamaCloudSelector = () => {\n  const { requestData、setRequestData } = useChatUI()\n  return (\n    \u003Cdiv>\n      \u003Cselect\n        value={requestData?.model}\n        onChange={e => setRequestData({ model: e.target.value })}\n      >\n        \u003Coption value=\"llama-3.1-70b-instruct\">Pipeline 1\u003C\u002Foption>\n        \u003Coption value=\"llama-3.1-8b-instruct\">Pipeline 2\u003C\u002Foption>\n      \u003C\u002Fselect>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## 样式\n\n### 组件\n\n`chat-ui` 组件基于 [shadcn](https:\u002F\u002Fui.shadcn.com\u002F) 组件，并使用 Tailwind CSS 实现。\n\n您可以通过更改 Tailwind CSS 配置中 `globals.css` 文件中的 CSS 变量来覆盖默认样式。例如，要更改背景色和前景色：\n\n```css\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n}\n```\n\n有关所有可用 CSS 变量的列表，请参阅 [Shadcn 主题配置](https:\u002F\u002Fui.shadcn.com\u002Fthemes)。\n\n此外，您还可以通过在 `className` 属性中设置自定义类来覆盖每个组件的样式。例如，设置 `ChatInput.Form` 组件的背景颜色：\n\n```tsx\nimport { ChatSection、ChatMessages、ChatInput } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return (\n    \u003CChatSection handler={handler}>\n      \u003CChatMessages \u002F>\n      \u003CChatInput>\n        \u003CChatInput.Preview \u002F>\n        \u003CChatInput.Form className=\"bg-lime-500\">\n          \u003CChatInput.Field type=\"textarea\" \u002F>\n          \u003CChatInput.Upload \u002F>\n          \u003CChatInput.Submit \u002F>\n        \u003C\u002FChatInput.Form>\n      \u003C\u002FChatInput>\n    \u003C\u002FChatSection>\n  )\n}\n```\n\n### 代码和 LaTeX 样式\n\n在 markdown 组件中，我们使用 [highlight.js](https:\u002F\u002Fhighlightjs.org\u002F) 处理代码块，[katex](https:\u002F\u002Fkatex.org\u002F) 处理 LaTeX，以及 [pdf-viewer](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fpdf-viewer) 处理 PDF 文件。\n如果您的应用涉及代码、LaTeX 或 PDF 文件，您需要导入相应的 CSS 文件：\n\n```tsx\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fmarkdown.css' \u002F\u002F 代码、LaTeX 和自定义 Markdown 样式\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fpdf.css' \u002F\u002F PDF 样式\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Feditor.css' \u002F\u002F 文档编辑器样式\n```\n\n`code.css` 文件默认使用 highlight.js 的 `atom-one-dark` 主题。还有许多其他主题可供选择：https:\u002F\u002Fhighlightjs.org\u002Fdemo\n您可以将其中任何一种的主题 CSS（位于 [highlight.js 官方仓库](https:\u002F\u002Fgithub.com\u002Fhighlightjs\u002Fhighlight.js\u002Ftree\u002Fmain\u002Fsrc\u002Fstyles\u002F)）复制到您的项目中并导入使用。\n\n## 语言渲染器支持（例如 mermaid）\n\n对于 LLM 生成的任何语言，您可以指定自定义渲染器来呈现输出。\n我们提供了一个示例，说明如何使用 [自定义渲染器](.\u002Fapps\u002Fweb\u002Fapp\u002Fdemo\u002Fmermaid\u002F) 将 mermaid 代码渲染为 SVG。\n\n## 示例\n\n请参阅 [示例应用](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fblob\u002Fmain\u002Fapps\u002Fweb\u002FREADME.md)，以获取完整的示例。如果您想快速生成一个功能齐全的项目来开始使用，可以使用 [create-llama](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fcreate-llama)。\n\n## 许可证\n\n@llamaindex\u002Fchat-ui 采用 [MIT 许可证](LICENSE) 发布。\n\n## 支持\n\n如果您遇到任何问题或有任何疑问，请在我们的 [GitHub 仓库](https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues) 中提交问题。","# @llamaindex\u002Fchat-ui 快速上手指南\n\n`@llamaindex\u002Fchat-ui` 是一个专为 LLM（大语言模型）应用设计的 React 组件库，提供开箱即用的聊天界面元素。它基于 Shadcn UI 和 Tailwind CSS，支持 TypeScript，并能轻松集成 Vercel AI 等后端。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **Node.js**: 建议版本 18+\n*   **框架**: React 项目 (支持 Next.js, Vite 等)\n*   **样式工具**: 必须安装并配置 **Tailwind CSS**\n*   **包管理器**: npm, yarn, pnpm 或 bun\n\n## 安装步骤\n\n你可以选择通过 Shadcn CLI 快速添加，或手动安装 npm 包。\n\n### 方式一：使用 Shadcn CLI（推荐）\n\n如果你正在使用 Shadcn UI，可以直接运行以下命令将组件添加到项目中：\n\n```sh\nnpx shadcn@latest add https:\u002F\u002Fui.llamaindex.ai\u002Fr\u002Fchat.json\n```\n\n### 方式二：手动安装\n\n在项目根目录下运行以下命令安装核心包：\n\n```sh\nnpm install @llamaindex\u002Fchat-ui\n```\n\n> **注意**：如果国内访问 npm 源较慢，可临时切换至淘宝镜像源：\n> `npm config set registry https:\u002F\u002Fregistry.npmmirror.com`\n\n### 配置 Tailwind CSS\n\n安装完成后，需配置 Tailwind 以扫描 `@llamaindex\u002Fchat-ui` 中的样式文件。根据你的 Tailwind 版本选择对应配置：\n\n**Tailwind CSS v4.x**\n更新 `globals.css` 文件，添加 source 路径：\n\n```css\n@source '..\u002Fnode_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}';\n```\n*(注：请根据实际项目结构调整相对路径)*\n\n**Tailwind CSS v3.x**\n更新 `tailwind.config.ts` (或 `.js`) 文件，在 `content` 数组中添加路径：\n\n```ts\nmodule.exports = {\n  content: [\n    'app\u002F**\u002F*.{ts,tsx}',\n    'node_modules\u002F@llamaindex\u002Fchat-ui\u002F**\u002F*.{ts,tsx}',\n  ],\n  \u002F\u002F ...其他配置\n}\n```\n\n## 基本使用\n\n最简单的用法是将 `ChatSection` 组件与 `@ai-sdk\u002Freact` 提供的 `useChat` Hook 结合。\n\n1.  **安装 Vercel AI SDK** (如果尚未安装):\n    ```sh\n    npm install @ai-sdk\u002Freact ai\n    ```\n\n2.  **编写代码**:\n    在你的 React 组件中引入并使用：\n\n```tsx\nimport { ChatSection } from '@llamaindex\u002Fchat-ui'\nimport { useChat } from '@ai-sdk\u002Freact'\n\nconst ChatExample = () => {\n  const handler = useChat()\n  return \u003CChatSection handler={handler} \u002F>\n}\n```\n\n此代码将渲染一个包含消息气泡、输入框和提交按钮的完整聊天界面，并自动处理与后端的通信。\n\n### 进阶：自定义样式与功能\n\n如果需要渲染代码块、LaTeX 公式或 PDF 文件，请在入口文件（如 `layout.tsx` 或 `main.tsx`）中导入相应的样式文件：\n\n```tsx\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fmarkdown.css' \u002F\u002F 代码高亮、LaTeX 及 Markdown 样式\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Fpdf.css'     \u002F\u002F PDF 预览样式\nimport '@llamaindex\u002Fchat-ui\u002Fstyles\u002Feditor.css'  \u002F\u002F 文档编辑器样式\n```\n\n你可以通过传递 `className` 属性覆盖默认样式，或通过组合子组件（如 `ChatInput.Form`, `ChatInput.Field` 等）构建完全自定义的聊天布局。","某初创团队正在开发一款面向法律从业者的 AI 合同审查助手，需要快速构建一个支持多模型切换和文档上传的专业聊天界面。\n\n### 没有 chat-ui 时\n- 前端工程师需从零手写消息气泡、输入框及加载状态等基础组件，耗费大量时间重复造轮子。\n- 难以统一处理代码高亮和 LaTeX 公式渲染，导致法律条款中的复杂格式显示错乱或无法阅读。\n- 自定义功能（如选择不同审查模型 Pipeline）与聊天上下文数据打通困难，需编写大量样板代码连接状态。\n- 界面风格难以快速适配 Tailwind CSS 设计系统，整体 UI 显得粗糙且缺乏专业感，影响用户信任度。\n- 缺乏类型安全支持，在对接 Vercel AI 后端时频繁出现参数传递错误，调试成本极高。\n\n### 使用 chat-ui 后\n- 直接通过 Shadcn CLI 一键引入 `ChatSection` 等预建组件，将界面开发周期从数天缩短至几小时。\n- 内置 highlight.js 和 katex 支持，自动完美渲染合同中的代码片段与数学公式，确保内容清晰可读。\n- 利用 `useChatUI` Hook 轻松扩展自定义组件（如模型选择器），无缝将额外参数注入 API 请求，逻辑简洁清晰。\n- 基于 Shadcn 和 Tailwind CSS 构建，默认样式美观且极易定制，快速打造出符合法律行业调性的高端界面。\n- 原生 TypeScript 支持保障了与后端交互的类型安全，显著减少运行时错误，提升开发体验与稳定性。\n\nchat-ui 让开发者能跳过繁琐的 UI 基建，专注于核心业务逻辑，以最低成本交付生产级的大模型应用界面。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Frun-llama_chat-ui_c5096e07.gif","run-llama","LlamaIndex","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Frun-llama_725504c7.png","",null,"llama_index","https:\u002F\u002Fllamaindex.ai","https:\u002F\u002Fgithub.com\u002Frun-llama",[82,86,90],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",90,{"name":87,"color":88,"percentage":89},"CSS","#663399",8.2,{"name":91,"color":92,"percentage":93},"JavaScript","#f1e05a",1.7,575,56,"2026-04-08T19:03:18","MIT","未说明",{"notes":100,"python":98,"dependencies":101},"这是一个前端 React 组件库，用于构建 LLM 应用的聊天界面，而非后端模型运行环境。它依赖 Node.js 环境（具体版本未说明），需配合 Tailwind CSS 进行样式配置。支持代码高亮、LaTeX 公式渲染及 PDF 预览功能。通常与 Vercel AI SDK 或 LlamaIndex 后端配合使用。",[102,103,104,105,106,107,108,109],"react","typescript","tailwindcss","@ai-sdk\u002Freact","highlight.js","katex","@llamaindex\u002Fpdf-viewer","shadcn\u002Fui",[35,13,14,15],[112,113,114,115,116,102],"ai","chat","components","llm","nextjs","2026-03-27T02:49:30.150509","2026-04-09T21:34:18.050811",[120,125,130,135,140,145,150,155],{"id":121,"question_zh":122,"answer_zh":123,"source_url":124},26734,"运行构建或开发服务器时出现 'Module not found: Can't resolve @llamaindex\u002Fchat-ui\u002Fstyles\u002F...' 错误怎么办？","这是因为样式文件在运行前未被复制。请进入 `chat-ui` 包目录并运行以下命令来准备样式：\n\n```bash\ncd packages\u002Fchat-ui\npnpm run build:css\npnpm run copy-fonts\n```\n\n注意：在 Windows 上运行 `copy-fonts` 可能会失败，因为默认使用 `cp` 命令。如果遇到 `'cp' is not recognized` 错误，可能需要手动复制字体文件或等待官方修复自动复制脚本。","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F76",{"id":126,"question_zh":127,"answer_zh":128,"source_url":129},26735,"遇到 'Named export ... not found' 或 CommonJS 模块导入错误如何解决？","该问题通常与 `swc` 辅助工具的安装版本有关。如果通过 `npm install @swc\u002Fhelpers` 安装的是旧版本，会导致此错误。\n\n解决方法是安装最新版本的 swc 辅助工具：\n```bash\nnpm install --save-dev @swc\u002Fhelpers@latest\n```","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F154",{"id":131,"question_zh":132,"answer_zh":133,"source_url":134},26736,"如何正确导入和使用 Markdown 组件？","文档可能已过时。现在在聊天中渲染 Markdown 无需单独导入组件，直接使用 `\u003CChatMessage.Content.Markdown \u002F>` 即可。\n\n如果您需要使用独立的 Markdown 组件，可以从 widgets 子路径导入：\n```typescript\nimport { Markdown } from \"@llamaindex\u002Fchat-ui\u002Fwidgets\";\n```","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F67",{"id":136,"question_zh":137,"answer_zh":138,"source_url":139},26737,"代码块（CodeBlock）头部与内容重叠怎么办？","这是一个已知的 CSS 问题，已在 `@llamaindex\u002Fchat` 版本 0.4.2 中修复。请升级您的依赖版本：\n\n```bash\nnpm install @llamaindex\u002Fchat@0.4.2\n# 或\npnpm add @llamaindex\u002Fchat@0.4.2\n```\n\n如果暂时无法升级，可以使用以下 CSS 作为临时解决方案：\n```css\n.codeblock > div:first-child {\n  position: relative !important;\n}\n.codeblock code {\n  padding-top: 0 !important;\n}\n```","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F78",{"id":141,"question_zh":142,"answer_zh":143,"source_url":144},26738,"useWorkflow 钩子的状态在收到第一个事件前一直是 undefined 吗？","是的，在旧版本中存在此行为。该问题已在 `@llamaindex\u002Fchat-ui` 版本 0.5.11 中修复。更新后，任务启动后状态会自动设置为 `running`，无需等待第一个事件流。\n\n请升级包版本：\n```bash\nnpm install @llamaindex\u002Fchat-ui@0.5.11\n```","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F148",{"id":146,"question_zh":147,"answer_zh":148,"source_url":149},26739,"如何在聊天界面中支持 Mermaid 图表渲染？","目前原生 CodeBlock 可能无法直接识别 'mermaid' 语言并回退到无高亮模式。虽然官方已意识到此需求并鼓励提交 PR，但您可以参考 Mermaid 官方文档 (https:\u002F\u002Fmermaid.js.org\u002Fconfig\u002Fusage.html) 集成渲染逻辑，或者自定义 CodeBlock 组件以加载 mermaid.js 库来处理特定语言块。","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F83",{"id":151,"question_zh":152,"answer_zh":153,"source_url":154},26740,"如何在项目中启用对 Vercel AI SDK v5 的支持？","项目已发布新版本以支持 Vercel AI SDK v5（这对于使用最新的 GPT-5 等模型是必需的）。请确保将相关依赖包更新至最新版本即可自动获得支持。","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F177",{"id":156,"question_zh":157,"answer_zh":158,"source_url":159},26741,"在 Windows 上使用日语输入法（IME）时，按 Enter 键会发送未完成的消息怎么办？","这是一个关于 IME 组合状态检测的问题。当用户正在输入日语（IME 处于组合状态）时，按 Enter 键应当确认字符选择而不是发送消息。如果当前版本存在此问题，建议检查是否有更新的补丁版本，或在自定义输入组件时添加对 `isComposing` 事件的监听，仅在 `!event.nativeEvent.isComposing` 时触发发送逻辑。","https:\u002F\u002Fgithub.com\u002Frun-llama\u002Fchat-ui\u002Fissues\u002F60",[161,166,171,175,180,184,189,194,199,204,209,214,219,224,229,234,238,243,248,253],{"id":162,"version":163,"summary_zh":164,"released_at":165},171954,"@llamaindex\u002Fchat-ui@0.6.1","### 补丁变更\n\n-   b092d5e：公开 ReactMarkdown 的 `components` 属性\n","2025-08-28T02:20:39",{"id":167,"version":168,"summary_zh":169,"released_at":170},171955,"@llamaindex\u002Fdynamic-ui@1.0.1","### 补丁变更\n\n-   更新了依赖项 [b092d5e]\n    -   @llamaindex\u002Fchat-ui@0.6.1\n","2025-08-28T02:20:36",{"id":172,"version":173,"summary_zh":169,"released_at":174},171956,"@llamaindex\u002Fserver@0.4.1","2025-08-28T02:20:33",{"id":176,"version":177,"summary_zh":178,"released_at":179},171957,"@llamaindex\u002Fchat-ui@0.6.0","### 小幅改动\n\n-   1ceb4ba：支持 Vercel AI SDK 5.0 版本\n","2025-08-13T03:50:12",{"id":181,"version":182,"summary_zh":178,"released_at":183},171958,"@llamaindex\u002Fchat-ui-docs@0.1.0","2025-08-13T03:50:09",{"id":185,"version":186,"summary_zh":187,"released_at":188},171959,"@llamaindex\u002Fserver@0.4.0","### 小改动\n\n-   1ceb4ba：支持 Vercel AI SDK 版本 5\n\n### 补丁更新\n\n-   更新了依赖项 [1ceb4ba]\n    -   @llamaindex\u002Fchat-ui@0.6.0\n","2025-08-13T03:50:07",{"id":190,"version":191,"summary_zh":192,"released_at":193},171960,"@llamaindex\u002Fdynamic-ui@1.0.0","### 补丁变更\n\n-   更新了依赖项 [1ceb4ba]\n    -   @llamaindex\u002Fchat-ui@0.6.0\n","2025-08-13T03:50:04",{"id":195,"version":196,"summary_zh":197,"released_at":198},171961,"@llamaindex\u002Fserver@0.3.3","### 补丁变更\n\n-   682e836：修复：eject 导致更改集发布失败的问题\n","2025-07-21T09:44:00",{"id":200,"version":201,"summary_zh":202,"released_at":203},171962,"@llamaindex\u002Fdynamic-ui@0.0.3","### 补丁变更\n\n-   3991a1d：修复：支持 Recharts\n","2025-07-11T03:39:48",{"id":205,"version":206,"summary_zh":207,"released_at":208},171963,"@llamaindex\u002Fchat-ui@0.5.16","### 补丁变更\n\n-   709a5d3：为神器使用主题颜色\n","2025-07-10T08:44:40",{"id":210,"version":211,"summary_zh":212,"released_at":213},171964,"@llamaindex\u002Fdynamic-ui@0.0.2","### Patch Changes\n\n-   284ff69: feat: @llamaindex\u002Fdynamic-ui\n","2025-07-10T08:44:37",{"id":215,"version":216,"summary_zh":217,"released_at":218},171965,"@llamaindex\u002Fchat-ui@0.5.15","### Patch Changes\n\n-   62955a6: fix(useWorkflow): handle incomplete chunk from llama-deploy workflow and retry parsing\n","2025-07-09T07:56:44",{"id":220,"version":221,"summary_zh":222,"released_at":223},171966,"@llamaindex\u002Fchat-ui@0.5.14","### Patch Changes\n\n-   8bc761b: fix: allow markdown under custom renderer\n","2025-07-09T02:12:36",{"id":225,"version":226,"summary_zh":227,"released_at":228},171967,"@llamaindex\u002Fchat-ui@0.5.13","### Patch Changes\n\n-   db881e1: feat: support display image in document editor\n","2025-07-02T04:39:48",{"id":230,"version":231,"summary_zh":232,"released_at":233},171968,"@llamaindex\u002Fchat-ui-docs@0.0.8","### Patch Changes\n\n-   f28cb7e: feat: add llamadexploy + ts-server example\n","2025-07-01T06:57:50",{"id":235,"version":236,"summary_zh":232,"released_at":237},171969,"@llamaindex\u002Fchat-ui@0.5.12","2025-07-01T06:57:47",{"id":239,"version":240,"summary_zh":241,"released_at":242},171970,"@llamaindex\u002Fchat-ui@0.5.11","### Patch Changes\n\n-   05dbe25: set the run status to running as soon as event streaming starts\n-   84a67d3: Fix: Prevents incorrect input commitment when selecting IME candidates\n","2025-06-27T05:52:16",{"id":244,"version":245,"summary_zh":246,"released_at":247},171971,"@llamaindex\u002Fchat-ui@0.5.10","### Patch Changes\n\n-   b15d152: feat: useChatWorkflow\n","2025-06-25T07:37:17",{"id":249,"version":250,"summary_zh":251,"released_at":252},171972,"@llamaindex\u002Fchat-ui@0.5.9","### Patch Changes\n\n-   fe679c4: fix: baseUrl should be optional for llama deploy\n","2025-06-19T09:26:46",{"id":254,"version":255,"summary_zh":256,"released_at":257},171973,"@llamaindex\u002Fchat-ui@0.5.8","### Patch Changes\n\n-   d544d57: feat: specify workflow to run of the given deployment\n","2025-06-19T07:19:31"]