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

Add the Web Component

Add the <bonsai-search> web component where you want search to appear.
<bonsai-search
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
  placeholder="Describe what you're looking for..."
  suggestions='[
    "Which product is best for my space?",
    "What features does this product have?",
    "How does this product work?"
  ]'
></bonsai-search>
Important: Replace API-KEY with your actual API key provided by your CSM.
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.