`React`

Overview

The AI12Z Search/Ask React Control allows seamless integration of AI-powered search capabilities into your React pages. This control is loaded from a Content Delivery Network (CDN) and can be customized through a variety of properties.

Setup

To install from npm

npm install @ai12z/react

Search / Ask AI

Include this below command to use the control.

import { Ai12zCta } from '@ai12z/react'

Then you can use the element anywhere in your template.
The control named as Ai12zCta allows us to show the search results along with the follow up chat conversations and customize our search results.
This control is having two tag element which is mentioned below.

<Ai12zCta>
  <privacy></privacy>
  <cta></cta>
</Ai12zCta>

(Optional) This tag element allows us to add the privacy policy links.

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

(Optional) This tag element allows us to customize our page by adding our own tag elements within this element.

<cta>
    <img src="ai_icon.png" />
</cta>

The control contains following properties to customize the page.

Property	Description	Example	Default
dataKey (Required)	API key from your ai12z project settings	dataKey="123456"
dataMode (Optional)	Server to use `dev` or `prod` or `local`	dataMode="dev"	`prod`
heading (Optional)	Text displayed above the control.	heading="Search Here 1"	empty
buttonText (Optional)	Custom text for the button.	buttonText="Ask me"	`Ask AI`
helpText (Optional)	Helper text displayed in the search input.	helpText="Type your question here..."	`Enter text to get started`
noResultsText (Optional)	allows us to customize the no results found text	noResultsText="No results found..."	`No results found...`
autoSearch (Optional)	If true, returns search results as you type.	autoSearch="true"	`true`
placeholder (Optional)	allows us to customize the placeholder text	placeholder="Enter your question "	empty
categorize (Optional)	If true, output will be organized by category if categories are set up.	`true	`true`
followUpLabel (Optional)	Label for follow up questions	followUpLabel=Another question?	`Do you have a follow up question?`
clearMemory (Optional)	If true, clears the search history upon closing the dialog	clearMmory=	`false`

Knowledge Box

The second control named as Ai12zKnowledgeBox allows us to send the query programmmatically through javascript and rendering the query results by clicking on the button.
Include this below command to use the control.

import { Ai12zKnowledgeBox } from '@ai12z/react'

<Ai12zKnowledgeBox>

</Ai12zKnowledgeBox>

Attributes and Customization

Property	Description	Example	Default
dataKey (Required)	API key from your ai12z project settings	dataKey="123456"
dataMode (Optional)	Server to use `dev` or `prod` or `local`	dataMode="dev"	`prod`
question (Optional)	Sets a pre-loaded question when the component loads Onload	question="what does ai12z do"
relavanceScore (Optional)	View relavance Score	relavanceScore="true"	`false`
thumbsUpDown (Optional)	Enables thumbs up or down feedback	thumbsUpDown="true"	`false`

Typical Usage Example

This example demonstrates how to connect a third-party search box with the Ai12zKnowledgeBox component to handle search queries dynamically. When a user enters a query in the search box and presses the search button, the question is programmatically submitted to the Ai12zKnowledgeBox, which then updates to display the relevant results.

Step 1: Set Up the Component

First, ensure you've imported the Ai12zKnowledgeBox component:

import { Ai12zKnowledgeBox } from '@ai12z/react';

Step 2: Create a Search Box Next, define a search box in your React component where users can input their queries:

import React, { useState } from 'react';

const SearchComponent = () => {
  const [question, setQuestion] = useState('');

  const handleSearch = () => {
    // Assuming `Ai12zKnowledgeBoxRef` is a ref attached to the Ai12zKnowledgeBox component
    Ai12zKnowledgeBoxRef.current.setAttribute('question', question);
  };

  return (
    <div>
      <input
        type="text"
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
        placeholder="Enter your question..."
      />
      <button onClick={handleSearch}>Search</button>
      <Ai12zKnowledgeBox ref={Ai12zKnowledgeBoxRef} dataKey="your-api-key" />
    </div>
  );
};

export default SearchComponent;

In this example, when the user types a question and clicks the search button, the handleSearch function updates the question attribute of the Ai12zKnowledgeBox component via a React ref. This causes the component to re-render and display new content based on the updated question.

Ensure that the dataKey is correctly set to your specific API key for the Ai12zKnowledgeBox.

This setup creates a dynamic interaction where the Ai12zKnowledgeBox immediately reflects the user's queries, allowing for a seamless integration of AI-powered search functionality into your application.

Overview​

Setup

Search / Ask AI​

Knowledge Box​

Attributes and Customization​

Typical Usage Example​

Step 1: Set Up the Component​

Step 3: Connect the Search Box to Ai12zKnowledgeBox​