LeapHubAI

Integration

Step-by-step guide to embedding the AI Smart Text Editor into your web app

Categories

Back to Documentation

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

For each, you’ll see a Basic Example (no options) and an Example with a Simple Option.

---

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 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");
});

Full Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TextEditor—Basic</title>
</head>
<body>
  <textarea id="editor" rows="6" placeholder="Type something…" ></textarea>

<!-- 1. Load the UMD bundle -->
<script src="https://unpkg.com/@leaphubai/ui-components@latest/dist/main.umd.js"></script>
<!-- 2. Initialize with no options -->
<script>
window.addEventListener("load", () => {
LeapHubAI.initTextEditor("textarea");
});
</script>
</body>
</html>

Example with a Simple Option

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


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

Full Example without Dictation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TextEditor without Dictation</title>
</head>
<body>
  <textarea id="editor" rows="6" placeholder="Speak or type…" ></textarea>

<!-- 1. Load the script bundle -->
<script src="https://unpkg.com/@leaphubai/ui-components@latest/dist/main.umd.js"></script>
<!-- 2. Initialize with dictation disabled -->
<script>
window.addEventListener("load", () => {
LeapHubAI.initTextEditor("textarea", {
enableDictate: false
});
});
</script>
</body>
</html>
---

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

Step 1: Create a <textarea> with a ref

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

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

Then initialize in useEffect (Basic):

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

useEffect(() => {
if (textAreaRef.current) {
TextEditor.initialize(textAreaRef.current);
}
}, []);

return (
<textarea
ref={textAreaRef}
rows={6}
placeholder="Type something…"
className="leaphubai-textarea"
/>
);
}

Full Basic React Example


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

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

useEffect(() => {
if (textAreaRef.current) {
TextEditor.initialize(textAreaRef.current);
}
}, []);

return (
<textarea
ref={textAreaRef}
rows={6}
placeholder="Type something…"
className="leaphubai-textarea"
/>
);
}

Example with a Simple Option

Customize the assistant button label:


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

useEffect(() => {
if (textAreaRef.current) {
TextEditor.initialize(textAreaRef.current, {
assistantLabel: "AI Help"
});
}
}, []);

return (
<textarea
ref={textAreaRef}
rows={6}
placeholder="Ask the AI for help…"
className="leaphubai-textarea"
/>
);
}
---

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.