Skip to main content

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 5000 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.

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.
        <br/><br/>
        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.