Hashbrown — 为浏览器构建代理

Hashbrown 是一款开源框架，用于
构建可在浏览器中运行的代理。
阅读 Angular 文档 | 阅读 React 文档

hashbrown.dev

提交问题 | 贡献指南 | 行为准则

什么是 Hashbrown | 安装 | 快速入门 | 支持的 LLM 提供商 | 功能特性 | 操作示例 | 核心团队 | 咨询与合作

---

什么是 Hashbrown

Hashbrown 是一套针对 UI 的核心组件和框架专用包，同时还提供了适用于 Node 后端的 LLM SDK 包装器。借助 Hashbrown，您可以轻松地将智能能力嵌入到自己的 React 或 Angular 组件中。使用 Hashbrown，您可以生成用户界面、将自然语言转化为结构化数据，并预测用户的下一步行动。

安装

Hashbrown 通常需要安装以下三个包：

• @hashbrownai/core：一组共享的原语集合，用于管理与 LLM 提供商之间的状态交互
• @hashbrownai/<angular|react>：一套针对特定框架的包装器，可将核心原语轻松融入框架的生命周期流程中
• @hashbrownai/：针对 Node 后端的提供商专用包装器，可对提供商 SDK 进行封装，以确保各提供商之间的一致性。

例如，若要将 Hashbrown 与 Angular 以及 OpenAI 的 GPT 模型结合使用，您可以按如下方式安装所需的包：

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

若要将 Hashbrown 与 React 和 Azure 结合使用，则应这样操作：

npm install @hashbrownai/{core,react,azure} --save

支持的 LLM 提供商

Hashbrown 支持一系列不断扩充的专有模型及开放权重模型，这些模型通过各厂商专属的包实现，可将每个 SDK 的输入与输出统一为一种标准化格式，以便 Hashbrown 能够高效地进行处理。

其中包括：

• OpenAI
• Azure OpenAI
• Anthropic
• Amazon Bedrock
• Ollama
• Google Gemini
• Writer

请注意，只要厂商 SDK 支持的模型，通常都可以通过 Hashbrown 使用。不过，并非所有模型（尤其是部分较旧、规模较小的模型）都能完全满足 Hashbrown 的全部功能需求。

快速入门

Node 环境

Hashbrown 后端 SDK 包装器为多种 SDK API 提供了统一的接口层，使您能够轻松提供 API 密钥、模型选择以及其他厂商专属参数。

Hashbrown 采用 HTTP 流式通信机制，实现 Node 后端与 UI 插件/资源之间的数据交互。

以下示例展示了如何暴露一个 POST 端点 /chat，该端点：

• 接收诸如消息集、Schema 以及工具调用/定义等完成参数
• 将 LLM 响应流式传输回 Hashbrown UI 机制

注意：URL 可在 Hashbrown 中进行配置，只要后端与 UI 中的 URL 相匹配，无需强制使用 /chat。

import { HashbrownOpenAI } from '@hashbrownai/openai';

app.post('/chat', async (req, res) => {
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: req.body, // 必须为 Chat.Api.CompletionCreateParams
  });

  res.header('Content-Type', 'application/octet-stream');

  for await (const chunk of stream) {
    res.write(chunk); // 每当一帧编码数据到达时，立即进行管道传输
  }

  res.end();
});

如需更完整的示例，请参阅 样本服务器主文件 main.ts。

React 环境

配置提供商：

export function Providers() {
  return (
    <HashbrownProvider url={url}>
      {children}
    </HashbrownProvider>
  )
}

在成功配置好提供商后，您便可以在应用中的任意位置使用 Hashbrown 钩子。

我们的文档网站提供了多种示例与教程，例如 从文本输入中提取结构化数据。

Angular 环境

配置提供商：

export const appConfig: ApplicationConfig = {
  providers: [
    provideHashbrown({
      baseUrl: '/api/chat',
    }),
  ],
};

在成功配置好提供商后，您便可以在应用中的任意位置使用 Hashbrown 钩子。

我们的文档网站提供了多种示例与教程，例如 为聊天机器人配备工具调用功能。

功能特性

Hashbrown 提供了一套丰富的工具，可用于为 UI 增强智能能力：

• 输入补全
• 结构化补全（即自然语言补全）
• 组件选择与渲染
• 工具调用
• 代码生成与执行

这些功能均可与应用的状态、持久化机制、组件等相互作用，因此在 AI 的应用方式与时机上具有极大的灵活性。

此外，由于 LLM 能够支持多种语言，Hashbrown 的各项功能均能以各种语言作为输入或输出。

我们选择根据各自支持的 UI 框架来详细记录这些功能特性。

Angular 版本：https://hashbrown.dev/docs/angular/start/intro

