Astro Integration / Rehype Plugin // CHROME BUILT-IN AI

astro-rehype-nano-code

Build-time Rehype transformer and on-demand local AI code walkthroughs.

View on GitHub ↗ Quickstart Spec ↓

01. Architectural Specifications STATUS: PRODUCTION READY

[ 01 // CAPABILITY ]

Zero Static Bloat

Eliminates heavy static markdown code commentary from initial HTML payloads by generating line-level notes on-demand.

[ 02 // CAPABILITY ]

Build-Time Rehype Transformer

Attaches data-code-raw and data-lang attributes during markdown processing with zero runtime overhead.

[ 03 // CAPABILITY ]

Streaming Annotations

Uses Gemini Nano promptStreaming to deliver real-time, line-by-line code breakdowns directly in the browser.

02. Implementation & Usage BUN / ASTRO 5+

// Installation CLI

bun add astro-rehype-nano-code
# or
pnpm add astro-rehype-nano-code

// Configuration astro.config.mjs

// astro.config.mjs
import { defineConfig } from "astro/config";
import rehypeNanoCode from "astro-rehype-nano-code";

export default defineConfig({
  integrations: [
    rehypeNanoCode({
      collapsible: true,
      languages: ["ts", "js", "astro", "rust", "python"],
      autoInjectCustomElement: true
    })
  ]
});

// Chrome Built-in AI Prerequisites

1. Open chrome://flags in Google Chrome 128+
2. Set #prompt-api-for-gemini-nano to Enabled
3. Set #optimization-guide-on-device-model to Enabled ByPassPerfRequirement
4. Restart Chrome and verify model status at chrome://components