Search Panel
🧩 Overview
The ai12z Search Panel allows seamless integration of AI-powered search capabilities which will show the suggestions with concise information.
📖 How to use
- Implement the Component
You can use the<ai12z-search-panel>tag to include the search panel component in your HTML. This tag supports customization through several attributes.
| Property | Type | Required | Description |
|---|---|---|---|
| data-key | string | ✔️ | API key from your ai12z Agent settings |
| data-mode | string | ✔️ | Server to use dev or prod or local |
| redirect-url | string | ✔️ | The URL to redirect the user to after a search is submitted. |
| placeholder | string | ❌ | Allow us to customize the placeholder text in the searchbar |
💻 Example Code
<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>
<div class="search-panel">
<ai12z-search-panel
data-key="your_api_key_here"
data-mode=""
placeholder="AI search"
redirect-url="/searchpage"
></ai12z-search-panel>
</div>
</body>
</html>