Skip to main content

Integration

Overview​

The ai12z Knowledge Box is a web component that functions like Google's Knowledge Panel, offering AI-generated content alongside search results on your website. This feature is designed to provide users with relevant and detailed information that enhances the search experience. See Agent Settings API Key to get your API key

Setup​

To integrate the Knowledge Box into your site, include the following script tag in the <head> section of your HTML:

<script
  type="module"
  src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
/>

You can then use the <ai12z-knowledge-box> tag anywhere in your HTML to display the Knowledge Box.

Attributes and Customization​

<ai12z-knowledge-box data-key="<API_KEY>"></ai12z-knowledge-box>

Attributes and Customization​

PropertyDescriptionExampleDefault
data-key (Required)API key from your ai12z Agent settingsdata-key="123456"
data-mode (Optional)Server to use dev or proddata-mode="dev"prod
question (Optional)Sets a pre-loaded question when the component loads Onloadquestion="what does ai12z do"
config-id (Optional)Select particular kb otherwise the default will loadconfig-id="123455"

Configure the data-key, data-mode and config-id via Javascript​

<script>
  document.addEventListener("DOMContentLoaded", function () {
        const kb = document.querySelector("ai12z-knowledge-box")
        kb.setAttribute("data-key", "XYZ")
        kb.setAttribute("data-mode", "dev")
        kb.setAttribute("config-id", "1234")
      })
</script>

Example with Styling​

<html>
  <head>
    <script
      type="module"
      src=https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />
  </head>
  <body>
    <ai12z-knowledge-box
      data-key="5b9acefd6a5b1629dc17dd71cf9c5e75ff0d0dffebb5c6cbe60e982dab730502"
      data-mode="dev"
      relevance-score="false"
    ></ai12z-knowledge-box>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function selectQuery() {
          const knowledgeBox = document.querySelector("ai12z-knowledge-box")
          knowledgeBox.setAttribute("question", "what is a Agent")
        }
        selectQuery()
      })
    </script>
  </body>
</html>

This setup allows for easy deployment and customization, ensuring that the Knowledge Box seamlessly integrates into your website's design and functionality.

To include a privacy policy link, use the <privacy> tag with a custom slot within the <ai12z-knowledge-box> element:

<ai12z-knowledge-box data-key="your_api_key_here">
  <div slot="custom-privacy">
    Privacy Statement
    <a href="https://ai12z.com/privacy-policy/" target="_blank"
      >Click to view</a
    >
  </div>
</ai12z-knowledge-box>

Using the Knowledge Box with Search Results​

This is the case where an organization does not want to replace their search, but instead wants ai12z to show an AI Knowledge Box as they search for results.

Example on how this would look: Knowledge Box positioned between search input and search results

Example code on how to do it

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ai12z Knowledge Box — Simple Search</title>

    <!-- ai12z web components -->
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />

    <style>
      .ai12z-search {
        max-width: 920px;
        margin: 24px auto;
        padding: 0 16px;
        font-family:
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          Arial,
          sans-serif;
      }
      .ai12z-row {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .ai12z-input {
        flex: 1;
        padding: 10px 12px;
        font-size: 15px;
        border: 1px solid #d0d5dd;
        border-radius: 10px;
      }
      .ai12z-btn {
        padding: 10px 14px;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
      }
      .ai12z-kb {
        margin-top: 12px;
      }
    </style>
  </head>

  <body>
    <div class="ai12z-search">
      <div class="ai12z-row">
        <input
          id="kbQuery"
          class="ai12z-input"
          type="search"
          placeholder="Ask a question…"
          autocomplete="off"
        />
        <button id="kbSubmit" class="ai12z-btn" type="button">Search</button>
      </div>

      <div class="ai12z-kb">
        <ai12z-knowledge-box
          id="kb"
          data-key="YOUR_DATA_KEY_HERE"
        ></ai12z-knowledge-box>
      </div>
    </div>

    <script>
      ;(function () {
        const input = document.getElementById("kbQuery")
        const btn = document.getElementById("kbSubmit")
        const kb = document.getElementById("kb")

        // Update the knowledge box with the user's search query
        function runSearch() {
          const q = (input.value || "").trim()
          if (!q) return

          // Trigger the knowledge box to load results for this question
          kb.setAttribute("question", q)
        }

        btn.addEventListener("click", runSearch)
        input.addEventListener("keydown", (e) => {
          if (e.key === "Enter") runSearch()
        })
      })()
    </script>
  </body>
</html>