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 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.
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-3.0.9.js"
  defer
></script>
2

Add the component

Add <bonsai-searchbar> where you want the redirecting search bar to appear.
<bonsai-searchbar
  search-path="/ai-search"
  placeholder="Describe what you're looking for..."
  suggestions='["suggestion 1", "suggestion 2"]'
  brand-color="#0A5B3B"
  text-color="#303030"
  muted-color="#9CA3AF"
  input-bg="#f5f5f5"
  input-opacity="1"
  close-button
></bonsai-searchbar>
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.