Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Getting Started

Before getting started, ensure that you’ve had a chance to review the Quickstart prerequisites. Once you have your API key, you can integrate Bonsai AI Search Bar into any website in just a few minutes using our web component.
If you need the full search experience with AI summary and product results,
use the Bonsai Search Web Component instead.

​
Quick Installation

Use this minimal 2-step setup to render Bonsai Search Bar on your website.
Theming is managed in the Bonsai dashboard. When the component loads, it fetches your tenant’s theme and behavior settings from the Settings API using your api-key and applies them automatically. You can still override any value per-embed via CSS custom properties on the <bonsai-searchbar> element — see Advanced Styling.
1

Install the script

Add the Bonsai Search Bar <script> tag to your HTML page. Place this in the <head> section, or before the closing </body> tag. This ensures the script is loaded before the component is rendered.
<script
  src="https://assets.hibonsai.com/sdk/bonsai-searchbar-webcomponent-latest.js"
  defer
></script>
2

Add the component

Add <bonsai-searchbar> where you want the redirecting search bar to appear. Only api-key and base-url are required — the component fetches its placeholder text and suggestion chips from the Settings API using your api-key. Colors are set via CSS custom properties (legacy color attributes are ignored).
<style>
  bonsai-searchbar {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
    --bonsai-muted-color: #9CA3AF;
    --bonsai-input-bg: #f5f5f5;
  }
</style>

<bonsai-searchbar
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
></bonsai-searchbar>
All content and behavior come from the Settings API. Placeholder text, suggestions, theming, and the close-button toggle are configured per-tenant in the Bonsai dashboard and returned by /rest/search-component-config/ when the component loads. The only attributes you set on the tag are api-key, base-url, and optionally theme.search-path is the one exception — it’s the URL this search bar redirects to on submit (defaults to /ai-search). Set it on the tag if your results page lives elsewhere.If you need to override any other value for a single embed, you can still pass the corresponding attribute — it takes precedence over the Settings API response — but prefer the dashboard so every embed stays in sync.
3

Test the search bar with a query

Not working? Check the Troubleshooting guide for common issues.

​
Next Steps

Configuration

Full attribute reference and default values for the Search Bar component.

Advanced Styling

::part(...) usage and full parts reference for Search Bar customization.