App

Changelog · — A new IP page with IP history, Monocle Health Alerts, AI traffic in Explorer, and edge access tokens.

JavaScript

Install with AI

If an AI coding assistant works in your repository, it can do this install for you. The prompt is generated for your app, with your publishable key already filled in; it never includes your secret key.

  1. In the Monocle dashboard, create an app and choose JavaScript as the integration.
  2. On the implementation step, open the Install with AI tab. Select Copy prompt, or Download to save it as monocle-install.md in your repo.
  3. Hand the prompt to your assistant, such as Lovable, Cursor or Claude Code, with the project open.
  4. When it has finished, run the app and load a page so Monocle sends its first assessment, then return to the dashboard and select Continue. Monocle verifies the install by detecting that traffic.

The prompt covers only adding the script tag and getting traffic flowing. It tells the assistant to keep the change small, to merge the Monocle hosts into any Content Security Policy the project sets, and to stop and report rather than force a peer dependency conflict or change a project that does not match this framework. It adds no blocking and no backend decryption: session-level analysis, below, is a separate step you take once you can see your traffic.

Manual install

Follow these steps to add the SDK yourself.

  1. 1
    Add the SDK using a script tag

    This <script> tag will load Monocle's JavaScript SDK from our CDN and initialize it with your Monocle Publishable Key.

    html
    <script async src="https://js.mcl.io/d/mcl.js?tk=<MONOCLE PUBLISHABLE KEY>" id="_mcl"></script>

Session-Level Analysis (Optional)

  1. 2
    Add the monocle-enriched class to your form

    By default, Monocle appends the encrypted assessment as a hidden field named monocle to any form elements that have the class monocle-enriched.

    html
    <form class="monocle-enriched" action="/submit" method="POST">
      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">Submit</button>
    </form>
  2. 3
    Decrypt the assessment

    Use the @spur.us/monocle-backend package to decrypt the assessment in your Node.js environment. In this example, we're using an express server.

    terminal
    npm install @spur.us/monocle-backend
    .env
    MONOCLE_SECRET_KEY=<your-secret-key>
    javascript
    const { createMonocleClient } = require("@spur.us/monocle-backend");
    const express = require("express");
    

    var app = express();
    

    app.post("/submit", express.urlencoded({ extended: true }), async (req, res) => {
      const encryptedAssessment = req.body.monocle;
    

      try {
        const monocleClient = await createMonocleClient({
          secretKey: process.env.MONOCLE_SECRET_KEY,
        });
    

        const decryptedAssessment = await monocleClient.decryptAssessment(encryptedAssessment);
        // Handle decrypted assessment
      } catch (error) {
        // Handle error
      }
    });

Related