AI Bar

Add AI-readable actions to any generated Antsand section: Copy for AI and View as Markdown.

The data contract is small: set header.ai_bar, load antsand-v2.js, and the JS converts the rendered H/B/F content into clean Markdown.

Component
📋

Copy for AI

Clones the current section, removes nav/scripts/the AI bar itself, converts HTML to Markdown, then copies page title, source URL, and content.

📄

View as Markdown

Toggles the rendered section into a Markdown preview so users and AI agents can inspect exactly what will be copied. Click the action again or use Close to return to the rendered section.

🧩

H/B/F native

No custom page HTML is required. The shared header renderer emits the bar when header.ai_bar is present.

Data contract

Use this in any section header. The target can be section, closest, next, or a CSS selector.

databoard.menu.*.topo json 
{
  "header": {
    "h1": "Page title",
    "p": "Readable generated content.",
    "ai_bar": {
      "enabled": true,
      "variant": "pill",
      "target": "section",
      "copy_label": "Copy for AI",
      "markdown_label": "View as Markdown"
    }
  },
  "data": [
    { "h3": "A generated card", "p": "Copied into Markdown." }
  ]
}

Same behavior. Different presentation.

The Sass v2 component provides multiple visual variants while the JS contract remains data-ai-bar.

Variants

pill

Compact docs-style action group under a page title.

header.ai_bar json 
"ai_bar": { "enabled": true, "variant": "pill", "target": "section" }

bordered

Clear buttons for light backgrounds and documentation pages.

header.ai_bar json 
"ai_bar": { "enabled": true, "variant": "bordered", "copy_label": "Copy for LLM" }

dark

High contrast action bar for dark hero sections.

header.ai_bar json 
"ai_bar": { "enabled": true, "variant": "dark", "target": "#docContent" }

toolbar

Use when the bar belongs beside other document tools.

header.ai_bar json 
"ai_bar": { "enabled": true, "variant": "toolbar", "target": "closest" }

Runtime

The module is part of antsand-v2.js. Generated sites only need js: ["antsand-v2"].

ANTSAND

AI-readable CSS, Header/Body/Footer contracts, and generated-site hardening across the ANTSAND ecosystem.

ANTSAND Styles v2 - Open Source CSS Framework