Hashbrown is a framework for building agents that run the browser. Built for Angular and React.

Hashbrown – 面向 React 和 Angular 的 AI 驱动聊天与代理

它是什么 – Hashbrown 是一个无头 TypeScript 框架，允许您向 React 或 Angular Web 应用添加生成式 AI 聊天和代理功能。它不提供自己的 UI；而是将模型生成的数据流式传输到您已经使用的组件中，让 AI 渲染您自己的 UI 片段并调用在浏览器中运行的函数（工具）。

核心概念

概念	含义
生成式 UI	您使用模式（Skillet 模式）注册 React/Angular 组件。当 LLM 决定显示某些内容时，它会发出组件名称和属性，Hashbrown 会即时渲染该组件。
客户端工具	您暴露的函数（例如，获取数据、调用服务）可以被模型调用。它们在与您的应用相同的浏览器上下文中运行，因此可以完全访问应用状态。
流式传输	响应逐块流式传输。组件在数据到达时立即出现，文本可以在流式传输时以“魔法文本”（类似 Markdown）渲染。
提供商无关	该框架适用于任何可以流式传输 JSON 的 LLM：OpenAI、Anthropic、Google Gemini、Amazon Bedrock、Azure OpenAI、Ollama 或您托管的自定义后端。
无头	没有内置聊天 UI；您保留自己的设计系统。一个单独的项目（threadplane）提供了基于 Hashbrown 构建的完整 UI。

包与安装

包	用途
`@hashbrownai/core`	框架无关的原语、Skillet 模式语言、流式 JSON 解析器。
`@hashbrownai/react` / `@hashbrownai/angular`	特定于所选前端框架的钩子、组件和工具。
`@hashbrownai/<provider>`（例如，`openai`、`anthropic`）	Node 适配器，将 `/run` 请求转换为提供商的 SDK 并将事件流式传输回浏览器。

典型安装（React + OpenAI）

npm install @hashbrownai/{core,react,openai}

典型安装（Angular + OpenAI）

npm install @hashbrownai/{core,angular,openai}

工作原理 – 三个步骤

暴露组件 – 注册模型可能渲染的 UI 片段，使用 Skillet 模式描述其属性。

const components = [
  exposeComponent(FlightCard, {
    name: 'FlightCard',
    description: 'Shows one aircraft on the map.',
    props: {
      note: s.streaming.string('Short description'),
      hex:  s.string('Aircraft hex code')
    },
    children: false,
  })
];

提供工具 – 定义模型可以调用的函数。在浏览器中，它们可以读取/写入应用状态。

const findAircraft = useTool({ ...atcTools.findAircraft, deps: [atcTools] });
const chat = useUiChat({ system: 'Help users understand the planes.', components, tools: [findAircraft] });

渲染流式响应 – 映射 chat.messages；助手消息包含一个 ui 字段，该字段是一个可直接渲染的组件树。
```
return chat.messages.map(m => m.role === 'assistant' ? m.ui : m.content);
```

所有三个步骤在 Angular 中都有对应的 API（exposeComponent、uiChatResource、hb-render-message）。

功能清单

生成式 UI – 模型驱动的组件组合。
客户端工具 – 应用内的函数调用。
结构化输出 – Skillet 模式强制类型化 JSON。
流式传输 – 文本、数组、对象的增量渲染。
任何模型 – 适配器支持 OpenAI、Anthropic、Gemini、Bedrock、Azure、Ollama 或自定义后端。
代码执行沙盒 – 可选运行时，安全运行模型生成的 JavaScript。

运行真实示例

该仓库附带一个 ATC 演示（空中交通管制地图），分别用 React 和 Angular 构建，展示了：

来自 adsb.lol 的实时地图数据。
一个助手，使用注册的 FlightCard 组件和查找飞机的工具回答问题。

要在本地尝试：

nvm use
npm ci
npx nx serve atc-server   # 启动与 OpenAI 通信的 Express 桥接
npx nx serve atc-react    # React 前端（或 atc-angular 用于 Angular）

首先在 .env 文件中设置 OPENAI_API_KEY。

当您需要完整 UI 时

Hashbrown 仅处理后端逻辑和流式传输。对于现成的聊天界面，团队提供 threadplane（MIT 许可，可选企业支持），它基于 Hashbrown 构建，提供线程、审批和工具进度 UI。

背后团队

由 Brian Love 在 LiveLoveApp, LLC 领导。该项目采用 MIT 许可，欢迎社区贡献。

总结

Hashbrown 允许您将 LLM 驱动的助手直接嵌入到您的 React 或 Angular 应用中，使用您自己的组件和浏览器端函数，支持流式传输和提供商无关。如果您想要一个灵活、无头的生成式 UI 和工具调用基础，而不被强制使用预制的聊天 UI，这是一个可靠的选择。

liveloveapp/hashbrown