Skip to main content

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.
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:
layout.tsx
import { AgentToggle } from '@reaganhsu/agentxp-next/toggle'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <AgentToggle />
      </body>
    </html>
  )
}
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'. 
<AgentToggle position="bottom-right" />

​
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.