Quickstart - Toffee

Existing Project
Agent Skill

1. Create a site

Save your API key immediately. It is shown only once and cannot be retrieved later.

2. Install the SDK

npm install @agent-radar/sdk

3. Initialize

React / Next.js (App Router):

'use client';
import { useEffect, useRef } from 'react';
import { init } from '@agent-radar/sdk';

export function ToffeeProvider() {
  const initialized = useRef(false);
  useEffect(() => {
    if (initialized.current) return;
    initialized.current = true;
    const toffee = init({
      siteId: 'YOUR_SITE_ID',
      apiKey: 'ar_YOUR_KEY',
      endpoint: 'https://api.toffee.at/api/v1/events',
      onDetection: (result) => {
        console.log(result.classification.classification); // 'human' | 'bot' | 'agent'
        console.log(result.riskTier);
        console.log(result.probability);
      },
    });
    return () => { toffee.destroy(); initialized.current = false; };
  }, []);
  return null;
}

Mount in your root layout:

// app/layout.tsx
<body>{children}<ToffeeProvider /></body>

Vue:

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { init } from '@agent-radar/sdk';
let toffee;
onMounted(() => { toffee = init({ siteId: '...', apiKey: 'ar_...', endpoint: '...' }); });
onUnmounted(() => toffee?.destroy());
</script>

Script tag:

<script src="https://cdn.toffee.at/sdk.js"></script>
<script>
  AgentRadar.init({ siteId: '...', apiKey: 'ar_...', endpoint: '...' });
</script>

4. View your dashboard

Open your dashboard at db.toffee.at. Visit your site in another tab — you should see the visit appear within seconds.

Install the Toffee agent skill to let your AI coding agent handle integration for you:

npx skills add VishiATChoudhary/toffee-skills@toffee-integration

Or install globally:

npx skills add VishiATChoudhary/toffee-skills@toffee-integration -g -y

Once installed, your agent can guide you through the full setup — npm install, framework-specific initialization, tracking pixel, element tracking, and common mistakes.Learn more at skills.sh.

Next steps

Installation

npm install, framework guides, and the tracking pixel.

Configuration

Customize detection callbacks, tracking options, and more.

Detection

Learn how Toffee classifies visitors as human or agent.

API Reference

Query your detection data programmatically.

​1. Create a site

​2. Install the SDK

​3. Initialize

​4. View your dashboard

​Next steps

Installation

Configuration

Detection

API Reference

1. Create a site

2. Install the SDK

3. Initialize

4. View your dashboard

Next steps