ai-setup 5 min read

IsAgent – React SDK for AI Agent Detection by Stytch

A lightweight React SDK from Stytch that detects AI agents on your site and lets you serve different content to bots vs. humans. Easy drop-in components.

#react #sdk #agent-detection#stytch #ai-setup
By
Share: X in
IsAgent SDK product thumbnail

TL;DR

TL;DR: IsAgent is a React SDK by Stytch that detects AI agents visiting your site and lets you conditionally render content for bots or humans — useful for anti-scraping, agent-specific UX, or blocking AI crawlers.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

What Is IsAgent?

IsAgent is a React library built by Stytch that detects AI agents and bots (including ChatGPT Agent and similar agents) visiting your web application. It exposes React components and hooks that let you conditionally render content based on whether the visitor is a human or an AI agent.

The SDK uses the User-Agent client hint pattern to determine if a visitor is likely an AI agent. It returns:

  • isAgentClientHint – boolean indicating if the client appears to be an agent
  • identity – detected agent identity string, if available
  • loading – detection in progress state
  • error – any errors encountered

Setup Workflow

Step 1: Install the SDK

npm install @stytch/is-agent

Requirements: React 17.0.0 or higher and a Stytch public token.

Step 2: Get a Stytch Public Token

  1. Sign up at stytch.com
  2. Create a new project
  3. Copy the public token from your project dashboard

Step 3: Initialize the Provider

Wrap your app with the agent context provider using your Stytch public token:

import React from 'react';
import { createAgentContext } from '@stytch/is-agent';

const { IsAgent, IsHuman } = createAgentContext('your-stytch-public-token');

function App() {
  return (
    <div>
      <IsHuman>
        <p>This content is only shown to humans.</p>
      </IsHuman>

      <IsAgent>
        <p>This content is only shown to AI agents.</p>
      </IsAgent>
    </div>
  );
}

Step 4: Use the Hook Directly

For more control, use the useIsAgent hook:

function MyComponent() {
  const { isAgentClientHint, identity, loading, error } = useIsAgent();

  if (loading) return <div>Checking visitor type...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <p>Agent detected: {isAgentClientHint ? 'Yes' : 'No'}</p>
      {identity && <p>Identity: {identity}</p>}
    </div>
  );
}

Deeper Analysis

What Signals Does It Use?

The SDK checks the User-Agent client hint header to determine if the visitor is an AI agent. This is a lightweight detection mechanism — it does not use fingerprinting or behavioral analysis. The actual detection logic lives in Stytch’s infrastructure, which maintains an up-to-date list of known AI agent signatures.

Use Cases

  • Anti-scraping walls — serve limited or fake data to detected agents
  • Agent-specific UX — customize how your app behaves when an AI agent visits
  • Access control — block AI agents from certain endpoints
  • Analytics segmentation — separate agent traffic from human traffic in your metrics

Comparison with Alternatives

IsAgent is purpose-built for React applications and maintained by Stytch, which has an established identity and authentication product line. For a self-hosted or framework-agnostic alternative, consider Agent Armor (also on runany.dev). Agent Armor works at the server level (Express middleware or Cloudflare Worker) rather than in the React component tree.

Practical Evaluation Checklist

  • [ ] npm install @stytch/is-agent succeeds
  • [ ] Provider wraps the app correctly with a valid Stytch public token
  • [ ] <IsHuman> renders for a normal browser session
  • [ ] <IsAgent> renders when an agent visits (test with a known agent User-Agent)
  • [ ] useIsAgent hook returns correct isAgentClientHint value
  • [ ] Loading and error states work as documented
  • [ ] Works with React 17 and React 18

Security Notes

The SDK detection is based on client-side hints — it can be spoofed by an agent that does not set recognizable User-Agent headers. Do not rely on it as the sole anti-bot mechanism for high-security endpoints. For server-side enforcement, combine it with network-level checks or the Cloudflare Bot Management layer.

FAQ

Q: Does IsAgent work outside React? A: No — it is a React-only SDK. For non-React applications, look at the underlying Stytch identity APIs or server-level middleware solutions.

Q: Is there a free tier? A: IsAgent pricing follows Stytch’s standard pricing. The SDK itself is open source under MIT. Check stytch.com/pricing for the latest tiers.

Q: Can I detect specific agents (Claude, GPT, etc.) individually? A: The identity field returns the detected agent identity if available. The granularity depends on Stytch’s detection coverage. Check the Stytch docs for the full list of detectable agents.

Q: Does this block agents from accessing my site? A: No — IsAgent only detects agents; it does not enforce access control. You implement the blocking logic yourself using the detection result.

Conclusion

IsAgent is a clean, minimal SDK for React developers who need to distinguish AI agent traffic from human traffic. Its component-based API makes it easy to drop into existing React apps without a major architectural change. The main limitation is that it is React-only and relies on client-side hints, so it cannot replace server-side bot protection. For developers already using Stytch for auth, it is a natural pairing. For others, the MIT-licensed SDK is worth a look if agent-aware UX is part of your roadmap.