Hashbrown - Build Agents for the Browser

Hashbrown is an open-source framework for
building agents that run in the browser.
Read Angular Docs | Read React Docs

hashbrown.dev

Submit an Issue | Contributing Guidelines | Code of Conduct

What is Hashbrown | Installation | Getting Started | Supported LLM Providers | Features | Walkthroughs | Core Team | Consulting

Hashbrown 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.

Hashbrown typically needs three packages installed:

• @hashbrownai/core: a shared set of primitives for managing state to/from LLM providers
• @hashbrownai/<angular|react>: a framework-specific set of wrappers for the core primitives to easily tie Hashbrown into framework lifecycle flows
• @hashbrownai/: A provider-specific wrapper for Node backends that wraps a provider SDK to provide consistency between providers.

For example, to use Hashbrown with Angular and OpenAI's GPT models, you could install the requisite packages like so:

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

To use Hashbrown with React and Azure, you'd instead do:

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

Hashbrown 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.

They include:

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

Note 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.

Hashbrown 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.

Hashbrown uses HTTP streaming to communicate between Node backends and UI hooks/resources.

The below example demonstrates exposing a POST endpoint /run that:

• accepts an AG-UI run input containing messages, context, state, and tool definitions
• streams AG-UI events back to the Hashbrown UI mechanisms over SSE

Hashbrown uses /run by default. You can configure another URL as long as the backend and UI use the same value.

import type { RunAgentInput } from '@ag-ui/core';
import { EventEncoder } from '@ag-ui/encoder';
import { HashbrownOpenAI } from '@hashbrownai/openai';

app.post('/run', async (req, res) => {
  const abortController = new AbortController();
  req.once('aborted', () => abortController.abort());
  res.once('close', () => abortController.abort());
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    model: process.env.OPENAI_MODEL ?? 'gpt-5-nano',
    input: req.body as RunAgentInput,
    signal: abortController.signal,
  });
  const encoder = new EventEncoder();

  res.header('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.header('Content-Type', encoder.getContentType());
  res.header('Connection', 'keep-alive');
  res.flushHeaders();

  for await (const event of stream) {
    res.write(encoder.encodeSSE(event));
  }

  if (!res.writableEnded) {
    res.end();
  }
});

See the provider documentation for backend integration guidance.

Configure the provider:

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

With the provider set up, you can use Hashbrown hooks anywhere in your application.

Our docs site has various examples and recipes, like extracting structured data from a text input.

Configure the provider:

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

With the provider set up, you can use Hashbrown hooks anywhere in your application.

Our docs site has various examples and recipes, like equipping a chatbot with tool calling.

Hashbrown offers a toolkit of ways to enhance a UI with intelligence:

• input completions
• structured completions (i.e. natural language )
• component selection and rendering
• tool calling
• code generation and execution

Each 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.

In addition, because LLMs can handle most languages, all Hashbrown features can handle most any language as an input or output.

We've chosen to document them in the context of each UI framework we support.

For Angular: https://hashbrown.dev/docs/angular/start/intro

For React: https://hashbrown.dev/docs/react/start/intro

Invoicing is the maintained example: a React app using Hashbrown, B4 and Pretable to explore a simulated ledger, answer questions with generated UI, and review payment allocations before applying them. All data and allocations are simulated.

Try the invoicing app or run it locally:

nvm use
npm ci
INVOICING_ENV_FILE=/path/to/.env npx nx serve invoicing-server

The environment file must contain OPENAI_API_KEY. In another terminal:

npx nx serve invoicing-react

Open http://127.0.0.1:4326/. See the example README for architecture, verification and deployment details. Angular integration remains covered by the Angular documentation and the example's internal conformance hosts.

hashbrown is a community effort led by Mike Ryan, Brian Love and Ben Taylor.

hashbrown is a community-driven project. Read our contributing guidelines on how to get involved.

Hashbrown is built in the open by LiveLoveApp. We love building products for the web, and have helped engineering teams across startups, banking, and finance.

MIT © LiveLoveApp, LLC