Skip to main content

​
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 into any website in just a few minutes using our web component.
If you only need the redirecting search bar (not the full results UI), use the
Bonsai Search Bar Web Component instead.

​
Quick Installation

Use this minimal 2-step setup to render Bonsai Search 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-search> element — see Advanced Styling.
1

Install the script

Add the Bonsai Search <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.
<!-- Load Bonsai Search Web Component --> 
<script
  src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
  defer
></script>
2

Add the Web Component

Add the <bonsai-search> web component where you want search 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.
<bonsai-search
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
></bonsai-search>
Important: Replace API-KEY with your actual API key provided by your CSM.
All content and behavior come from the Settings API. Placeholder text, suggestions, result count, price rendering, markdown rendering, and theming 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.If you need to override a specific 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 experience with a query

Not working? Check the Troubleshooting guide for common issues.

​
Next Steps

Customize your component to match your site’s layout and design. For expanded installation guides and pre-styled templates see Examples.

Configuration

Full attribute reference and default values.

Advanced Styling

CSS variables, shadow parts, and themes.

Events Reference

Event lifecycle reference.

Examples

Expanded integration templates.