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

The complete JavaScript API can be found under JavaScript -> Frontend Documentation.

Below is a minimal webpage using the Sapling SDK.

<html>
  <head>
    <script src="https://sapling.ai/static/js/sapling-sdk-v1.1.1.min.js"></script>
  </head>
  <body>
    <div contenteditable="true" id="check-space" sapling-ignore="true">Lets get started!</div>

    <script type="text/javascript">
      Sapling.init({
        key: '<api-key>',
        mode: 'dev',
      });

      const contentEditable = document.getElementById('check-space');
      Sapling.observe(contentEditable);
    </script>
  </body>
</html>

caution

Do not serve a page like this publicly, as it exposes the API key.

During development, you can pass in the API key and use Sapling's endpoints by setting mode: 'dev' in the init function.
For production, do not pass the API key in JavaScript. Instead, include the API key in your backend and call Sapling's endpoints from the backend. This is the default setting with mode: 'prod'.
See our Javascript Fullstack Quickstart for a complete example

AI Detection

Here's a minimal webpage with a button for AI detection. Clicking it shows an overall score and highlights the sentences flagged as AI-generated.

<html>
  <head>
    <script src="https://sapling.ai/static/js/sapling-sdk-v1.1.3.min.js"></script>
  </head>
  <body>
    <div contenteditable="true" id="possible-ai-content" sapling-ignore="true">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.</div>
    <button id="ai-detect-button">Check AI</button>

    <script type="text/javascript">
      Sapling.init({
        key: '<api-key>',
        mode: 'dev',
      });

      const contentEditable = document.getElementById('possible-ai-content');
      Sapling.observe(contentEditable);

      const aiDetectButton = document.getElementById('ai-detect-button');
      aiDetectButton.addEventListener('click', () => {
        Sapling.checkOnce(contentEditable, { aiDetect: true });
      });
    </script>
  </body>
</html>

The same caution applies: don't serve this page publicly with your API key in it. The AI Detect HTML Quickstart has more detail, and the AI Detector API reference covers calling the endpoint from your own backend.

AI Detection​

AI Detection