> ## 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 also override values per-embed via CSS custom properties set on the `` element — see [Advanced Styling](/project/docs/bonsai-searchbar/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](/project/docs/bonsai-searchbar/styling#dark-theme) first. Add the Bonsai Search Bar ` ``` Add `` 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). ```html theme={null} ``` **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. 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. The `close` event, and putting the search bar behind a trigger in your header. `::part(...)` usage and full parts reference for Search Bar customization. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.