> ## Documentation Index
> Fetch the complete documentation index at: https://motherfuckingsideproject.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Agent toggle
> Let visitors see exactly what AI agents receive from your site.
# Agent toggle
> Let visitors see exactly what AI agents receive from your site.
The `AgentToggle` component adds a floating HUMAN / MACHINE toggle pill to your site. When a visitor switches to "machine" mode, it fetches the markdown version of the current page and displays it in a full-screen overlay with a monospace font and typewriter animation.
This is useful for demos, developer documentation, and transparency — letting your visitors verify that AI agents get clean, accurate content from your site.
## Setup
Import `AgentToggle` from `@reaganhsu/agentxp-next/toggle` and add it to your root layout:
```tsx layout.tsx theme={null}
import { AgentToggle } from '@reaganhsu/agentxp-next/toggle'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
The component renders a fixed-position pill at the bottom of the viewport. It has no effect on your page content or layout — it only adds the toggle UI.
## How it works
1. The pill appears at the bottom of the page with two options: **HUMAN** and **MACHINE**
2. When a visitor clicks **MACHINE**, the component fetches the current page with `Accept: text/markdown`
3. The markdown response is displayed in a dark, full-screen overlay with syntax highlighting for headings, links, lists, and code blocks
4. The title line types out character by character; other lines fade in with a stagger
5. Pressing **Escape** or clicking **HUMAN** returns to the normal page
The component respects `prefers-reduced-motion` — when the user has reduced motion enabled, all content appears instantly without animation.
## Props
### `position`
Type: `'bottom-center' | 'bottom-right' | 'bottom-left'`
Where to place the toggle pill on screen. Default: `'bottom-center'`.
```tsx theme={null}
```
## Accessibility
* The toggle uses `role="radiogroup"` with `role="radio"` buttons and `aria-checked` states
* All touch targets meet the 44px minimum
* Focus states are visible with a white outline
* Body scroll is locked when the machine view overlay is open
* Escape key closes the overlay
## When to use
* **Product demos** — Show prospects how your site serves AI agents
* **Developer documentation** — Let developers verify the markdown output matches their expectations
* **Transparency pages** — Give users confidence that AI agents receive accurate content
## When not to use
* **Production sites with no developer audience** — Most end users don't need to see the markdown view. Consider adding it only in development or behind a feature flag.
* **Sites with sensitive content** — The toggle fetches from your live middleware, so any page content visible to agents is also visible in the toggle overlay.