AI chat and agents for your React or Angular app

Hashbrown is a headless TypeScript framework. The model renders your components and calls your tools, in the browser, with any provider.

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

Quick start →

assistant.ts

const components = [
  exposeComponent(FlightCardComponent, {
    name: 'FlightCard',
    description: 'One aircraft on the map, with live altitude and speed.',
    input: {
      note: s.streaming.string('A sentence or two about this flight'),
      hex: s.string('The aircraft hex code from a tool result.'),
    },
    fallback: FlightCardFallbackComponent,
    children: false,
  }),
];

chat = uiChatResource({
  system: 'Provided by the server.',
  components,
  tools: [createTool(this.atc.findAircraft)],
});

OpenAI Anthropic Gemini BedrockAzure OllamaLocal models

1
Expose your components
The model only renders components you register. Skillet validates their props.
```
exposeComponent(AgingChart, {
  input: { buckets: s.array(…) },
})
```

Give it tools

Tools run in the browser, with your app's state and services.

createTool({
  name: 'getInvoices',
  handler: () => api.list(),
})

3
Render the stream
Components render while the response streams in.
```
<hb-render-message [message]="m" />
```

Generative UI

The model composes your components. Bundle them into UI kits.

Read the docs

Client-side tools

The model calls functions in your app. Connect MCP servers too.

Read the docs

Structured output

Skillet schemas turn model output into typed JSON.

Read the docs

Streaming

Strings, arrays, and objects parse as they arrive. Magic Text streams Markdown.

Read the docs

Any model

OpenAI, Anthropic, Gemini, Bedrock, Azure, Ollama, or a model in the browser.

Read the docs

Code execution

Run model-written JavaScript in a sandbox.

Read the docs

See it in a real app

atc is a live map of the planes over the Pacific Northwest. Ask about them, and the assistant answers with the app's own flight cards and arrivals boards.

Your componentsThe model picks the cards and boards

Tools in the browserSearch, highlight and follow planes on the map

Angular and ReactThe same app, built in both

Try the app ↗Read the source

The atc example answering what is landing at Seattle with a flight card and an arrivals board, beside a map of the Seattle area that highlights the arriving plane

The atc example on a phone answering which planes are the highest and fastest, with a flight card under a map of the Pacific Northwest that labels both planes

Need enterprise chat UI for your agents?

threadplane is the full agent UI for React and Angular: threads, approvals, and tool progress. Free and MIT, with enterprise support from the team behind Hashbrown.

Explore threadplane →