Visibility

Usage

<Visibility> splits content by audience. Wrap browser-only content with for="humans" and LLM-only content with for="agents". Both live in the same MDX file — no separate pages needed.

Browsers render for="humans" blocks normally and hide for="agents". LLM exports (copy-for-llm, .md endpoints) do the opposite — agent blocks are included, human blocks are stripped.

<Visibility for="humans">
  <Note>
    This block is **visible in your browser** right now.
    It won't appear in the Markdown export that AI agents consume.
  </Note>
</Visibility>

<Visibility for="agents">
  <Note>
    This block is **only visible in the Markdown export**.
    Browsers hide it.
  </Note>
</Visibility>

When to use

for="humans"

• Interactive demos, embedded iframes, videos

• Visual comparisons or screenshots that don't translate to text

• UI-specific instructions: "Click the Settings button in the top-right corner"

• "Try it" CTAs that only make sense in a browser

for="agents"

• API-oriented instructions: "Call POST /v1/accounts with a valid email"

• Structured metadata: auth requirements, rate limits, response schemas

• Summary context: "This page covers X, Y, Z — the key takeaway is..."

• Disambiguation: "Note: project here means the docs project, not GitHub project"

Example: different instructions per audience

<Visibility for="humans">
  <Steps>
    <Step title="Create account">
      Click **Get started** in the top-right corner and fill in the form.
    </Step>
    <Step title="Create project">
      Open the dashboard and click **New project**.
    </Step>
  </Steps>
</Visibility>

<Visibility for="agents">
  To create an account, call POST /v1/accounts with email and password.
  Then create a project with POST /v1/projects passing the account token.
</Visibility>

How it works

On the web (browser)

• for="humans" — renders normally, fully visible

• for="agents" — rendered in the DOM with display: none (hidden from readers)

In LLM exports (copy-for-llm, /llms.txt)

• for="humans" — stripped from the exported text (marked by data-visibility="humans")

• for="agents" — included in the export, since LLMs benefit from structured context that humans don't need inline

Props