App

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

Quick Start

Set up Monocle in a few minutes. Create an application in the Spur app, choose how you'll run Monocle, and Monocle confirms the install when it sees your first traffic.

Before you start, you need a Spur account. Sign up or log in.

  1. 1
    Add your application

    In the Monocle dashboard, select Get Started (your first application) or Add application.

    Give your application or site a name. This helps label traffic in Monocle, and you can change the name or add more applications later.

    The Add your Application or Site step with an example name
  2. 2
    Select your platform

    Choose how Monocle will run on your site:

    PlatformHow it worksBest for
    JavaScriptAdd a script tag to your pagesPlain HTML or server-rendered sites
    Next.jsInstall the @spur.us/monocle-nextjs packageNext.js apps
    ReactInstall the @spur.us/monocle-react packageReact apps (Vite or your own setup)
    CloudflareMonocle deploys a Cloudflare Worker for youSites behind Cloudflare, with no code changes
    FastlyMonocle deploys a Fastly Compute service for youSites behind Fastly, with no code changes
    CloudFrontMonocle connects to your AWS account and deploys a Lambda@Edge integrationSites behind Amazon CloudFront, with no code changes

    The Cloudflare, Fastly and CloudFront integrations can also enforce your policy at the edge; see Assess & Enforce. With the SDKs, your application enforces decisions itself; see Implementation.

    The Select Your Platform step
  3. 3
    Install Monocle

    Choose how to install: with your AI assistant or manually for JavaScript, React and Next.js, or with an edge integration for Cloudflare, Fastly and CloudFront.

    Install with AI

    JavaScript, React or Next.js

    Let your AI coding assistant do the install.

    1. Open the Install with AI tab.
    2. Select Copy prompt and paste it into your assistant (for example Lovable, Cursor or Claude Code), or select Download to save the instructions as a markdown file in your repo.
    3. Let the assistant make the changes.

    Your publishable key is already filled in, and the prompt never includes your secret key. The prompt tells the assistant where to add Monocle for your platform, how to handle a content security policy, and how to check its work.

    The Install with AI tab with the prompt preview and the Copy prompt and Download buttons

    Install manually

    JavaScript, React or Next.js

    On the Manual install tab, follow the steps for your platform. They match the integration guides:

    The Manual install tab for a Next.js application

    Deploy an edge integration

    Cloudflare, Fastly or CloudFront

    The app walks you through four steps, then deploys Monocle for you:

    StepCloudflareFastlyCloudFront
    1Connect CloudflareConnect FastlyConnect AWS
    2DomainDomain & OriginDomain
    3Assessment ScopeAssessment ScopeAssessment Scope
    4Block ResponseBlock ResponseBlock Response
    FinishDeploy WorkerDeploy ServiceDeploy to CloudFront

    For what to choose in Assessment Scope and Block Response, see Assess & Enforce. For the connection steps, see the guide for your platform: Cloudflare, Fastly or CloudFront.

    Assessment Scope in the Cloudflare setup wizard
  4. 4
    Check it's working

    If you installed an SDK, run your app and load a page so Monocle sends its first assessment, then return to the Spur app and select Continue. If you deployed an edge integration, the app takes you to your application once the deploy finishes; visit your site so traffic passes through Monocle.

    Monocle shows Watching for Traffic until it detects your first traffic, then Welcome to Monocle! Select View Intelligence to open the dashboard.

    To check on an application later, open the application selector at the top of the Monocle dashboard, or search for it in the command palette. The status dot next to each application shows whether Monocle is receiving traffic:

    • Gray No traffic seen yet; setup is still in progress
    • Green Traffic seen within the application's alert threshold (the last 3 days by default)
    • Red No traffic for longer than the application's alert threshold (3 days by default)

    Hover over a red dot to see how long ago traffic was last seen. A gray dot shows Setup in Progress. Organization admins can change the threshold under Alert after in the application's Settings, from 1 to 7 days. When an application turns red, organization admins are emailed.

    An application with a green status dot in the application selector

    If the dot stays gray after you've loaded your site, check your install against your platform's guide.

Next steps