> For an index of all Botscent documentation, see https://botscent.nibnalin.me/llms.txt.

# React

Add the page half of Botscent to a React app without a framework and check the install.

Add Botscent to a React app that has no framework, such as a Vite app. The page half runs in the browser from the `<Botscent />` component. The server half runs in the server for your pages or your API. For a Next.js app, see [Next.js](/docs/nextjs).

## Before you start

You need:

* React 18 or 19.
* Node.js 22.12 or later.

## 1. Install the package

Install `botscent` from npm.

```sh title="Terminal"
npm install botscent
```

With pnpm, yarn or bun, use their `add` command.

## 2. Add the page half

In `src/main.tsx`, render `<Botscent />` from `botscent/react` once, next to your root component.

```tsx title="src/main.tsx"
import { createRoot } from 'react-dom/client'
import { Botscent } from 'botscent/react'
import { App } from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <>
    <Botscent />
    <App />
  </>,
)
```

The page half now starts when `<Botscent />` mounts, and the component renders nothing.

## 3. Add the server half

A React app without a framework runs only in the browser. Add the server half to the server for your pages or your API. Use the page for that server:

* [Express](/docs/express)
* [Hono](/docs/hono)
* [Cloudflare Workers](/docs/cloudflare-workers)
* [Netlify](/docs/netlify)
* [Vercel](/docs/vercel)
* [FastAPI and Starlette](/docs/fastapi)
* [Django](/docs/django)
* [Flask](/docs/flask)
* [Any other server](/docs/other-servers)

## 4. Read the verdict

In any component, call `useBotscent` from `botscent/react`. The component renders again when the page verdict changes.

```tsx title="src/App.tsx"
import { useBotscent } from 'botscent/react'

export function App() {
  const verdict = useBotscent()
  return <pre>{JSON.stringify(verdict)}</pre>
}
```

In a normal browser, the component shows `{"type":"human","reasons":[]}`.

> **Warning:** Do not use the page verdict to allow access. The visitor's browser computes the page verdict. On your server, use `isVerified` on the request's own verdict, as [The trust model](/docs/trust-model) describes.

## 5. Check the install

Start the dev server. Then run the check against its URL.

```sh title="Terminal"
npx botscent check http://localhost:5173/
```

The `page-script` check prints `pass`, and the command exits with code 0.

The `server-half` check prints `unknown`, because the dev server has no server half. If a check fails, see [Verify your install](/docs/verify).

## Next steps

* [The verdict](/docs/verdict): Read what `type`, `agent_name` and `reasons` mean.
* [From the page to the server](/docs/page-to-server): Send the page verdict to your server with `reportHeaders`.
* [Page API](/docs/page-api#usebotscent-for-react): Read every option of `useBotscent` and `<Botscent />`.
* [examples/react](https://github.com/nalinbhardwaj/botscent/tree/main/examples/react): Run a Vite and React app with the page half.