### Install BotID Package Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt Install the necessary dependency to access the BotID client and server utilities. ```bash npm install botid ``` -------------------------------- ### Install BotID Dependency Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt Commands to install the botid package using common package managers. Choose the one that matches your project's environment. ```bash pnpm add botid ``` ```bash yarn add botid ``` -------------------------------- ### Configure package.json Dependencies Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt Example configuration for project dependencies including BotID, Next.js, and React. Ensure these versions are compatible with your environment. ```json { "dependencies": { "botid": "^1.4.2", "next": "^15.3.6", "react": "^19.0.0", "react-dom": "^19.0.0" } } ``` -------------------------------- ### Initialize BotIdClient in Root Layout Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt The BotIdClient component must be placed in the root layout to enable client-side signal collection. It accepts a 'protect' array defining which API routes and HTTP methods require bot detection. ```tsx import type { Metadata } from "next"; import { BotIdClient } from "botid/client"; export const metadata: Metadata = { title: "My Protected App", description: "App protected by Vercel BotID", }; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( {children} ); } ``` -------------------------------- ### Fetch Protected Endpoints from Client Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt Standard fetch requests are used to interact with protected endpoints. The BotIdClient automatically injects the necessary headers, requiring no additional configuration on the client side. ```tsx const handleClick = async () => { const response = await fetch("/api/generate", { method: "POST", }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Request failed"); } const data = await response.json(); console.log(data.result); }; ``` -------------------------------- ### Validate Requests with checkBotId Server Function Source: https://context7.com/vercel-labs/botid-nextjs-starter/llms.txt Use the checkBotId function within API route handlers to verify if a request is from a bot. It returns an object containing an isBot boolean, allowing you to conditionally block unauthorized access. ```typescript import { checkBotId } from "botid/server"; import { NextResponse } from "next/server"; export async function POST(req: Request) { const { isBot } = await checkBotId(); if (isBot) { return NextResponse.json( { error: "Bot is not allowed to access this endpoint" }, { status: 401 } ); } return NextResponse.json({ result: "Success" }); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.