Installation

Installation Methods

Superline Agent Detection can be integrated into your project using various methods, depending on your preferred package manager or project setup.

Package Managers

npm
yarn
pnpm

npm install @superline-ai/agent-detection

yarn add @superline-ai/agent-detection

pnpm add @superline-ai/agent-detection

CDN / Script Tag

You can also include Superline Agent Detection directly in your HTML using a script tag:

<head>
  <!-- Add the script with defer attribute to ensure it loads after the DOM -->
  <script src="https://cdn.jsdelivr.net/npm/@superline-ai/agent-detection/dist/umd/index.umd.js" defer></script>
</head>

When using the script tag method, the library is exposed as a global agentDetector object.

Importing the Library

After installation, you can import the library into your project in different ways:

ES Modules (Recommended)

import AgentDetector from '@superline-ai/agent-detection';

CommonJS

const AgentDetector = require('@superline-ai/agent-detection');

Framework-specific Installation

React

For React applications, you can create a custom hook for easy integration:

// useAgentDetection.js
import { useState, useEffect } from 'react';
import AgentDetector from '@superline-ai/agent-detection';

export function useAgentDetection() {
  const [detectionResult, setDetectionResult] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Initialize the detector when the component mounts
    AgentDetector.init({
      debug: false,
      autoStart: true
    });

    // Check for AI agent after a delay to allow data collection
    const timer = setTimeout(async () => {
      try {
        const result = await AgentDetector.finalizeDetection();
        setDetectionResult(result);
      } catch (error) {
        console.error('Agent detection error:', error);
      } finally {
        setIsLoading(false);
      }
    }, 5000); // 5 seconds delay

    return () => clearTimeout(timer);
  }, []);

  return { detectionResult, isLoading };
}

Next Steps

Now that you have installed Superline Agent Detection, check out our Quick Start guide to learn how to use the library in your application, or explore the API Reference for detailed information about the available methods and options.

Get Started

Core Concepts

API Reference

Installation Methods

Package Managers

CDN / Script Tag

Importing the Library

ES Modules (Recommended)

CommonJS

Framework-specific Installation

React

Next Steps

​Installation Methods

​Package Managers

​CDN / Script Tag

​Importing the Library

​ES Modules (Recommended)

​CommonJS

​Framework-specific Installation

​React

​Next Steps

Installation Methods

Package Managers

CDN / Script Tag

Importing the Library

ES Modules (Recommended)

CommonJS

Framework-specific Installation

React

Next Steps