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.
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 also override values per-embed via CSS custom properties set on the <bonsai-searchbar> element — see Advanced Styling.Building a dark search bar? theme="dark" fixes the colour variables so neither the dashboard nor your page CSS can change them. Read Dark theme first.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.2
Add the component
Add
<bonsai-searchbar> where you want the redirecting search bar to appear. Only api-key is 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).Most content comes from the Settings API. Placeholder text, suggestions and autocomplete are configured per-tenant in the Bonsai dashboard and returned by
/rest/search-component-config/ when the component loads, so a minimal tag is usually enough.Two things are set on the tag, never from the dashboard: search-path, the page this search bar redirects to on submit (defaults to /ai-search), and close-button, which is read from the attribute only.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.
Events Reference
The
close event, and putting the search bar behind a trigger in your header.Advanced Styling
::part(...) usage and full parts reference for Search Bar customization.