Contextual AI (Highlight-to-Chat)

Turn any highlighted text on a page into a live AutoCrew conversation. Visitors select text, optionally type a follow-up, and the widget opens with the composed message already submitted.

Overview

When a visitor highlights at least 15 characters of text on a page, a small popover appears near the selection. The visitor can optionally type a follow-up question and click Ask Sarah →. The widget opens with a single message containing both the quoted selection and their question, then Sarah answers.

The feature is intentionally suppressed in contexts where it would interfere with normal use:

Touch-primary devices (mobile and tablets)
Inside code blocks, navigation elements, buttons, and links
Selections shorter than 15 characters

Prerequisites

The AutoCrew widget must be embedded on the page first. Contextual AI calls window.AutoCrew.ask() internally — without the widget, the popover cannot dispatch messages.

Follow the Embeddable Widget setup guide to add the embed snippet, then Contextual AI activates automatically on every page where the widget is loaded.

Enabling & Disabling

Three controls operate at different scopes — each overrides the one below it. URL overrides win, then per-visitor opt-outs, then the global env flag.

Global (env var)

Set the build-time environment variable to disable Contextual AI for every visitor. The feature is on by default when the variable is unset.

# .env.production or Vercel project settings
NEXT_PUBLIC_CONTEXTUAL_AI_ENABLED=false

Language: bash

Note: Changing this variable requires a production redeploy — it’s baked in at build time, not read at runtime.

Per-session (URL parameter)

Append ?contextual-ai=off (or =on) to any URL. The override applies for the current navigation and resets when the visitor leaves the URL.

# Append to any URL
https://yoursite.com/pricing?contextual-ai=off

# Re-enable for the current navigation
https://yoursite.com/pricing?contextual-ai=on

Language: text

Per-visitor (localStorage)

Disable Contextual AI for a single visitor across all sessions on this domain. Useful for in-product settings or accessibility preferences.

// Run in the browser console (or trigger from an in-page setting)
localStorage.setItem('contextual-ai:disabled', '1');

// Re-enable
localStorage.removeItem('contextual-ai:disabled');

Language: javascript

Opting Elements Out

Stamp data-contextual-ai="off" on any HTML element. Selections that originate inside that element are ignored — useful for code samples, sensitive content, or anywhere the popover would be disruptive.

<!-- Selections inside this element are ignored -->
<section data-contextual-ai="off">
  <h2>Pricing tiers</h2>
  <p>Highlighting text here will not show the popover.</p>
</section>

Language: html

JavaScript API

On submit, the popover composes a message containing the section label, the quoted selection, and the visitor’s prompt, then calls the widget API:

// Composed by lib/contextual-ai/adapter.ts on submit
window.AutoCrew.ask(message, { autoSend: true, mode: "chat" });

Language: javascript

See Widget · JavaScript API for the full method reference, including options like mode and autoSend.