Skip to content
Botscent

Adapt the page for agents

Hide ads and banners, and show a plain list, when the page verdict becomes an agent.

Show agents a simpler page: no ads, no sale banner, and a plain list in place of a grid. The agent gets the content without the parts made for people, and people keep the page they see today.

Before you start

  • Install the page half in a React or Next.js app. See Next.js or React. useBotscent reads the page verdict but does not start observation.
  • Log verdicts first, so you know which agents read which pages. See Log verdicts for a week.

1. Render the person's page first

The page verdict starts as human. It becomes agent when the page half sees evidence, and stays agent for the rest of the page's life. An extension agent, such as Claude for Chrome, shows its evidence only when it acts, which can be minutes after load.

So render the person's page by default, and switch when the page verdict changes. In a client component, read the page verdict with useBotscent:

app/people-only.tsx
'use client'
import type { ReactNode } from 'react'
import { useBotscent } from 'botscent/react'

export function PeopleOnly({ children }: { children: ReactNode }) {
  const agent = useBotscent((verdict) => verdict.type === 'agent')
  return agent ? null : <>{children}</>
}

PeopleOnly renders its children until the page verdict is an agent, then renders nothing.

The server render and the first render in the browser always show the person's page, so hydration matches. The switch comes after hydration, or later when the evidence arrives.

2. Hide ads and banners

In a page, wrap the ads and the sale banner in PeopleOnly:

app/page.tsx
import { PeopleOnly } from './people-only'
import { ProductList } from './product-list'

const products = [
  { id: 'kettle', name: 'Kettle', price: '$48' },
  { id: 'teapot', name: 'Teapot', price: '$32' },
]

export default function Page() {
  return (
    <main>
      <PeopleOnly>
        <aside className="sale">Autumn sale: 20% off until Sunday</aside>
      </PeopleOnly>
      <ProductList products={products} />
      <PeopleOnly>
        <aside className="ad" id="ad-bottom" />
      </PeopleOnly>
    </main>
  )
}

A person sees the sale and the ad. When the page verdict becomes agent, both go.

Warning: Hide only what the task does not need, such as ads, banners and decoration. A person who works inside an agent's surface, such as the Codex in-app browser, also gets the agent's page. Keep prices, stock, links, buttons and forms on both pages.

3. Show a plain list

In a client component, render the same products as a list for agents and as a grid for people:

app/product-list.tsx
'use client'
import { useBotscent } from 'botscent/react'

type Product = { id: string; name: string; price: string }

export function ProductList({ products }: { products: Product[] }) {
  const agent = useBotscent((verdict) => verdict.type === 'agent')
  if (agent) {
    return (
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name}: {product.price}
          </li>
        ))}
      </ul>
    )
  }
  return (
    <div className="grid">
      {products.map((product) => (
        <article key={product.id} className="card">
          <h2>{product.name}</h2>
          <p>{product.price}</p>
        </article>
      ))}
    </div>
  )
}

An agent gets the same names and prices as a person, in a plain list.

4. Optional: Know a declared agent at load

Use the transport, so that the page half gets the request's own verdict. On Vercel, the Next.js proxy turns the transport on by default. On your own server, read From the server to the page before you turn it on.

With the transport on, the server half sends an agent's verdict to the page in a Server-Timing entry. The page half reads the entry when it starts, before hydration. So an agent that signs or declares its page load, such as ChatGPT or Devin, gets the agent's page right after hydration, without page evidence.

Result

People see the page as before. An agent sees no ads or banners, and a plain list of the products, from the moment the page verdict becomes agent.

Use the page verdict only to change what the page shows. Scripts on the page can change the page verdict, so it is not fit to decide access. For access, use isVerified on the request's own verdict. See The trust model.

Next steps