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

Hashbrown – React と Angular のための AI 駆動チャットとエージェント

概要 – Hashbrown は、React または Angular Web アプリに生成 AI チャットとエージェント機能を追加できるヘッドレス TypeScript フレームワークです。独自の UI は提供せず、代わりにモデル生成データを既存のコンポーネントにストリーミングし、AI があなた自身の UI パーツをレンダリングし、ブラウザで実行される関数（ツール）を呼び出せるようにします。

コアアイデア

アイデア	意味
生成 UI	Skillet スキーマで React/Angular コンポーネントを登録します。LLM が何かを表示することを決定すると、コンポーネント名と props を出力し、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`）	`/run` リクエストをプロバイダーの SDK に変換し、イベントをブラウザにストリーミングする Node アダプター。

典型的なインストール（React + OpenAI）

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

典型的なインストール（Angular + OpenAI）

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

仕組み – 3 つのステップ

コンポーネントを公開 – モデルがレンダリングする可能性のある UI パーツを登録し、Skillet スキーマで props を記述します。

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);
```

これら 3 つのステップはすべて Angular でも同様の API（exposeComponent、uiChatResource、hb-render-message）で実現できます。

機能チェックリスト

生成 UI – モデル駆動のコンポーネント構成。
クライアント側ツール – アプリ内での関数呼び出し。
構造化出力 – Skillet スキーマが型付き JSON を強制します。
ストリーミング – テキスト、配列、オブジェクトのインクリメンタルレンダリング。
任意のモデル – OpenAI、Anthropic、Gemini、Bedrock、Azure、Ollama、またはカスタムバックエンド用のアダプター。
コード実行サンドボックス – モデル生成 JavaScript を安全に実行するオプションのランタイム。

実際の例を実行する

リポジトリには、React と Angular の両方で構築された ATC デモ（航空交通管制マップ）が含まれており、以下を紹介しています：

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