[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-liveloveapp--hashbrown":3,"tool-liveloveapp--hashbrown":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":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":80,"owner_twitter":81,"owner_website":82,"owner_url":83,"languages":84,"stars":115,"forks":116,"last_commit_at":117,"license":118,"difficulty_score":23,"env_os":119,"env_gpu":119,"env_ram":119,"env_deps":120,"category_tags":133,"github_topics":134,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":142,"updated_at":143,"faqs":144,"releases":170},1356,"liveloveapp\u002Fhashbrown","hashbrown","Hashbrown is a framework for building agents that run the browser. Built for Angular and React.","Hashbrown 是一套专为浏览器打造的“智能助手”框架，帮你把大模型能力直接塞进 React 或 Angular 页面。它解决了传统做法里“前端调 AI 接口难、状态管理乱、不同模型切换麻烦”的痛点：只需装 3 个包（核心、框架适配、后端 SDK），就能用自然语言生成 UI、把用户输入转成结构化数据，甚至预测下一步操作。  \n后端支持 OpenAI、Azure、Anthropic、Google Gemini 等主流模型，统一 API，换模型不改代码；前端提供 React Hook 与 Angular Service，生命周期自动对齐，流式响应不卡顿。  \n适合前端开发者、产品设计师或任何想把 LLM 搬进网页的人。无需从零搭桥，Hashbrown 已把“浏览器 ↔ 大模型”的通信、状态、错误处理都封装好，让你专注业务逻辑。","\u003Ch1 align=\"center\">Hashbrown - Build Agents for the Browser\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"www\u002Fanalog\u002Fpublic\u002Fimage\u002Flogo\u002Fbrand-mark.svg\" alt=\"Hashbrown Logo\" width=\"144px\" height=\"136px\"\u002F>\n  \u003Cbr>\n  \u003Cem>Hashbrown is an open-source framework for \n    \u003Cbr \u002F>building agents that run in the browser.\u003C\u002Fem>\n  \u003Cbr>\n    \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fstart\u002Fintro\">Read Angular Docs\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Fstart\u002Fintro\">Read React Docs\u003C\u002Fa>\n  \u003Cbr>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002F\">\u003Cstrong>hashbrown.dev\u003C\u002Fstrong>\u003C\u002Fa>\n  \u003Cbr>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\">Submit an Issue\u003C\u002Fa> |\n  \u003Ca href=\"CONTRIBUTING.md\">Contributing Guidelines\u003C\u002Fa> |\n  \u003Ca href=\"CODE_OF_CONDUCT.md\">Code of Conduct\u003C\u002Fa>\n  \u003Cbr>\n\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002F@hashbrownai\u002Fcore\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hashbrownai\u002Fcore.svg?logo=npm&logoColor=fff&label=NPM+package&color=orange\" alt=\"Hashbrown on npm\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n[What is Hashbrown](#what-is-hashbrown) | [Installation](#installation) | [Getting Started](#getting-started) | [Supported LLM Providers](#supported-llm-providers) | [Features](#features) | [Walkthroughs](#walkthroughs) | [Core Team](#core-team) | [Consulting](#consulting)\n\n\u003C!-- TODO: embed \"marketing\" video here when finished-->\n\n\u003Chr>\n\n## What Is Hashbrown\n\nHashbrown is a set of core and framework-specific packages for the UI along with LLM SDK wrappers for Node backends. Hashbrown makes it easy to embed intelligence in your React or Angular components. Use Hashbrown to generate user interfaces, turn natural language into structured data, and predict your user's next action.\n\n## Installation\n\nHashbrown typically needs three packages installed:\n\n- @hashbrownai\u002Fcore: a shared set of primitives for managing state to\u002Ffrom LLM providers\n- @hashbrownai\u002F\u003Cangular|react>: a framework-specific set of wrappers for the core primitives to easily tie Hashbrown into framework lifecycle flows\n- @hashbrownai\u002F\u003Cprovider>: A provider-specific wrapper for Node backends that wraps a provider SDK to provide consistency between providers.\n\nFor example, to use Hashbrown with Angular and OpenAI's GPT models, you could install the requisite packages like so:\n\n```sh\nnpm install @hashbrownai\u002F{core,angular,openai} --save\n```\n\nTo use Hashbrown with React and Azure, you'd instead do:\n\n```sh\nnpm install @hashbrownai\u002F{core,react,azure} --save\n```\n\n## Supported LLM Providers\n\nHashbrown supports a (growing) list of proprietary and open-weights models via vendor-specific packages that wrap each SDK's inputs and outputs into a consistent shape for Hashbrown to consume.\n\nThey include:\n\n- [OpenAI](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fopenai)\n- [Azure OpenAI](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fazure)\n- [Anthropic](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fanthropic)\n- [Amazon Bedrock](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fbedrock)\n- [Ollama](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Follama)\n- [Google Gemini](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fgoogle)\n- [Writer](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fwriter)\n\nNote that any model supported by a vendor's SDK will generally be usable via Hashbrown. That said, not all models (especially some older, smaller ones) will be able to handle the full feature set of Hashbrown.\n\n## Getting Started\n\n### In Node\n\nHashbrown backend SDK wrappers put a consistent API surface around varied SDK APIs, and allow you to provide API keys and model choices, as well as other vendor-specific parameters.\n\nHashbrown uses HTTP streaming to communicate between Node backends and UI\nhooks\u002Fresources.\n\nThe below example demonstrates exposing a POST endpoint `\u002Fchat` that:\n\n- takes in a completion parameters, like a set of messages, schema and tool calls\u002Fdefinitions\n- streams LLM responses back to the Hashbrown UI mechanisms\n\nNote: the URL is configurable in Hashbrown and need not be 'chat', so long as it matches in the backend and UI.\n\n```typescript\nimport { HashbrownOpenAI } from '@hashbrownai\u002Fopenai';\n\napp.post('\u002Fchat', async (req, res) => {\n  const stream = HashbrownOpenAI.stream.text({\n    apiKey: process.env.OPENAI_API_KEY!,\n    request: req.body, \u002F\u002F must be Chat.Api.CompletionCreateParams\n  });\n\n  res.header('Content-Type', 'application\u002Foctet-stream');\n\n  for await (const chunk of stream) {\n    res.write(chunk); \u002F\u002F Pipe each encoded frame as it arrives\n  }\n\n  res.end();\n});\n```\n\nSee [sample server main.ts](\u002Fsamples\u002Fsmart-home\u002Fserver\u002Fsrc\u002Fmain.ts) for a fuller example.\n\n### In React\n\nConfigure the provider:\n\n```ts\nexport function Providers() {\n  return (\n    \u003CHashbrownProvider url={url}>\n      {children}\n    \u003C\u002FHashbrownProvider>\n  )\n}\n```\n\nWith the provider set up, you can use Hashbrown hooks anywhere in your application.\n\nOur docs site has various examples and recipes, like [extracting structured data from a text input](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Frecipes\u002Fnatural-language-to-structured-data).\n\n### In Angular\n\nConfigure the provider:\n\n```ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHashbrown({\n      baseUrl: '\u002Fapi\u002Fchat',\n    }),\n  ],\n};\n```\n\nWith the provider set up, you can use Hashbrown hooks anywhere in your application.\n\nOur docs site has various examples and recipes, like [equipping a chatbot with tool calling](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Frecipes\u002Fui-chatbot).\n\n## Features\n\nHashbrown offers a toolkit of ways to enhance a UI with intelligence:\n\n- input completions\n- structured completions (i.e. natural language )\n- component selection and rendering\n- tool calling\n- code generation and execution\n\nEach of these can interact with an app's state, persistence, components, etc., so there is a maximum flexibility in how and when to apply AI.\n\nIn addition, because LLMs can handle most languages, all Hashbrown features can handle most any language as an input or output.\n\nWe've chosen to document them in the context of each UI framework we support.\n\nFor Angular: https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fstart\u002Fintro\n\nFor React: https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Fstart\u002Fintro\n\n## Sample Apps\n\nTo enable demonstration, ideation and development, we've added several sample apps to the repo. These apps have state, reactivity, etc., just like a full-fledged app. They also each include a simple backend server to enable using LLM providers, but they don't generally include persistence, etc.\n\n### Angular Smart Home\n\nAn Angular-based smart home app that can control lights, create and apply scenes and schedule events. Users can interact with a chat prompt that can render lights, scenes, etc. right in the chat.\n\nSmart-home-server is set up to use OpenAI (you'll just need to provide your API key as an environment variable), but can be quickly adapted to any of our other backend wrappers.\n\n```shell\nnvm use\nnpm install\nnpx nx serve smart-home-server && npx nx serve smart-home-angular\n```\n\n### React Smart Home\n\nA React-based smart home app that can control lights, create and apply scenes and schedule events. Users can interact with a chat prompt that can render lights, scenes, etc. right in the chat.\n\nSmart-home-server is set up to use OpenAI (you'll just need to provide your API key as an environment variable), but can be quickly adapted to any of our other backend wrappers.\n\n```shell\nnvm use\nnpm install\nnpx nx serve smart-home-server && npx nx serve smart-home-react\n```\n\n### Angular Finance\n\nThe finance app comes with a large amount of data representing breakfast food supplies, and it demonstrates Hashbrown's ability to generate Javascript to slice\u002Frollup data, configure a chart in an arbitrary way, and then render that chart for a user.\n\nNote: the theme can be changed via natural language, like \"Make the legend bigger and green\". \"1990s Excel\" has proven a popular choice.\n\n```shell\nnvm use\nnpm install\nnpx nx serve finance-server && npx nx serve finance-angular\n```\n\n### Angular Kitchen Sink\n\nThe Kitchen Sink app is a version of the Angular smart home app with an expanded feature set. It serves as an experimental playground for contributors exploring and adding new features and mechanisms (i.e. \"explain this page to me\").\n\n```shell\nnvm use\nnpm install\nnpx nx serve kitchen-sink-server && npx nx serve kitchen-sink-angular\n```\n\n## Core Team\n\n`hashbrown` is a community effort led by Mike Ryan, Brian Love and Ben Taylor.\n\n## Contributing\n\nhashbrown is a community-driven project. Read our [contributing guidelines](.\u002FCONTRIBUTING.md) on how to get involved.\n\n## Consulting\n\nHashbrown is built in the open by [LiveLoveApp](https:\u002F\u002Fwww.liveloveapp.com). We love building products for the web, and have helped engineering teams across startups, banking, and finance.\n\n## License\n\nMIT © [LiveLoveApp, LLC](https:\u002F\u002Fliveloveapp.com)\n","\u003Ch1 align=\"center\">Hashbrown — 为浏览器构建代理\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"www\u002Fanalog\u002Fpublic\u002Fimage\u002Flogo\u002Fbrand-mark.svg\" alt=\"Hashbrown 标志\" width=\"144px\" height=\"136px\"\u002F>\n  \u003Cbr>\n  \u003Cem>Hashbrown 是一款开源框架，用于\n    \u003Cbr \u002F>构建可在浏览器中运行的代理。\u003C\u002Fem>\n  \u003Cbr>\n    \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fstart\u002Fintro\">阅读 Angular 文档\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Fstart\u002Fintro\">阅读 React 文档\u003C\u002Fa>\n  \u003Cbr>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fhashbrown.dev\u002F\">\u003Cstrong>hashbrown.dev\u003C\u002Fstrong>\u003C\u002Fa>\n  \u003Cbr>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\">提交问题\u003C\u002Fa> |\n  \u003Ca href=\"CONTRIBUTING.md\">贡献指南\u003C\u002Fa> |\n  \u003Ca href=\"CODE_OF_CONDUCT.md\">行为准则\u003C\u002Fa>\n  \u003Cbr>\n\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002F@hashbrownai\u002Fcore\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@hashbrownai\u002Fcore.svg?logo=npm&logoColor=fff&label=NPM+包&color=orange\" alt=\"Hashbrown 在 npm 上\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n[什么是 Hashbrown](#what-is-hashbrown) | [安装](#installation) | [快速入门](#getting-started) | [支持的 LLM 提供商](#supported-llm-providers) | [功能特性](#features) | [操作示例](#walkthroughs) | [核心团队](#core-team) | [咨询与合作](#consulting)\n\n\u003C!-- TODO: 在完成之后将“营销”视频嵌入此处 -->\n\n\u003Chr>\n\n## 什么是 Hashbrown\n\nHashbrown 是一套针对 UI 的核心组件和框架专用包，同时还提供了适用于 Node 后端的 LLM SDK 包装器。借助 Hashbrown，您可以轻松地将智能能力嵌入到自己的 React 或 Angular 组件中。使用 Hashbrown，您可以生成用户界面、将自然语言转化为结构化数据，并预测用户的下一步行动。\n\n## 安装\n\nHashbrown 通常需要安装以下三个包：\n\n- @hashbrownai\u002Fcore：一组共享的原语集合，用于管理与 LLM 提供商之间的状态交互\n- @hashbrownai\u002F\u003Cangular|react>：一套针对特定框架的包装器，可将核心原语轻松融入框架的生命周期流程中\n- @hashbrownai\u002F\u003Cprovider>：针对 Node 后端的提供商专用包装器，可对提供商 SDK 进行封装，以确保各提供商之间的一致性。\n\n例如，若要将 Hashbrown 与 Angular 以及 OpenAI 的 GPT 模型结合使用，您可以按如下方式安装所需的包：\n\n```sh\nnpm install @hashbrownai\u002F{core,angular,openai} --save\n```\n\n若要将 Hashbrown 与 React 和 Azure 结合使用，则应这样操作：\n\n```sh\nnpm install @hashbrownai\u002F{core,react,azure} --save\n```\n\n## 支持的 LLM 提供商\n\nHashbrown 支持一系列不断扩充的专有模型及开放权重模型，这些模型通过各厂商专属的包实现，可将每个 SDK 的输入与输出统一为一种标准化格式，以便 Hashbrown 能够高效地进行处理。\n\n其中包括：\n\n- [OpenAI](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fopenai)\n- [Azure OpenAI](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fazure)\n- [Anthropic](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fanthropic)\n- [Amazon Bedrock](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fbedrock)\n- [Ollama](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Follama)\n- [Google Gemini](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fgoogle)\n- [Writer](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fplatform\u002Fwriter)\n\n请注意，只要厂商 SDK 支持的模型，通常都可以通过 Hashbrown 使用。不过，并非所有模型（尤其是部分较旧、规模较小的模型）都能完全满足 Hashbrown 的全部功能需求。\n\n## 快速入门\n\n### Node 环境\n\nHashbrown 后端 SDK 包装器为多种 SDK API 提供了统一的接口层，使您能够轻松提供 API 密钥、模型选择以及其他厂商专属参数。\n\nHashbrown 采用 HTTP 流式通信机制，实现 Node 后端与 UI 插件\u002F资源之间的数据交互。\n\n以下示例展示了如何暴露一个 POST 端点 `\u002Fchat`，该端点：\n- 接收诸如消息集、Schema 以及工具调用\u002F定义等完成参数\n- 将 LLM 响应流式传输回 Hashbrown UI 机制\n\n注意：URL 可在 Hashbrown 中进行配置，只要后端与 UI 中的 URL 相匹配，无需强制使用 `\u002Fchat`。\n\n```typescript\nimport { HashbrownOpenAI } from '@hashbrownai\u002Fopenai';\n\napp.post('\u002Fchat', async (req, res) => {\n  const stream = HashbrownOpenAI.stream.text({\n    apiKey: process.env.OPENAI_API_KEY!,\n    request: req.body, \u002F\u002F 必须为 Chat.Api.CompletionCreateParams\n  });\n\n  res.header('Content-Type', 'application\u002Foctet-stream');\n\n  for await (const chunk of stream) {\n    res.write(chunk); \u002F\u002F 每当一帧编码数据到达时，立即进行管道传输\n  }\n\n  res.end();\n});\n```\n\n如需更完整的示例，请参阅 [样本服务器主文件 `main.ts`](\u002Fsamples\u002Fsmart-home\u002Fserver\u002Fsrc\u002Fmain.ts)。\n\n### React 环境\n\n配置提供商：\n\n```ts\nexport function Providers() {\n  return (\n    \u003CHashbrownProvider url={url}>\n      {children}\n    \u003C\u002FHashbrownProvider>\n  )\n}\n```\n\n在成功配置好提供商后，您便可以在应用中的任意位置使用 Hashbrown 钩子。\n\n我们的文档网站提供了多种示例与教程，例如 [从文本输入中提取结构化数据](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Frecipes\u002Fnatural-language-to-structured-data)。\n\n### Angular 环境\n\n配置提供商：\n\n```ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHashbrown({\n      baseUrl: '\u002Fapi\u002Fchat',\n    }),\n  ],\n};\n```\n\n在成功配置好提供商后，您便可以在应用中的任意位置使用 Hashbrown 钩子。\n\n我们的文档网站提供了多种示例与教程，例如 [为聊天机器人配备工具调用功能](https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Frecipes\u002Fui-chatbot)。\n\n## 功能特性\n\nHashbrown 提供了一套丰富的工具，可用于为 UI 增强智能能力：\n\n- 输入补全\n- 结构化补全（即自然语言补全）\n- 组件选择与渲染\n- 工具调用\n- 代码生成与执行\n\n这些功能均可与应用的状态、持久化机制、组件等相互作用，因此在 AI 的应用方式与时机上具有极大的灵活性。\n\n此外，由于 LLM 能够支持多种语言，Hashbrown 的各项功能均能以各种语言作为输入或输出。\n\n我们选择根据各自支持的 UI 框架来详细记录这些功能特性。\n\nAngular 版本：https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fstart\u002Fintro\n\nReact 版本：https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Fstart\u002Fintro\n\n## 示例应用\n\n为了便于演示、构思与开发，我们已在仓库中添加了多个示例应用。这些应用具备状态、响应式编程等特性，如同完整版的应用一样。此外，它们还配备了简单的后端服务器，以支持使用 LLM 提供商，但通常并不包含持久化等功能。\n\n### Angular 智能家居\n\n基于 Angular 的智能家居应用，可控制灯光、创建并应用场景，还可设置事件调度。用户可以通过聊天提示与应用互动，实时在聊天中呈现灯光、场景等效果。\n\nSmart-home-server 已经配置为使用 OpenAI（您只需将 API 密钥作为环境变量提供），但也可迅速适配我们其他任何后端包装器。\n\n```shell\nnvm use\nnpm install\nnpx nx serve smart-home-server && npx nx serve smart-home-angular\n```\n\n### React 智能家居\n\n一款基于 React 的智能家居应用，可实现灯光控制、场景创建与应用以及事件预约。用户可以通过聊天提示与系统互动，直接在聊天界面中实时渲染灯光、场景等。\n\n智能家居服务器已配置为使用 OpenAI（您只需将 API 密钥作为环境变量提供即可），但也可快速适配我们其他任意后端封装器。\n\n```shell\nnvm use\nnpm install\nnpx nx serve smart-home-server && npx nx serve smart-home-react\n```\n\n### Angular 金融\n\n该金融应用内置了大量早餐食品库存数据，展示了 Hashbrown 能够生成 JavaScript 代码来对数据进行切片与汇总、以任意方式配置图表，并最终为用户呈现这些图表。\n\n注意：主题可通过自然语言轻松调整，例如“把图例调大一点，再改成绿色”。“90 年代的 Excel”一直是广受欢迎的选择。\n\n```shell\nnvm use\nnpm install\nnpx nx serve finance-server && npx nx serve finance-angular\n```\n\n### Angular 厨房水槽\n\n厨房水槽应用是 Angular 智能家居应用的扩展版，功能更加丰富。它为贡献者提供了一个实验性的平台，供其探索并新增各类新功能与新机制（例如：“请给我解释一下这个页面”）。\n\n```shell\nnvm use\nnpm install\nnpx nx serve kitchen-sink-server && npx nx serve kitchen-sink-angular\n```\n\n## 核心团队\n\n`hashbrown` 是由 Mike Ryan、Brian Love 和 Ben Taylor 领导的社区项目。\n\n## 贡献\n\nhashbrown 是一个由社区驱动的项目。请阅读我们的 [贡献指南](.\u002FCONTRIBUTING.md)，了解如何参与其中。\n\n## 咨询\n\nHashbrown 由 [LiveLoveApp](https:\u002F\u002Fwww.liveloveapp.com) 公开打造。我们热衷于为网络构建各类产品，并曾助力多家初创公司、银行及金融行业的工程团队。\n\n## 许可证\n\nMIT © [LiveLoveApp, LLC](https:\u002F\u002Fliveloveapp.com)","# Hashbrown 快速上手指南（中文版）\n\n## 环境准备\n- Node.js ≥ 18（推荐 20+）\n- npm ≥ 9（或 pnpm \u002F yarn）\n- 任一支持的 LLM API Key（OpenAI \u002F Azure \u002F Anthropic 等）\n\n## 安装步骤\n\n### 1. 安装核心包\n根据所用框架与 LLM 提供商，一次性安装 3 个包即可：\n\n**Angular + OpenAI**\n```sh\nnpm install @hashbrownai\u002F{core,angular,openai} --save\n```\n\n**React + Azure**\n```sh\nnpm install @hashbrownai\u002F{core,react,azure} --save\n```\n\n> 如需其他组合，只需把 `angular|react` 和 `openai|azure|anthropic|...` 替换即可。\n\n### 2. 配置后端（Node）\n创建 `\u002Fchat` 接口，示例使用 OpenAI：\n\n```typescript\n\u002F\u002F server.ts\nimport { HashbrownOpenAI } from '@hashbrownai\u002Fopenai';\n\napp.post('\u002Fchat', async (req, res) => {\n  const stream = HashbrownOpenAI.stream.text({\n    apiKey: process.env.OPENAI_API_KEY!,\n    request: req.body,\n  });\n\n  res.header('Content-Type', 'application\u002Foctet-stream');\n  for await (const chunk of stream) res.write(chunk);\n  res.end();\n});\n```\n\n### 3. 配置前端\n\n#### React\n```tsx\n\u002F\u002F App.tsx\nimport { HashbrownProvider } from '@hashbrownai\u002Freact';\n\nexport default function App() {\n  return (\n    \u003CHashbrownProvider url=\"\u002Fapi\u002Fchat\">\n      \u003CYourRoutes \u002F>\n    \u003C\u002FHashbrownProvider>\n  );\n}\n```\n\n#### Angular\n```ts\n\u002F\u002F app.config.ts\nimport { provideHashbrown } from '@hashbrownai\u002Fangular';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHashbrown({ baseUrl: '\u002Fapi\u002Fchat' }),\n  ],\n};\n```\n\n## 基本使用\n\n### React Hook 示例\n```tsx\nimport { useCompletion } from '@hashbrownai\u002Freact';\n\nfunction Chat() {\n  const { complete, data } = useCompletion();\n  return (\n    \u003C>\n      \u003Cbutton onClick={() => complete('把灯打开')}>发送\u003C\u002Fbutton>\n      \u003Cpre>{data}\u003C\u002Fpre>\n    \u003C\u002F>\n  );\n}\n```\n\n### Angular Service 示例\n```ts\nimport { HashbrownService } from '@hashbrownai\u002Fangular';\n\nexport class LightComponent {\n  private hb = inject(HashbrownService);\n\n  turnOn() {\n    this.hb.complete('把灯打开').subscribe(res => console.log(res));\n  }\n}\n```\n\n至此，你已能在浏览器里通过自然语言驱动 UI 与后端交互。更多示例与进阶用法见官方文档：\n- Angular 版：https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Fangular\u002Fstart\u002Fintro  \n- React 版：https:\u002F\u002Fhashbrown.dev\u002Fdocs\u002Freact\u002Fstart\u002Fintro","一家 8 人规模的在线旅游创业公司，正在用 React + Node 开发一款「智能行程规划」SaaS，让用户用自然语言描述需求后，前端实时生成可拖拽的行程卡片。\n\n### 没有 hashbrown 时\n- 前端工程师得自己写 SSE 流解析、状态同步和重试逻辑，光“打字机”效果就折腾 3 天。  \n- 后端为了同时支持 OpenAI 与 Bedrock，写了两套几乎重复的 controller，维护噩梦。  \n- 产品要求“预测用户下一步想加哪个景点”，团队没精力做 prompt 调优，只能搁置。  \n- 每次模型升级，都要改接口字段，前端、后端、QA 来回对齐，迭代周期被拉长到两周。\n\n### 使用 hashbrown 后\n- 前端 10 行代码接入 `@hashbrownai\u002Freact`，流式文本自动渲染成卡片，开发时间从 3 天缩到 30 分钟。  \n- 后端用 `@hashbrownai\u002Fopenai` 与 `@hashbrownai\u002Fbedrock` 统一封装，换模型只改一行配置，零重复代码。  \n- 直接调用 hashbrown 的「next-action」钩子，模型根据上下文预测并推荐下一个景点，功能当天上线。  \n- 模型版本、prompt 模板全部托管在 hashbrown 配置中心，升级只需改 JSON，前后端无感同步，迭代周期回到 2 天。\n\nhashbrown 让这家小团队在浏览器里就能跑起“LLM 驱动的产品功能”，把原本需要 3 人周的活压缩到 1 人天。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fliveloveapp_hashbrown_e53b9043.png","liveloveapp","LiveLoveApp","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fliveloveapp_ff168625.png","Find Absolutely Joy in Shipping Apps",null,"hello@liveloveapp.com","findabsolutejoy","https:\u002F\u002Fliveloveapp.com","https:\u002F\u002Fgithub.com\u002Fliveloveapp",[85,89,93,97,101,104,108,112],{"name":86,"color":87,"percentage":88},"TypeScript","#3178c6",89.4,{"name":90,"color":91,"percentage":92},"JavaScript","#f1e05a",9.3,{"name":94,"color":95,"percentage":96},"C","#555555",0.4,{"name":98,"color":99,"percentage":100},"Shell","#89e051",0.3,{"name":102,"color":103,"percentage":100},"HTML","#e34c26",{"name":105,"color":106,"percentage":107},"CSS","#663399",0.2,{"name":109,"color":110,"percentage":111},"CMake","#DA3434",0.1,{"name":113,"color":114,"percentage":111},"Dockerfile","#384d54",663,56,"2026-04-05T09:54:09","NOASSERTION","未说明",{"notes":121,"python":119,"dependencies":122},"Hashbrown 是一个浏览器端 Agent 框架，基于 Node.js 与前端框架（Angular\u002FReact）运行；需安装对应 LLM 供应商的 SDK 并配置 API Key；示例项目使用 nvm 管理 Node 版本，需执行 npm install 安装依赖；支持 HTTP 流式通信，前后端需保持 URL 一致",[123,124,125,126,127,128,129,130,131,132],"@hashbrownai\u002Fcore","@hashbrownai\u002Fangular","@hashbrownai\u002Freact","@hashbrownai\u002Fopenai","@hashbrownai\u002Fazure","@hashbrownai\u002Fanthropic","@hashbrownai\u002Fbedrock","@hashbrownai\u002Follama","@hashbrownai\u002Fgoogle","@hashbrownai\u002Fwriter",[13,14,15,26],[135,136,137,138,139,140,141],"ai","angular","llms","react","typescript","ui","ux","2026-03-27T02:49:30.150509","2026-04-06T06:53:21.538058",[145,150,155,160,165],{"id":146,"question_zh":147,"answer_zh":148,"source_url":149},6200,"工具调用一直卡在“pending”状态怎么办？","这是 v0.1.1 的已知 Bug，已在 v0.1.2 修复。请升级至最新版本：\n```bash\nnpm install @hashbrownai\u002Fcore@latest @hashbrownai\u002Fangular@latest @hashbrownai\u002Fazure@latest\n```\n升级后无需改动业务代码即可恢复正常。","https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\u002F252",{"id":151,"question_zh":152,"answer_zh":153,"source_url":154},6201,"升级到 0.4.0 后提示找不到 '@hashbrownai\u002Fcore' 模块？","这是 0.4.0 的打包问题，已在 0.4.1 修复。执行：\n```bash\nnpm install @hashbrownai\u002Fcore@0.4.1\n```\n重新安装后即可解决 `TS2307: Cannot find module '@hashbrownai\u002Fcore'` 的错误。","https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\u002F445",{"id":156,"question_zh":157,"answer_zh":158,"source_url":159},6202,"Angular 生产构建时报 “Could not resolve 'url'” 错误？","这是 CommonJS\u002FESM 导出优先级导致的打包问题，已在后续版本修复。临时方案：\n1. 升级到最新版：\n   ```bash\n   npm install @hashbrownai\u002Fcore@latest\n   ```\n2. 若仍报错，在构建配置中强制使用 ESM：\n   ```json\n   \"browser\": {\n     \".\u002Femscripten-module.browser-NBYT6WWV.cjs.js\": \".\u002Femscripten-module.browser-NBYT6WWV.esm.js\"\n   }\n   ```","https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\u002F419",{"id":161,"question_zh":162,"answer_zh":163,"source_url":164},6203,"使用 Ollama 后端时如何选择兼容的模型？","0.4.0-rc.1 已解决模型兼容性问题，并会在文档中列出推荐模型。当前建议：\n- 避免使用 `deepseek-r1:8b`（不支持 `think: high`）\n- 避免使用 `gemma3:1b`（不支持 `thinking`）\n- 可先用 `llama2:latest` 或 `mistral:latest` 作为起点。\n升级后：\n```bash\nnpm install @hashbrownai\u002Follama@0.4.0-rc.1\n```","https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\u002F380",{"id":166,"question_zh":167,"answer_zh":168,"source_url":169},6204,"如何查看 Express\u002FFastify\u002FNest.js\u002FHono 的示例代码？","官方文档已补充 Node.js 各服务器示例，可通过以下方式查看：\n1. 访问文档站点：https:\u002F\u002Fhashbrown.dev\u002Fdocs\n2. 在右上角选择对应后端（Express\u002FFastify\u002FNest.js\u002FHono）\n3. 示例会自动切换为对应框架的代码。\n若本地文档未更新，可拉取最新仓库：\n```bash\ngit pull origin main\nnpm run docs:serve\n```","https:\u002F\u002Fgithub.com\u002Fliveloveapp\u002Fhashbrown\u002Fissues\u002F331",[171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228],{"id":172,"version":173,"summary_zh":79,"released_at":79},105772,"v0.5.0-beta.4",{"id":175,"version":176,"summary_zh":79,"released_at":79},105773,"v0.5.0-beta.3",{"id":178,"version":179,"summary_zh":79,"released_at":79},105774,"v0.5.0-beta.2",{"id":181,"version":182,"summary_zh":79,"released_at":79},105775,"v0.5.0-beta.1",{"id":184,"version":185,"summary_zh":79,"released_at":79},105776,"v0.4.1",{"id":187,"version":188,"summary_zh":79,"released_at":79},105777,"v0.4.1-alpha.2",{"id":190,"version":191,"summary_zh":79,"released_at":79},105778,"v0.4.1-alpha.1",{"id":193,"version":194,"summary_zh":79,"released_at":79},105779,"v0.4.0",{"id":196,"version":197,"summary_zh":79,"released_at":79},105780,"v0.4.0-rc.1",{"id":199,"version":200,"summary_zh":79,"released_at":79},105781,"v0.4.0-rc.0",{"id":202,"version":203,"summary_zh":79,"released_at":79},105782,"v0.3.0",{"id":205,"version":206,"summary_zh":79,"released_at":79},105783,"v0.2.3",{"id":208,"version":209,"summary_zh":79,"released_at":79},105784,"v0.2.2",{"id":211,"version":212,"summary_zh":79,"released_at":79},105785,"v0.2.1",{"id":214,"version":215,"summary_zh":79,"released_at":79},105786,"v0.2.0",{"id":217,"version":218,"summary_zh":79,"released_at":79},105787,"v0.1.2",{"id":220,"version":221,"summary_zh":79,"released_at":79},105788,"v0.1.1",{"id":223,"version":224,"summary_zh":79,"released_at":79},105789,"v0.1.0",{"id":226,"version":227,"summary_zh":79,"released_at":79},105790,"v0.0.3",{"id":229,"version":230,"summary_zh":79,"released_at":79},105791,"v0.0.3-0"]