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} export const invoiceKit = createUiKit({
components: [
exposeComponent(InvoiceCard, {
description: 'Show one invoice',
input: { id: s.string('Invoice id') },
}),
exposeComponent(AgingChart, { /* … */ }),
],
});
chat = uiChatResource({
system: 'Help users understand invoices.',
components: [invoiceKit],
});The same API in React and Angular.
The model only renders components you register. Skillet validates their props.
exposeComponent(AgingChart, {
input: { buckets: s.array(…) },
})Tools run in the browser, with your app's state and services.
createTool({
name: 'getInvoices',
handler: () => api.list(),
})Components render while the response streams in.
<hb-render-message [message]="m" />The model composes your components. Bundle them into UI kits.
Read the docsThe model calls functions in your app. Connect MCP servers too.
Read the docsSkillet schemas turn model output into typed JSON.
Read the docsStrings, arrays, and objects parse as they arrive. Magic Text streams Markdown.
Read the docsOpenAI, Anthropic, Gemini, Bedrock, Azure, Ollama, or a model in the browser.
Read the docsRun model-written JavaScript in a sandbox.
Read the docsAn invoicing assistant that answers with the app's own tables and charts. The data is simulated.
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 →
