Hashbrown – AI‑driven chat & agents for React & Angular

What it is – Hashbrown is a head‑less TypeScript framework that lets you add generative AI chat and agent capabilities to a React or Angular web app. It does not ship a UI of its own; instead it streams model‑generated data into the components you already use, letting the AI render your own UI pieces and call functions (tools) that run in the browser.

---

Core ideas

Idea	What it means
Generative UI	You register React/Angular components with a schema (the Skillet schema). When the LLM decides to show something, it emits a component name and props, and Hashbrown renders that component on‑the‑fly.
Client‑side tools	Functions you expose (e.g., fetching data, calling a service) can be invoked by the model. They run in the same browser context as your app, so they have full access to app state.
Streaming	Responses are streamed chunk‑by‑chunk. Components appear as soon as their data arrives, and text can be rendered as “magic text” (Markdown‑like) while streaming.
Provider‑agnostic	The framework works with any LLM that can stream JSON: OpenAI, Anthropic, Google Gemini, Amazon Bedrock, Azure OpenAI, Ollama, or a custom backend you host.
Headless	No built‑in chat UI; you keep your design system. A separate project (threadplane) provides a full UI built on top of Hashbrown.

---

Packages & installation

Package	Purpose
@hashbrownai/core	Framework‑agnostic primitives, Skillet schema language, streaming JSON parser.
@hashbrownai/react / @hashbrownai/angular	Hooks, components, and utilities specific to the chosen front‑end framework.
@hashbrownai/<provider> (e.g., openai, anthropic)	Node adapters that translate a /run request into the provider’s SDK and stream events back to the browser.

Typical install (React + OpenAI)

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

Typical install (Angular + OpenAI)

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

---

How it works – three steps

1. Expose components – Register the UI pieces the model may render, describing their props with a Skillet schema.

   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,
     })
   ];
   

2. Provide tools – Define functions the model can call. In the browser they can read/write app state.

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

3. Render the streaming response – Map over chat.messages; assistant messages contain a ui field that is a ready‑to‑render component tree.

   return chat.messages.map(m => m.role === 'assistant' ? m.ui : m.content);
   

All three steps are mirrored in Angular with analogous APIs (exposeComponent, uiChatResource, hb‑render‑message).

---

Feature checklist

• Generative UI – Model‑driven component composition.
• Client‑side tools – Function calling inside the app.
• Structured output – Skillet schemas enforce typed JSON.
• Streaming – Incremental rendering of text, arrays, objects.
• Any model – Adapters for OpenAI, Anthropic, Gemini, Bedrock, Azure, Ollama, or custom back‑ends.
• Code execution sandbox – Optional runtime to safely run model‑generated JavaScript.

---

Running a real example

The repository ships an ATC demo (air‑traffic‑control map) built twice – once for React, once for Angular – that showcases:

• Live map data from adsb.lol.
• An assistant that answers questions using the registered FlightCard component and a tool that looks up aircraft.

To try it locally:

nvm use
npm ci
npx nx serve atc-server   # starts the Express bridge that talks to OpenAI
npx nx serve atc-react    # React front‑end (or atc-angular for Angular)

Set OPENAI_API_KEY in a .env file first.

---

When you need a full UI

Hashbrown only handles the backend logic and streaming. For a ready‑made chat interface, the team offers threadplane (MIT‑licensed, with optional enterprise support) that builds on Hashbrown to provide threads, approvals, and tool‑progress UI.

---

Who’s behind it

Led by Brian Love at LiveLoveApp, LLC. The project is MIT‑licensed and welcomes community contributions.

---

TL;DR

Hashbrown lets you embed LLM‑driven assistants directly into your React or Angular app, using your own components and browser‑side functions, with streaming and provider‑agnostic support. It’s a solid choice if you want a flexible, headless foundation for generative UI and tool‑calling without being forced into a pre‑made chat UI.