Getting Started

💻 Install package

Use your preferred package manager to install the Adgent package.

# using npm as package manager
npm install adgent-react

🔑 Acquire API key

Go to Developer Dashboard to get your API key.

💬 Add enrichments to chatbox

Wrap your chatbox in the EnrichmentProvider component, and pass the messages to it.
The EnrichmentProvider component is responsible for sending requests to our backend,
and fetching the appropriate enrichment.
Add the Enrichment component outside of the loop that renders your messages,
this component is responsible for displaying the fetched enrichment.
Provide appropriate styles to Enrichment to ensure it blends in with your chatbox.

import { EnrichmentProvider, Enrichment } from "adgent-react";
 
const apiKey = process.env.NEXT_PUBLIC_ADGENT_API_KEY;
// ...
// Add EnrichmentProvider around your chatbox
<EnrichmentProvider apiKey={apiKey} messages={messages}>
 
    {messages.map((message, index) => (
        <YourMessageComponent key={index} message={message} />
    ))}
 
    // Add Enrichment component outside of the message components
    <Enrichment darkMode={true} styles={{
      marginLeft: "10px",
      ...
    }}/>
 
</EnrichmentProvider>

Using custom type for messages?

By default, the component expects the messages to be of type Message[].
The message type is defined as follows:

type Message = {
  role: "user" | "assistant" | ...;
  content: string;
  ...;
};

A role field with both "user" and "assistant" present and a content field for text messages are mandatory.

If you are using a different type, you can pass an additional prop messageConfig to the component.

The messageConfig is defined as follows:

type MessageConfig = {
  roleFieldName: string;
  roleFieldUserValue: string;
  roleFieldAssistantValue: string;
  contentFieldName: string;
};

🧪 Testing

To test the enrichment, you can set the testMode prop to true. This will display mock enrichments.
Use testMode to ensure that your enrichment component renders consistently with your ui.

    <Enrichment testMode={true}/>

🎉 Done

Setup is completed! You can view your statistics in the Dashboard.