Examples - Bonsai

Copy-paste minimal integration

This minimal example includes required attributes, event listeners, and a small CSS override.

<!-- Load Bonsai Search Web Component -->
<script
  src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
  defer
></script>

<style>
  bonsai-search {
    --bonsai-brand-color: #0a5b3b;
    --bonsai-search-max-width: 42rem;
  }
</style>

<bonsai-search
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
></bonsai-search>

<script>
  const search = document.querySelector("bonsai-search");

  search.addEventListener("search", (event) => {
    console.log("Search submitted:", event.detail.query);
  });

  search.addEventListener("results", (event) => {
    console.log("Results received:", event.detail.results.length);
  });

  search.addEventListener("error", (event) => {
    console.error("Search error:", event.detail.error);
  });
</script>

Full example with wrapper styling

This example wraps the component in a container with custom CSS for layout and theming. Colors are set via CSS custom properties on the host element.

<!-- Load Bonsai Search Web Component -->
<script
  src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
  defer
></script>

<style>
  .bonsai-search-outer-container {
    width: 100%;
    max-width: 42rem;
    margin: 4rem auto;
    min-height: 350px;
  }

  bonsai-search {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
    --bonsai-muted-color: #9CA3AF;
  }
</style>

<div class="bonsai-search-outer-container">
  <bonsai-search
    api-key="API-KEY"
    base-url="https://api.hibonsai.com/rest/search/v3/"
  ></bonsai-search>
</div>

Component using CSS variables

<bonsai-search
  style="
    --bonsai-font-body: 'Space Grotesk', sans-serif;
    --bonsai-font-heading: 'Space Grotesk', sans-serif;
    --bonsai-font-mono: 'IBM Plex Mono', monospace;
    --bonsai-search-max-width: 100%;
    --bonsai-text-color: #111111;
    --bonsai-muted-color: #6b7280;
    --bonsai-input-bg: #ffffff;
    --bonsai-input-text-color: #111111;
    --bonsai-suggestions-text-color: #111111;
    --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
    --bonsai-results-text-color: #eaeaea;
    --bonsai-card-text-color: #111111;
  "
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
  theme="dark"
></bonsai-search>

Full page template (light theme)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bonsai Search (Light Theme)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      .bonsai-search-outer-container {
        width: 100%;
        max-width: 1200px;
        margin: 4rem auto;
        min-height: 350px;
      }

      bonsai-search {
        --bonsai-font-body: 'Space Grotesk', sans-serif;
        --bonsai-font-heading: 'Space Grotesk', sans-serif;
        --bonsai-font-mono: 'IBM Plex Mono', monospace;
        --bonsai-search-max-width: 100%;
        --bonsai-brand-color: #0A5B3B;
        --bonsai-text-color: #111111;
        --bonsai-muted-color: #6b7280;
        --bonsai-input-bg: #f5f5f5;
        --bonsai-input-text-color: #111111;
        --bonsai-suggestions-text-color: #111111;
        --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
        --bonsai-card-bg: #ffffff;
        --bonsai-surface-color: #ffffff;
        --bonsai-canvas-color: #fafafa;
        --bonsai-image-object-fit: cover;
      }
    </style>
    <script
      src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
      defer
    ></script>
  </head>
  <body style="background: #ffffff">
    <div class="bonsai-search-outer-container">
      <bonsai-search
        api-key="API-KEY"
        base-url="https://api.hibonsai.com/rest/search/v3/"
        theme="light"
      ></bonsai-search>
    </div>
  </body>
</html>

Full page template (dark theme)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bonsai Search (Dark Theme)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      .bonsai-search-outer-container {
        width: 100%;
        max-width: 1200px;
        margin: 4rem auto;
        min-height: 350px;
      }

      bonsai-search {
        --bonsai-font-body: 'Space Grotesk', sans-serif;
        --bonsai-font-heading: 'Space Grotesk', sans-serif;
        --bonsai-font-mono: 'IBM Plex Mono', monospace;
        --bonsai-search-max-width: 100%;
        --bonsai-card-bg: #ffffff;
        --bonsai-surface-color: #ffffff;
        --bonsai-input-bg: #ffffff;
        --bonsai-input-text-color: #111111;
        --bonsai-suggestions-text-color: #111111;
        --bonsai-results-text-color: #eaeaea;
        --bonsai-card-text-color: #111111;
        --bonsai-muted-color: #6b7280;
        --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
        --bonsai-image-object-fit: cover;
      }
    </style>
    <script
      src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
      defer
    ></script>
  </head>
  <body style="background: #000000">
    <div class="bonsai-search-outer-container">
      <bonsai-search
        api-key="API-KEY"
        base-url="https://api.hibonsai.com/rest/search/v3/"
        theme="dark"
      ></bonsai-search>
    </div>
  </body>
</html>

​Next

Next