> ## 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. # Bonsai Search Bar > Self-serve guide for integrating the Bonsai Search Bar web component into your website ## Getting Started Before getting started, ensure that you've had a chance to review the [Quickstart prerequisites](/project/docs/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](/project/docs/bonsai-search/integration) 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 `` element — see [Advanced Styling](/project/docs/bonsai-searchbar/styling). Add the Bonsai Search Bar ` ``` Add `` 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). ```html theme={null} ``` **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. Not working? Check the [Troubleshooting](/project/docs/troubleshooting) guide for common issues. ## Next Steps Full attribute reference and default values for the Search Bar component. `::part(...)` usage and full parts reference for Search Bar customization.