React 版本：https://hashbrown.dev/docs/react/start/intro

示例应用

为了便于演示、构思与开发，我们已在仓库中添加了多个示例应用。这些应用具备状态、响应式编程等特性，如同完整版的应用一样。此外，它们还配备了简单的后端服务器，以支持使用 LLM 提供商，但通常并不包含持久化等功能。

Angular 智能家居

基于 Angular 的智能家居应用，可控制灯光、创建并应用场景，还可设置事件调度。用户可以通过聊天提示与应用互动，实时在聊天中呈现灯光、场景等效果。

Smart-home-server 已经配置为使用 OpenAI（您只需将 API 密钥作为环境变量提供），但也可迅速适配我们其他任何后端包装器。

nvm use
npm install
npx nx serve smart-home-server && npx nx serve smart-home-angular

React 智能家居

一款基于 React 的智能家居应用，可实现灯光控制、场景创建与应用以及事件预约。用户可以通过聊天提示与系统互动，直接在聊天界面中实时渲染灯光、场景等。

智能家居服务器已配置为使用 OpenAI（您只需将 API 密钥作为环境变量提供即可），但也可快速适配我们其他任意后端封装器。

nvm use
npm install
npx nx serve smart-home-server && npx nx serve smart-home-react

Angular 金融

该金融应用内置了大量早餐食品库存数据，展示了 Hashbrown 能够生成 JavaScript 代码来对数据进行切片与汇总、以任意方式配置图表，并最终为用户呈现这些图表。

注意：主题可通过自然语言轻松调整，例如“把图例调大一点，再改成绿色”。“90 年代的 Excel”一直是广受欢迎的选择。

nvm use
npm install
npx nx serve finance-server && npx nx serve finance-angular

Angular 厨房水槽

厨房水槽应用是 Angular 智能家居应用的扩展版，功能更加丰富。它为贡献者提供了一个实验性的平台，供其探索并新增各类新功能与新机制（例如：“请给我解释一下这个页面”）。

nvm use
npm install
npx nx serve kitchen-sink-server && npx nx serve kitchen-sink-angular

核心团队

hashbrown 是由 Mike Ryan、Brian Love 和 Ben Taylor 领导的社区项目。

贡献

hashbrown 是一个由社区驱动的项目。请阅读我们的 贡献指南，了解如何参与其中。

咨询

Hashbrown 由 LiveLoveApp 公开打造。我们热衷于为网络构建各类产品，并曾助力多家初创公司、银行及金融行业的工程团队。

许可证

MIT © LiveLoveApp, LLC

Hashbrown 快速上手指南（中文版）

环境准备

• Node.js ≥ 18（推荐 20+）
• npm ≥ 9（或 pnpm / yarn）
• 任一支持的 LLM API Key（OpenAI / Azure / Anthropic 等）

安装步骤

1. 安装核心包

根据所用框架与 LLM 提供商，一次性安装 3 个包即可：

Angular + OpenAI

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

React + Azure

npm install @hashbrownai/{core,react,azure} --save

如需其他组合，只需把 angular|react 和 openai|azure|anthropic|... 替换即可。

2. 配置后端（Node）

创建 /chat 接口，示例使用 OpenAI：

// server.ts
import { HashbrownOpenAI } from '@hashbrownai/openai';

app.post('/chat', async (req, res) => {
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: req.body,
  });

  res.header('Content-Type', 'application/octet-stream');
  for await (const chunk of stream) res.write(chunk);
  res.end();
});

3. 配置前端

React

// App.tsx
import { HashbrownProvider } from '@hashbrownai/react';

export default function App() {
  return (
    <HashbrownProvider url="/api/chat">
      <YourRoutes />
    </HashbrownProvider>
  );
}

Angular

// app.config.ts
import { provideHashbrown } from '@hashbrownai/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHashbrown({ baseUrl: '/api/chat' }),
  ],
};

基本使用

React Hook 示例

import { useCompletion } from '@hashbrownai/react';

function Chat() {
  const { complete, data } = useCompletion();
  return (
    <>
      <button onClick={() => complete('把灯打开')}>发送</button>
      <pre>{data}</pre>
    </>
  );
}

Angular Service 示例

import { HashbrownService } from '@hashbrownai/angular';

export class LightComponent {
  private hb = inject(HashbrownService);

  turnOn() {
    this.hb.complete('把灯打开').subscribe(res => console.log(res));
  }
}

至此，你已能在浏览器里通过自然语言驱动 UI 与后端交互。更多示例与进阶用法见官方文档：

• Angular 版：https://hashbrown.dev/docs/angular/start/intro
• React 版：https://hashbrown.dev/docs/react/start/intro