@hashbrownai/react gives you Hashbrown's hooks and components for React: chat and UI chat hooks, tools, UI kits, and Magic Text rendering.

Getting Started

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

Point Hashbrown at your server:

export function Providers({ children }: { children: React.ReactNode }) {
  return <HashbrownProvider url="/run">{children}</HashbrownProvider>;
}

HashbrownProvider accepts:

• url (required): Base URL of your Hashbrown API endpoint.
• middleware (optional): Functions to transform requests before they are sent.
• transport (optional): Custom AG-UI transport for descendant hooks.

Expose your components and give the model tools. The model only renders components you register, and Skillet validates their props. Tools run in the browser, with your app's state and services.

export function InvoiceChat({ api }: { api: InvoiceApi }) {
  const getInvoices = useTool({
    name: 'getInvoices',
    description: 'List the invoices',
    handler: () => api.list(),
    deps: [api],
  });

  const chat = useUiChat({
    system: 'Help users understand invoices.',
    components: [
      exposeComponent(InvoiceCard, {
        description: 'Show one invoice',
        props: { id: s.string('Invoice id') },
      }),
    ],
    tools: [getInvoices],
  });

  // Components render while the response streams in.
  return chat.messages.map((message) =>
    message.role === 'assistant' ? message.ui : message.content,
  );
}

Docs

Read the React quick start and the React docs.

Connect a Model

Your server keeps the API key and streams from a Hashbrown adapter:

• OpenAI: @hashbrownai/openai
• Anthropic: @hashbrownai/anthropic
• Google Gemini: @hashbrownai/google
• Amazon Bedrock: @hashbrownai/bedrock
• Azure OpenAI: @hashbrownai/azure
• Ollama: @hashbrownai/ollama
• Your own backend

Need a Complete Chat UI?

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

Contributing

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

License

MIT © LiveLoveApp, LLC