Getting Started

TruxtModal is a lightweight React component that allows you to integrate an AI-powered chatbot modal into your application.

Installation

You can install the package using either npm or yarn:

Install with npm

npm install @truxt-ai/client-modal

Install with yarn

 yarn add  @truxt-ai/client-modal

Importing the Component

import { TruxtModal } from "@truxt-ai/client-modal";

Component

<TruxtModal API={your_API_key} ButtonText={your_button_text} />

Usage Example

The TruxtModal component requires two props: your AI API key and the button text to trigger the modal.

Here's a complete example of how to implement it in a React app:

import React from "react";
import { TruxtModal } from "@truxt-ai/client-modal";

const App = () => {
  const apiKey = "qwertyuiopa";
  const buttonText = "Ask AI";

  return (
    <div className="App">
      <TruxtModal API={apiKey} ButtonText={buttonText} />
    </div>
  );
};

export default App;

Props

1. API (required) :

   This is the API key that provides access to the AI service. You need to generate or acquire an API key from the AI provider that powers the chatbot functionality. Without this key, the component won't be able to interact with the AI backend and fetch responses.

2. ButtonText (required) :

   This is the text that will be displayed on the button which triggers the AI chatbot modal. It allows you to customize the call-to-action for your users. For instance, you might use "Ask AI" for a general assistant or customize it further to fit the chatbot's role (e.g., "Chat with Support").

Additional Notes:

Customization: These props allow you to easily integrate the AI modal into different parts of your website while retaining the flexibility to change the button's purpose with customizable text. For instance, the ButtonText could be "Get Help," "Talk to AI," or anything that aligns with your use case.

Security: Ensure that you keep your API key safe and secure. Avoid exposing it in client-side code if possible, or consider using backend services to manage the key if necessary.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Keywords

AI, Truxt, AI-Modal, Chat-Modal, AI-Chatbot, AI-Integration, React-Chatbot, AI-React-Component, AI-Modal-Integration