Integrating the AI Smart Text Editor

This article walks you through embedding the AI Smart Text Editor into your project. We’ll cover:

• Standalone HTML integration
• React integration

Standalone HTML Integration

Prerequisites

1. A basic HTML page with one or more <textarea> elements.
2. Internet access (or your own host) to load the UMD bundle from the CDN.

Step 1: Add your <textarea>

Insert a <textarea> wherever you need the editor:

<textarea id="editor" rows="6" placeholder="Type something…" ></textarea>

Step 2: Include LeapHubAI's script

Right before the closing </body>, load LeapHubAI’s script:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@leaphubai/ui-components@latest/dist/main.umd.js"></script>

Step 3: Initialize the editor (Basic)

After the script, call the global initializer on page load:

window.addEventListener("load", () => {
  // Enhance all <textarea> elements with the AI Smart Text Editor
  LeapHubAI.initTextEditor("textarea", {
    publicApiKey: "lhai-<key>",
    integrationName: "name-of-the-integration",
    auth: "your-jwt-token-here",
  });
});

You can get the API Key from your account, under Settings > Workspaces.

Authentication with JWT

The AI Smart Text Editor uses JSON Web Tokens (JWT) for secure authentication. Your JWT must include specific user and tenant information to properly authenticate requests.

Required JWT Claims

Your JWT payload must include these claims:

• sub (Subject): The unique ID of your user
• tenant: The unique ID of the account or organization the user belongs to

It's also recommended to include standard security claims like iat (issued at), exp (expiration), and jti (unique token ID).

Example JWT payload:

{
  "sub": "user_id_from_your_system",
  "tenant": "account_id_from_your_system",
  "iat": 1678886400,
  "exp": 1678890000
}

Important: Generate JWTs on your secure backend server using the secret key provided by LeapHubAI. Never generate tokens in client-side code.

For detailed JWT generation instructions with code examples in multiple programming languages, see our JWT Token Generation Guide.

Example with a Simple Option

Disabel voice dictation (the “Dictate” button) by passing an options object:

window.addEventListener("load", () => {
  LeapHubAI.initTextEditor("textarea", {
    publicApiKey: "lhai-<key>",
    enableDictate: false   // hide the Dictate button
  });
});

React Integration

Prerequisites

1. A React project (Create React App, Vite, Next.js, etc.).
2. Install the package locally:

npm install --save @leaphubai/ui-components@latest

Step 1: Create a <textarea> with a ref

In your component, set up a ref and import the initializer:

import React, { useRef } from "react";
import { TextEditor } from "@leaphubai/ui-components";

Then initialize alongside with the textarea:

export function YourPage() {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);

  return (<>
    <textarea
      ref={textAreaRef1}
      id="textarea1"
      className="leaphubai-textarea w-full rounded-lg border border-gray-300"
      rows={5}
    />
    <TextEditor
      editorRef={textAreaRef.current}
      options={{
        publicApiKey: "lhai-public-api-key",
        integrationName: "integration-unique-name",
        auth: "generated-jwt-token"
      }}
    />
  </>);
}

With these detailed steps, you can integrate the AI Smart Text Editor in any HTML page or React app—first with the default behavior, then with simple customizations.