AI Detect JavaScript Quickstart

Developer Key

A rate-limited API developer key can be provisioned from the Sapling API dashboard. Developer keys allow for processing of 50,000 characters every 24 hours. Subscribe for production access and usage-based pricing.

Javascript SDK for AI Detection

This page explains how Sapling's Javascript SDK provides a plug-and-play UI integration for AI content detection. Using this AI detection SDK allows developers to easily add the ability to flag AI-generated content in any textarea / contenteditable.

If you would rather call the endpoint from your own backend, see the Node example or the AI detector API reference.

1. Full-stack setup

The AI Detect integration builds upon our Fullstack Javascript Quickstart. Be sure to complete that guide before continuing.

2. Add AI Detection button

Open App.js and replace its contents with the following code

/<project-folder>/client/src/App.js

import './App.css';

import { useEffect } from 'react';
import { Sapling } from "@saplingai/sapling-js/observer";

function App() {
  useEffect(() => {
    Sapling.init({
      endpointHostname: 'http://127.0.0.1:5000',
      saplingPathPrefix: '/sapling',
    });

    const editor = document.getElementById('editor');
    Sapling.observe(editor);

    const button = document.getElementById('ai-detect-btn');
    button.addEventListener('click', () => {
      Sapling.checkOnce(editor, {aiDetect: true});
    });
  });

  return (
    <>
      <div
        id="editor"
        sapling-ignore="true"
        contentEditable="true"
        style={{
          margin: '40px auto',
          padding: '10px',
          border: '2px solid black',
          width: '500px',
        }}>
        Phone chargers are essential accessories that have become an integral part of modern life. These devices are designed to replenish the battery life of our smartphones and other electronic gadgets, enabling us to stay connected and productive throughout the day. With advancements in technology, phone chargers have evolved significantly, offering various types such as wired, wireless, fast-charging, and portable chargers. The convenience and versatility of phone chargers have revolutionized the way we use our devices, ensuring we can always stay powered up and connected in our fast-paced, digital world. Portable phone chargers, also known as power banks, have become a lifesaver for people on the go. These compact, battery-powered devices store electrical energy that can be used to charge our phones when an outlet is unavailable. Whether traveling, camping, or during emergencies, power banks ensure we are never left stranded with a dead phone battery.
      </div>
      <button id="ai-detect-btn" style={{
          padding: '10px',
          border: '2px solid black',
          width: '500px',
          height: '40px',
          cursor: 'pointer',
        }}>Check AI</button>
    </>
  );
}

export default App;

3. Test it out!

That's it! Go to http://localhost:3000 and click the button! You'll see an overall score pop-up, and suspicious sentences higlighted in red.

4. One-time checks in a textarea

With the browser SDK bundled in @saplingai/sapling-js 1.0.54 (SDK bundle v1.1.3), you can run a one-time AI detection check on a <textarea> without first calling Sapling.observe(). To try it, replace the contents of App.js from step 2 with this version, which renders a textarea and never observes it:

/<project-folder>/client/src/App.js

import './App.css';

import { useEffect } from 'react';
import { Sapling } from "@saplingai/sapling-js/observer";

function App() {
  useEffect(() => {
    Sapling.init({
      endpointHostname: 'http://127.0.0.1:5000',
      saplingPathPrefix: '/sapling',
    });
  }, []);

  const checkAI = () => {
    // No Sapling.observe() call: this is a one-time check.
    const textarea = document.getElementById('ai-detect-textarea');
    Sapling.checkOnce(textarea, {aiDetect: true});
  };

  return (
    <>
      <textarea
        id="ai-detect-textarea"
        rows={10}
        defaultValue="Paste text here to check whether it was written by AI."
        style={{
          display: 'block',
          margin: '40px auto 0',
          padding: '10px',
          border: '2px solid black',
          width: '500px',
        }}
      />
      <button id="ai-detect-btn" onClick={checkAI} style={{
          display: 'block',
          margin: '0 auto',
          padding: '10px',
          border: '2px solid black',
          width: '500px',
          height: '40px',
          cursor: 'pointer',
        }}>Check AI</button>
    </>
  );
}

export default App;

Keep the API key on your backend as in the full-stack setup above. Sapling.observe() remains appropriate for continuous grammar suggestions. AI-detection sentence highlights and score badges also stay aligned with the text when a textarea or scrollable contenteditable is scrolled.