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

# Transform

> Control how AgentXP converts your HTML pages to markdown.

# Transform

> Control how AgentXP converts your HTML pages to markdown.

When AgentXP detects an AI agent request, it fetches the page HTML from your origin and transforms it into clean markdown before responding. The `transform` options let you control which content is included, what is stripped out, and how large the output can be.

## Configuration

```typescript middleware.ts theme={null}
import { withAgentXP } from '@reaganhsu/agentxp-next'

export default withAgentXP({
  transform: {
    contentSelector: 'main',
    excludeSelectors: ['.chat-widget', '.cookie-banner', '#intercom-container'],
    maxTokens: 8000,
  },
})
```

## Options

### `contentSelector`

Type: `string`

A CSS selector that identifies the main content area of your pages. AgentXP extracts only the element matching this selector and converts its contents to markdown.

**Default:** `''` (empty — falls back to Readability auto-detection)

```typescript theme={null}
transform: {
  contentSelector: 'main',
}
```

Set `contentSelector: 'main'` for most sites. It directs the agent straight to your page content and skips surrounding navigation, sidebars, and other chrome that Readability might otherwise include.

If you omit this option or leave it as an empty string, AgentXP uses Mozilla's Readability algorithm to automatically infer the primary content region.

### `excludeSelectors`

Type: `string[]`

CSS selectors for elements to strip from the page before markdown conversion. Use this to remove persistent UI elements that add noise without informational value — chat widgets, cookie banners, interstitial overlays, and similar.

**Default:** `[]`

```typescript theme={null}
transform: {
  excludeSelectors: [
    '.chat-widget',
    '.cookie-banner',
    '#intercom-container',
    '.crisp-client',
  ],
}
```

The transform pipeline always strips a baseline set of structural elements regardless of this option: `nav`, `header`, `footer`, `aside`, `script`, `style`, `noscript`, elements with navigation/banner/contentinfo ARIA roles, and non-media `iframe` and `svg` elements.

### `maxTokens`

Type: `number`

The approximate maximum number of tokens the markdown output should contain. AgentXP truncates content at `maxTokens × 4` characters, which corresponds to roughly one token per four characters on average.

**Default:** `8000`

```typescript theme={null}
transform: {
  maxTokens: 4000,   // tighter limit for cost-sensitive use cases
}
```

Truncation preserves whole lines and appends a note indicating the content was cut. Increase this value for documentation-heavy pages; lower it if you need to reduce context window usage.

### `handlers`

Type: `Record<string, (el: Element) => string>`

A map of CSS selectors to custom handler functions. Each handler receives the matching DOM `Element` and returns a markdown string. Use this to control exactly how specific components or custom elements are rendered.

**Default:** `{}`

```typescript theme={null}
transform: {
  handlers: {
    '.callout-box': (el) => `> **Note:** ${el.textContent?.trim()}`,
    'data-table': (el) => `[Table: ${el.getAttribute('aria-label') ?? 'data'}]`,
  },
}
```

Handlers run before the general HTML-to-markdown conversion, so the matched elements are replaced by your returned string and are not processed further.