Skip to main content

​
Bonsai Concierge

Current channel: https://assets.hibonsai.com/sdk/bonsai-agent-latest.js. The -latest.js alias always serves the current stable release.

​
v0.27.0 — 2026-08-10 — Compact Launcher on Small Phones

The launcher now stays a labelled control on narrow phones instead of collapsing to an icon-only button. What changed
  • At 380px and narrower, every launcher renders as a compact tab pinned to the side of the viewport and centered vertically — 8px outer radius, 14px text and icon — whatever launcher-variant and bubble-* position you set. It hides itself while the panel is open.
  • New launcher-compact-label attribute supplies the short text used at that width. Without it, label is reused when it is 10 characters or shorter, otherwise it falls back to Ask AI.
  • New --bonsai-agent-bubble-compact-* variables (top, padding, gap, font size, radius, icon size) control the compact tab. Pinning the base variable does not carry over — set the compact twin as well.
  • launcher-icon now defaults to sparkles rather than the Bonsai mark, so a text-only launcher no longer shows our glyph on your storefront. Set launcher-icon="mark" to keep the previous default.
If you pinned launcher styling Add the -compact-* twin of any launcher variable you set inline, or the 380px tier will use its own default at that width. See Responsive behavior.

​
Bonsai Search SDK

Current channel: https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js (and bonsai-searchbar-webcomponent-latest.js). The -latest.js alias always serves the current stable release — no URL change is required to get new versions.
The authoritative SDK changelog lives in the repo at sdk/CHANGELOG.md. The entries below summarize the changes most likely to affect your integration.

​
v3.2.0 — 2026-02-25 — CSS Variables Become the Styling Model

Breaking change. Attribute-based theming was removed in favor of CSS custom properties. This is the biggest integration-facing change in the 3.x line.

​
What changed

  • Attributes like brand-color, text-color, muted-color, input-bg, card-bg, surface-color, canvas-color, input-text-color, suggestions-text-color, results-text-color, card-text-color, suggestions-hover-bg are no longer observed by <bonsai-search> or <bonsai-searchbar>. Setting them has no effect.
  • All visual customization is now driven by CSS custom properties on the host element (or an ancestor) — see Advanced Styling.
  • The web components now render an outer alignment container and an inner max-width container (bonsai-search-outer-container / bonsai-search-inner-container, bonsai-searchbar-outer-container / bonsai-searchbar-inner-container) so you can control centering and width independently via --bonsai-search-align / --bonsai-searchbar-align and --bonsai-search-max-width / --bonsai-searchbar-max-width.
  • --bonsai-searchbar-margin added so vertical searchbar spacing is configurable.
  • theme="light" | "dark" | "auto" support added (was previously light only in some paths).
  • Framer and Webflow integrations now set CSS variables directly for theming.

​
How to migrate

Replace each removed attribute with the equivalent CSS variable on the host element:

​
JavaScript BonsaiSearchBar class

If you instantiate the class directly with new BonsaiSearchBar({...}), styling props were removed as well:
  • brandColor → --bonsai-brand-color
  • textColor → --bonsai-text-color
  • mutedColor → --bonsai-muted-color
  • inputBackground / inputBg → --bonsai-input-bg
  • suggestionsTextColor → --bonsai-suggestions-text-color
  • inputTextColor → --bonsai-input-text-color
  • suggestionsHoverBg → --bonsai-suggestions-hover-bg
  • inputOpacity → --bonsai-input-opacity

​
Runtime Config from the Settings API

Both <bonsai-search> and <bonsai-searchbar> fetch per-tenant configuration from /rest/search-component-config/ at load time using your api-key. The Settings API can drive:
  • Theming (colors, alignment, max width)
  • Default placeholder and suggestions
  • Behavior toggles (theme, markdown rendering, price rendering, product hiding, autocomplete)
  • Result section labels (featured_items_label, more_items_label, items_label)
Precedence (highest to lowest):
  1. HTML attribute on the tag (if set)
  2. Settings API response for this API key
  3. Built-in default
Page CSS for --bonsai-* variables overrides both, because Settings-API variables are injected at low :host { ... } specificity.

​
New <bonsai-search> capabilities

  • hide-products — boolean attribute that hides product results so only the AI summary is shown. Useful for conversational integrations.
  • on-price — name of a global function used to format prices before rendering. Receives (result, price, parent) and returns the string to display.

​
Upgrading

If you pin a version in your script URL (bonsai-search-webcomponent-<version>.js), switch to the -latest.js alias to always get the current stable release. No other change is required unless your integration still sets removed color attributes — in that case, move them to CSS custom properties per the table above. For the full release history (including pre-3.2 entries), see sdk/CHANGELOG.md in the Bonsai repository.