Atri AI Documentation

Overview

The @atri-ai/templates package provides production-ready React components that can be easily integrated into any React application. With full TypeScript support and customizable styling, these components offer the fastest path to adding conversational AI to your React projects.

Installation

Install the package via npm in your React project:

npm install @atri-ai/templates

Component Parameters

Required Parameters

projectIdstring

The project ID for your project. Obtain this from your console dashboard or from the URL of a project configuration page.

Optional Parameters

consumerIdstring

Unique identifier for the user. Used to start a fresh conversation and maintain user context across sessions. Must be provided along with hmacSignature for verified consumers.

hmacSignaturestring

HMAC signature to verify the identity of the consumer. Required when consumerId is provided. Should be generated in the backend using the consumer ID and your project's chat API key.

chatIdstring

Specific conversation identifier. Use this to resume an existing conversation instead of starting fresh. When provided, consumerId and hmacSignature are not needed.

Parameter Notes

• For a fresh chat, provide the consumerId and the hmacSignature. To resume an existing chat, provide the chatId.
• If neither consumerId nor chatId is provided, it is assumed to be a fresh chat and cookies are used to create a temporary anonymous consumerId.
• If a chat ID is provided, the consumer ID is automatically identified from previous chats.
• The HMAC signature is needed to verify the identity of the consumer. It should be generated in the backend by passing the consumer ID and your project's chat API key to the API route /hmacSignature.
• The HMAC signature has to be provided if providing a consumer ID. Otherwise, a temporary anonymous consumer ID is created and used for tracking.
• The /latestConsumerChatId or /listAllProjectConsumerChats api endpoints can be used to retrieve chat IDs

Usage Guide

Using ChatTemplatePing

Import the component and styles, then use it in your React application:

import '@atri-ai/templates/styles.css';
import { ChatTemplatePing } from '@atri-ai/templates';

function App() {
  return (
    <div>
      {/* Your existing app content */}
      
      {/* Ping template for quick support */}
      <ChatTemplatePing 
        projectId="your-project-id"
        consumerId="user_12345"
        hmacSignature="hmac-signature-for-the-consumer-id"
      />
    </div>
  );
}

Using ChatTemplateFlow

For immersive conversational experiences:

import '@atri-ai/templates/styles.css';
import { ChatTemplateFlow } from '@atri-ai/templates';

function ChatPage() {
  return (
    <div style={{ height: '100vh' }}>
      <ChatTemplateFlow 
        projectId="your-project-id"
        consumerId="user_12345"
        hmacSignature="hmac-signature-for-the-consumer-id"
      />
    </div>
  );
}

Resuming Existing Conversations

To continue a previous conversation, use the chatId parameter:

// Resume specific conversation
<ChatTemplateFlow 
  projectId="your-project-id"
  chatId="chat_20240711_143052_abc123"
/>

// Or start fresh with a verified user
<ChatTemplatePing 
  projectId="your-project-id"
  consumerId="user_12345"
  hmacSignature="hmac-signature-for-the-consumer-id"
/>

Anonymous Usage

For anonymous temporary sessions without user verification:

// Anonymous session using cookies for tracking
<ChatTemplatePing 
  projectId="your-project-id"
/>

// Anonymous session with flow template
<ChatTemplateFlow 
  projectId="your-project-id"
/>

Security Requirements

• Never expose your API key in client-side requests. The HMAC signature should be generated in your backend.
• Always generate the HMAC signature server-side using the /hmacSignature API route with your project's chat API key.
• The components are fully secure as you only pass the project ID and HMAC signature, not your API keys.

Important Notes

• Always import the CSS styles: @atri-ai/templates/styles.css
• Components are fully responsive and work on mobile devices
• Use /latestConsumerChatId API route to get the latest chat ID for a consumer to resume previous conversations
• For best practices, always provide the consumer ID if you want consumer-level tracking and provide the chat ID only if a previous chat must be resumed

React Component Integration