​
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 install @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:

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.