[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-CommandCodeAI--langui":3,"tool-CommandCodeAI--langui":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},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,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},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 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},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 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":70,"readme_en":71,"readme_zh":72,"quickstart_zh":73,"use_case_zh":74,"hero_image_url":75,"owner_login":76,"owner_name":77,"owner_avatar_url":78,"owner_bio":79,"owner_company":80,"owner_location":80,"owner_email":81,"owner_twitter":76,"owner_website":82,"owner_url":83,"languages":84,"stars":105,"forks":106,"last_commit_at":107,"license":108,"difficulty_score":23,"env_os":109,"env_gpu":110,"env_ram":110,"env_deps":111,"category_tags":114,"github_topics":115,"view_count":23,"oss_zip_url":80,"oss_zip_packed_at":80,"status":16,"created_at":125,"updated_at":126,"faqs":127,"releases":162},2351,"CommandCodeAI\u002Flangui","langui","UI for your AI. Open Source Tailwind components tailored for your GPT, generative AI, and LLM projects.","LangUI 是一套专为生成式 AI、大语言模型（LLM）及 GPT 项目打造的开源用户界面组件库。它旨在解决开发者在构建 AI 应用时，往往需要耗费大量精力设计聊天界面、消息气泡和加载状态等 UI 元素的痛点，让团队能更专注于核心算法与业务逻辑的开发。\n\n这套工具非常适合前端开发者、全栈工程师以及希望快速原型化的 AI 创业团队使用。无论是构建类似 ChatGPT 的对话机器人，还是集成智能助手功能，LangUI 都能提供即拿即用的解决方案。其最大的技术亮点在于“零依赖”的复制粘贴式集成：无需安装复杂的 npm 包或进行繁琐配置，只需从官网复制 HTML 或 JSX 代码片段，即可直接嵌入到 React、Vue、Angular 等各类项目中。\n\nLangUI 基于 Tailwind CSS 构建，提供了 60 多个精美组件，原生支持深色与浅色模式切换，并确保在所有设备上完美响应。此外，它采用极简的双色板设计，方便开发者轻松定制以匹配品牌色调。作为 MIT 许可的完全免费开源项目，LangUI 不仅降低了 AI 应用的开发门槛，也为社区贡献者提供了灵活的扩展空间，是加速 AI 产品落地","LangUI 是一套专为生成式 AI、大语言模型（LLM）及 GPT 项目打造的开源用户界面组件库。它旨在解决开发者在构建 AI 应用时，往往需要耗费大量精力设计聊天界面、消息气泡和加载状态等 UI 元素的痛点，让团队能更专注于核心算法与业务逻辑的开发。\n\n这套工具非常适合前端开发者、全栈工程师以及希望快速原型化的 AI 创业团队使用。无论是构建类似 ChatGPT 的对话机器人，还是集成智能助手功能，LangUI 都能提供即拿即用的解决方案。其最大的技术亮点在于“零依赖”的复制粘贴式集成：无需安装复杂的 npm 包或进行繁琐配置，只需从官网复制 HTML 或 JSX 代码片段，即可直接嵌入到 React、Vue、Angular 等各类项目中。\n\nLangUI 基于 Tailwind CSS 构建，提供了 60 多个精美组件，原生支持深色与浅色模式切换，并确保在所有设备上完美响应。此外，它采用极简的双色板设计，方便开发者轻松定制以匹配品牌色调。作为 MIT 许可的完全免费开源项目，LangUI 不仅降低了 AI 应用的开发门槛，也为社区贡献者提供了灵活的扩展空间，是加速 AI 产品落地的理想选择。","\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.LangUI.dev\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_6c255df158c5.png\" alt=\"LangUI Logo\">\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Ch3 align=\"center\">The perfect UI for your AI — Build & Deploy your own ChatGPT\u003C\u002Fh3>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FLangbaseInc\u002FLangUI\u002Fstargazers\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FLangbaseInc\u002Flangui?style=for-the-badge&label=%E2%98%85%20STAR%20US&color=%23000000\" alt=\"GitHub Stars\">\n  \u003C\u002Fa>\n  \u003Ca aria-label=\"License\" href=\"https:\u002F\u002Fgithub.com\u002FLangbaseInc\u002Flangui\u002Fblob\u002Fmain\u002FLICENSE\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg?style=for-the-badge&color=%23000000\" alt=\"License\">\n  \u003C\u002Fa>\n  \u003Ca aria-label=\"Langbase logo\" href=\"https:\u002F\u002Fbeta.langbase.com\u002F\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDEPLOY%20ON-%E2%8C%98%20Langbase-000000.svg?style=for-the-badge&logo=%E2%8C%98%20Langbase&logoColor=000000\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Chr\u002F>\n\nTrusted by some of the world's largest companies, developers, and investors, [LangUI](https:\u002F\u002Fwww.LangUI.dev) is a set of beautifully designed components that you can copy and paste to build your own ChatGPT. Free. Customizable. Open Source. \n\n[LangUI](https:\u002F\u002Fwww.LangUI.dev) is powered by Tailwind CSS with free components tailored for your AI and GPT projects. It offers a collection of beautiful, ready-to-use components to enhance the user interface of your AI applications, allowing you to focus on building the next best project while leaving the UI to LangUI.\n\n> ⭐️ LangUI is Open Source and its 60+ components are completely free. Please star it to show your support!\n\n![LangUI](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_79de404ba06f.png)\n\n## Documentation\n\nFor documentation and components, visit [LangUI.dev](https:\u002F\u002Fwww.langui.dev\u002F).\n\n## Get Started\n\n- LangUI components are ready-to-use, meaning you don't need to install or configure anything.\n\n- Browse [LangUI.dev](https:\u002F\u002Fwww.langui.dev\u002F) and select a comopnent.\n\n- Copy the desired component's code in HTML or JSX from the LangUI documentation.\n\n- Paste the code into your project's HTML or React\u002FVue\u002FAngular components. Done.\n\n- **⌘ Deploy**: You can [deploy](https:\u002F\u002Fbeta.langbase.com\u002F) your own ChatGPT built with LangUI on [Langbase.com by creating a chat pipe](https:\u002F\u002Flangbase.com\u002Fdocs\u002Fpipe\u002Fquickstart).\n\n## Docker deploy\n\nYou can directly run using the image I have already built.\n```sh\ndocker run -d -t -p 3000:3000 --name langui --restart=always docker.io\u002Fwenyang0\u002Flangui:latest\n```\n\nOr, you can manually compile it yourself if you prefer.\n\n```sh\n#clone the code \ngit clone https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002Flangui.git\n\n#docker build \ncd langui\u002F\ndocker build -t langui:v1 .\n\n#start server \ndocker run -d -t -p 3000:3000 --name langui --restart=always langui:v1\n```\nFinally, open your browser and access the service's address at http:\u002F\u002FserverIP:3000\n\n## Features\n\n- **Copy & Paste Integration**: Zero installations or dependencies! Simply choose your desired component, copy, and paste it into your project.\n\n- **Open Source & Free**: LangUI is MIT licensed, making it suitable for both personal and commercial projects. Feel free to contribute and support us by starring LangUI on GitHub.\n\n- **Dark & Light Modes**: All LangUI components support light & dark modes and are carefully designed to look the best across both modes.\n\n- **Fully Responsive**: LangUI components are responsive, ensuring they look fantastic on any screen size or device.\n\n- **Easy Customization**: LangUI uses a two-color-only pallete. The two color pallete - slate and blue - allows for effortless customization into your brand's colors.\n\n## Screenshots\n\n![Components](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_311f40c1ae69.png)\n\n![Preview Component](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_f68fcdeee2a1.png)\n\n## Request a component\n\nHave an idea for a new component? We'd love to hear from you! Simply head over to our [GitHub repository](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002FLangUI) and submit your component request. Let's collaborate and cook up something spicy together!\n\n## Contributing\n\nContributions to LangUI are highly welcome! Whether it's bug fixes, new components, or improvements, we appreciate your support in making this library better for the AI community. Please read our [contribution guidelines](CONTRIBUTING.md) to get started.\n\n## License\n\nLangUI is licensed under the [MIT License](LICENSE).\n\n## Uses\n\n- [Shades of Purple Theme](https:\u002F\u002Fshadesofpurple.pro\u002F) by [Ahmad Awais](https:\u002F\u002Fahmadawais.com\u002F) for syntax highlighting\n\n- [Tabler Icons](https:\u002F\u002Ftabler-icons.io\u002F)\n\n## Authored By\n\nOriginally authored by [Ahmad Bilal](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev) – Founding Engineer at Langbase.\n\nFor questions, integrations, and other discussions, feel free to reach out. \n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\" target=\"_blank\">\n\u003Cimg src=https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fgithub-%2324292e.svg?&style=for-the-badge&logo=github&logoColor=white alt=github style=\"margin-bottom: 5px;\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Flinkedin.com\u002Fin\u002Fahmadbilaldev\" target=\"_blank\">\n\u003Cimg src=https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flinkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" \u002F>\n\u003C\u002Fa>\n\n---\n\nEnjoy using LangUI to build stunning UIs for your AI and GPT projects.\n\n🌟 If you find it helpful, don't forget to give it a star on GitHub! Stars are like little virtual hugs that keep us going! We appreciate every single one we receive.\n\nFor any queries or issues, feel free to open an [issue](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002FLangUI\u002Fissues) on the repository.\n\nHappy coding! 😊\n","\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.LangUI.dev\">\n    \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_6c255df158c5.png\" alt=\"LangUI Logo\">\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Ch3 align=\"center\">为您的 AI 打造完美 UI — 构建并部署属于您自己的 ChatGPT\u003C\u002Fh3>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FLangbaseInc\u002FLangUI\u002Fstargazers\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FLangbaseInc\u002Flangui?style=for-the-badge&label=%E2%98%85%20STAR%20US&color=%23000000\" alt=\"GitHub 星标\">\n  \u003C\u002Fa>\n  \u003Ca aria-label=\"许可证\" href=\"https:\u002F\u002Fgithub.com\u002FLangbaseInc\u002Flangui\u002Fblob\u002Fmain\u002FLICENSE\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg?style=for-the-badge&color=%23000000\" alt=\"许可证\">\n  \u003C\u002Fa>\n  \u003Ca aria-label=\"Langbase 标志\" href=\"https:\u002F\u002Fbeta.langbase.com\u002F\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDEPLOY%20ON-%E2%8C%98%20Langbase-000000.svg?style=for-the-badge&logo=%E2%8C%98%20Langbase&logoColor=000000\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Chr\u002F>\n\n[LangUI](https:\u002F\u002Fwww.LangUI.dev) 受到全球多家大型企业、开发者和投资者的信赖，它是一套设计精美的组件库，您可以直接复制粘贴来构建属于自己的 ChatGPT。免费、可定制、开源。\n\n[LangUI](https:\u002F\u002Fwww.LangUI.dev) 基于 Tailwind CSS 构建，提供专为 AI 和 GPT 项目量身打造的免费组件。它包含一系列美观且开箱即用的组件，能够显著提升您 AI 应用的用户界面体验，让您专注于打造下一个卓越项目，而将 UI 交由 LangUI 完成。\n\n> ⭐️ LangUI 是开源的，其 60 多个组件完全免费。请给它点个星以示支持！\n\n![LangUI](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_79de404ba06f.png)\n\n## 文档\n\n如需查看文档和组件，请访问 [LangUI.dev](https:\u002F\u002Fwww.langui.dev\u002F)。\n\n## 快速开始\n\n- LangUI 组件即插即用，无需安装或配置任何东西。\n\n- 浏览 [LangUI.dev](https:\u002F\u002Fwww.langui.dev\u002F) 并选择所需组件。\n\n- 从 LangUI 文档中复制所需的 HTML 或 JSX 代码。\n\n- 将代码粘贴到您项目的 HTML 或 React\u002FVue\u002FAngular 组件中。完成！\n\n- **⌘ 部署**：您可以在 [Langbase.com](https:\u002F\u002Flangbase.com\u002F) 上通过创建聊天管道，使用 LangUI 构建并部署属于您自己的 ChatGPT。\n\n## Docker 部署\n\n您可以直接使用我已构建好的镜像运行：\n```sh\ndocker run -d -t -p 3000:3000 --name langui --restart=always docker.io\u002Fwenyang0\u002Flangui:latest\n```\n\n或者，如果您愿意，也可以自行手动编译：\n```sh\n# 克隆代码\ngit clone https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002Flangui.git\n\n# 构建 Docker 镜像\ncd langui\u002F\ndocker build -t langui:v1 .\n\n# 启动服务\ndocker run -d -t -p 3000:3000 --name langui --restart=always langui:v1\n```\n\n最后，打开浏览器并访问服务地址 http:\u002F\u002FserverIP:3000 即可。\n\n## 特性\n\n- **复制粘贴集成**：无需任何安装或依赖！只需选择您需要的组件，复制并粘贴到您的项目中即可。\n\n- **开源且免费**：LangUI 采用 MIT 许可证，适用于个人和商业项目。欢迎通过在 GitHub 上给 LangUI 点赞来支持我们。\n\n- **深色与浅色模式**：所有 LangUI 组件均支持深色和浅色模式，并经过精心设计，在两种模式下都能呈现最佳效果。\n\n- **完全响应式**：LangUI 组件具有响应式布局，确保在任何屏幕尺寸或设备上都能展现出色的视觉效果。\n\n- **易于定制**：LangUI 使用仅两种颜色的配色方案——板岩色和蓝色——方便您轻松将其调整为您品牌的专属色彩。\n\n## 截图\n\n![组件](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_311f40c1ae69.png)\n\n![组件预览](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_readme_f68fcdeee2a1.png)\n\n## 请求新组件\n\n您有新的组件创意吗？我们非常期待听到您的想法！只需前往我们的 [GitHub 仓库](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002FLangUI) 提交您的组件请求。让我们携手合作，共同打造出令人惊艳的作品吧！\n\n## 贡献\n\n我们非常欢迎对 LangUI 的贡献！无论是修复 bug、新增组件还是进行改进，我们都感激您为 AI 社区让这个库变得更好的努力。请阅读我们的 [贡献指南](CONTRIBUTING.md) 开始参与。\n\n## 许可证\n\nLangUI 采用 [MIT 许可证](LICENSE)。\n\n## 使用的技术\n\n- [Shades of Purple 主题](https:\u002F\u002Fshadesofpurple.pro\u002F)，由 [Ahmad Awais](https:\u002F\u002Fahmadawais.com\u002F) 提供语法高亮支持。\n- [Tabler Icons](https:\u002F\u002Ftabler-icons.io\u002F)。\n\n## 作者\n\n最初由 [Ahmad Bilal](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev) 撰写——Langbase 的创始工程师。\n\n如有任何问题、集成需求或其他讨论，欢迎随时联系我们。\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\" target=\"_blank\">\n\u003Cimg src=https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fgithub-%2324292e.svg?&style=for-the-badge&logo=github&logoColor=white alt=github style=\"margin-bottom: 5px;\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Flinkedin.com\u002Fin\u002Fahmadbilaldev\" target=\"_blank\">\n\u003Cimg src=https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flinkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" \u002F>\n\u003C\u002Fa>\n\n---\n\n祝您使用 LangUI 为您的 AI 和 GPT 项目打造出色的用户界面！\n\n🌟 如果您觉得有用，请别忘了在 GitHub 上给它点个星哦！星星就像一个个虚拟的拥抱，能给我们带来持续的动力！我们非常珍惜每一份支持。\n\n如有任何疑问或问题，请随时在仓库中提交 [issue](https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002FLangUI\u002Fissues)。\n\n祝编码愉快！😊","# LangUI 快速上手指南\n\nLangUI 是一套专为 AI 和 GPT 项目设计的开源 UI 组件库。它基于 Tailwind CSS，提供 60+ 个精美组件，支持复制粘贴式集成，帮助你快速构建类似 ChatGPT 的应用界面。\n\n## 环境准备\n\nLangUI 组件本身**无需安装任何依赖或配置环境**，只需具备以下基础条件即可使用：\n\n- **开发环境**：任意现代浏览器用于预览，代码编辑器（如 VS Code）。\n- **项目框架**：支持 HTML、React、Vue、Angular 等主流前端框架。\n- **样式依赖**：项目需已引入 **Tailwind CSS**（若未引入，需在项目中先行配置）。\n- **部署可选**：若使用 Docker 部署完整示例项目，需安装 Docker 及 Docker Compose。\n\n## 安装步骤\n\n### 方式一：复制粘贴组件（推荐）\n\n这是 LangUI 的核心用法，无需克隆仓库或安装包：\n\n1. 访问官网 [LangUI.dev](https:\u002F\u002Fwww.langui.dev\u002F)。\n2. 浏览并选择你需要的组件（如聊天窗口、消息气泡等）。\n3. 点击组件右上角的复制按钮，获取 **HTML** 或 **JSX** 代码。\n4. 将代码直接粘贴到你项目的对应文件中。\n5. 确保项目已加载 Tailwind CSS，组件即可立即渲染。\n\n### 方式二：Docker 部署完整示例\n\n如果你想直接运行一个完整的 LangUI 演示服务，可以使用 Docker：\n\n**使用预构建镜像（最快）：**\n```sh\ndocker run -d -t -p 3000:3000 --name langui --restart=always docker.io\u002Fwenyang0\u002Flangui:latest\n```\n\n**或手动构建镜像：**\n```sh\n# 克隆代码\ngit clone https:\u002F\u002Fgithub.com\u002Fahmadbilaldev\u002Flangui.git\n\n# 进入目录并构建\ncd langui\u002F\ndocker build -t langui:v1 .\n\n# 启动服务\ndocker run -d -t -p 3000:3000 --name langui --restart=always langui:v1\n```\n\n启动完成后，在浏览器访问 `http:\u002F\u002FserverIP:3000` 即可查看效果。\n\n## 基本使用\n\n以下是一个在 React 项目中使用 LangUI 聊天组件的最简示例：\n\n1. **准备环境**：确保你的 React 项目已配置 Tailwind CSS。\n2. **获取代码**：从官网复制一个 \"Chat Message\" 组件的 JSX 代码。\n3. **集成代码**：在你的组件文件中粘贴并使用。\n\n```jsx\n\u002F\u002F 示例：在你的 React 组件中直接使用\nexport default function ChatInterface() {\n  return (\n    \u003Cdiv className=\"flex flex-col space-y-4 p-4\">\n      {\u002F* 粘贴自 LangUI 的消息组件代码 *\u002F}\n      \u003Cdiv className=\"flex items-start space-x-3\">\n        \u003Cdiv className=\"bg-blue-100 rounded-full p-2\">\n          \u003C!-- 图标内容 -->\n        \u003C\u002Fdiv>\n        \u003Cdiv className=\"bg-slate-100 dark:bg-slate-800 rounded-lg p-3 max-w-xs\">\n          \u003Cp className=\"text-sm text-slate-900 dark:text-slate-100\">\n            你好！我是你的 AI 助手，有什么可以帮你的吗？\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      {\u002F* 更多消息... *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**自定义颜色**：\nLangUI 默认使用 `slate`（灰）和 `blue`（蓝）双色盘。若要适配品牌色，只需在全局 Tailwind 配置中替换这两个颜色的色值，所有组件将自动更新。\n\n**一键部署**：\n构建完成后，你可将项目部署至 [Langbase](https:\u002F\u002Fbeta.langbase.com\u002F) 或其他任意静态托管平台，快速上线你的 AI 应用。","某初创团队正在开发一款面向法律行业的垂直领域 AI 助手，需要在两周内上线具备专业对话界面的 MVP（最小可行性产品）。\n\n### 没有 langui 时\n- **UI 开发耗时过长**：前端工程师需从零编写聊天气泡、加载动画和输入框样式，耗费大量时间调整 Tailwind CSS 类名，挤占了核心逻辑开发资源。\n- **视觉体验不统一**：自行设计的深色模式与浅色模式切换生硬，不同组件间的间距、圆角和字体大小缺乏一致性，显得不够专业。\n- **响应式适配困难**：在移动端测试时，对话框布局经常错位，需要反复编写媒体查询代码来适配不同屏幕尺寸。\n- **品牌定制繁琐**：想要将界面主色调从默认的蓝色调整为符合律所形象的深绿色，需要逐个修改数百行样式代码，极易出错。\n\n### 使用 langui 后\n- **即拷即用加速上线**：开发人员直接浏览 LangUI 官网，复制现成的“流式对话窗口”和“思考状态”组件代码粘贴至项目中，半天内即可完成高质量界面搭建。\n- **原生支持双模式切换**：LangUI 组件内置完美的深色与浅色模式支持，无需额外配置即可呈现精致统一的视觉效果，大幅提升用户信任感。\n- **全设备自动适配**：所有组件默认响应式设计，在手机、平板和桌面上均能完美展示，彻底消除了移动端布局调整的烦恼。\n- **极简品牌定制**：仅需修改 Slate 和 Blue 两个基础色值变量，整个应用瞬间切换为律所专属的深绿配色方案，维护成本极低。\n\nLangUI 让开发团队从繁琐的 UI 细节中解放出来，专注于法律大模型的核心调优，实现了产品从概念到上线的效率飞跃。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCommandCodeAI_langui_79de404b.png","CommandCodeAI","Command Code","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FCommandCodeAI_ed64086d.png","Command Code with your taste; the first coding agent that learns and adapts to your coding preferences over time using `taste-1` our meta neuro-symbolic AI.",null,"public@commandcode.ai","https:\u002F\u002FCommandCode.ai","https:\u002F\u002Fgithub.com\u002FCommandCodeAI",[85,89,93,97,101],{"name":86,"color":87,"percentage":88},"HTML","#e34c26",79.7,{"name":90,"color":91,"percentage":92},"JavaScript","#f1e05a",18.2,{"name":94,"color":95,"percentage":96},"MDX","#fcb32c",1.3,{"name":98,"color":99,"percentage":100},"CSS","#663399",0.6,{"name":102,"color":103,"percentage":104},"Dockerfile","#384d54",0.1,3133,157,"2026-04-02T22:43:33","MIT","Linux, macOS, Windows","未说明",{"notes":112,"python":110,"dependencies":113},"LangUI 是一个前端 UI 组件库，无需安装任何依赖或配置环境。用户只需从官网复制 HTML 或 JSX 代码粘贴到项目中即可使用。若需部署演示服务，可通过 Docker 运行（端口 3000），该场景下仅需支持 Docker 的操作系统，无特殊 GPU 或大内存需求。",[],[15,26],[116,117,118,119,120,121,122,123,124],"chat-ui","chatgpt","chatgpt-ui","gpt","gpt-3","gpt-4","gpt-ui","lang-chain","lang-ui","2026-03-27T02:49:30.150509","2026-04-06T05:19:28.989751",[128,133,138,143,148,153,158],{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},10804,"如何在 Vue、React 或 Angular 项目中使用 LangUI？","LangUI 组件是即开即用的，无需安装或配置任何特殊环境。只需浏览 LangUI.dev 网站，选择需要的组件，从文档中复制 HTML 或 JSX 代码，然后直接粘贴到你项目的 HTML 文件或 React\u002FVue\u002FAngular 组件中即可。你需要具备基础的 HTML 和 CSS 知识来将其集成到具体应用中。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F16",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},10805,"启动项目时遇到 'ENOENT: no such file or directory, open components.css.mdx' 错误怎么办？","这是因为缺少编译后的样式文件。请运行以下命令生成所需的 CSS 文件：\n`npm run css:components`\n或者使用 Tailwind CLI 手动生成：\n`npx tailwindcss -i src\u002Fstyles\u002Fcomponents.css -o public\u002Fcomponents.css -m`\n更多细节可参考项目的 CONTRIBUTING 指南。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F3",{"id":139,"question_zh":140,"answer_zh":141,"source_url":142},10806,"LangUI 能否与 Bootstrap 5 框架一起使用？是否存在样式冲突？","由于 LangUI 基于 Tailwind CSS，而 Bootstrap 5 也有自己的基础样式，可能会产生冲突。如果遇到样式问题（特别是涉及 RTL 方向的选择器样式），可以尝试在源文件的 `@layer base` 中移除相关指令来解决碰撞问题。具体文件路径通常为 `src\u002Fstyles\u002Fcomponents.css`。建议在实际项目中测试兼容性。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F6",{"id":144,"question_zh":145,"answer_zh":146,"source_url":147},10807,"在 Vue CLI + WindiCSS 项目中使用时组件没有样式显示，如何解决？","这通常是由于自定义配置（如 WindiCSS 的生命周期或关闭了 preflight）导致的兼容性问题。建议尝试切换到标准的 Tailwind CSS 配置进行测试。如果必须使用自定义配置，请确保 `tailwind.config.js` 正确包含了组件所需的内容路径，并检查是否意外禁用了必要的基础样式重置（preflight）。官方提供了一个在线 Playground 示例可供参考对比。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F14",{"id":149,"question_zh":150,"answer_zh":151,"source_url":152},10808,"如何构建或贡献修改后的组件样式？","如果你修改了组件的源代码并希望更新样式，需要运行构建命令来重新生成 CSS。请在项目根目录下执行：\n`npm run css:components`\n这将根据 `src\u002Fstyles\u002Fcomponents.css` 生成最终的样式文件。在进行贡献前，请务必阅读项目的 `CONTRIBUTING.md` 指南。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F10",{"id":154,"question_zh":155,"answer_zh":156,"source_url":157},10809,"LangUI 是否有基于它的完整 ChatGPT 风格开源应用模板？","目前维护者正在开发基于 LangUI 的完整 React 应用模板，但尚未完全发布。在此之前，你可以利用 LangUI 提供的现有组件和容器自行构建类似的应用。请关注仓库更新以获取未来的完整模板。","https:\u002F\u002Fgithub.com\u002FCommandCodeAI\u002Flangui\u002Fissues\u002F9",{"id":159,"question_zh":160,"answer_zh":161,"source_url":152},10810,"为什么 Prompt 输入框的滚动条设计看起来不协调或有重叠？","LangUI 遵循良好的 UX 和无障碍策略，默认不建议修改原生滚动条样式，除非绝对必要。输入框的高度行为（如自动扩展或固定行数滚动）如果涉及动态内容高度调整，通常需要 JavaScript 支持，而这超出了纯 CSS 组件库的范围。用户可以通过全局 CSS 自定义滚动条样式以匹配主题，但这需要在用户自己的项目中设置，而非库默认提供。",[]]