Astro Integration / Client Directive // CHROME BUILT-IN AI

astro-client-directive-ai

Delay component hydration until on-device Gemini Nano is fully initialized.

View on GitHub ↗ Quickstart Spec ↓

01. Architectural Specifications STATUS: PRODUCTION READY

[ 01 // CAPABILITY ]

Zero Hydration Overhead

Prevents executing large JavaScript client bundles on devices or browsers that do not support Chrome Built-in AI.

[ 02 // CAPABILITY ]

Background Polling

Seamlessly handles the after-download state, listening for model weight readiness without blocking user interactions.

[ 03 // CAPABILITY ]

Astro Native

Deeply integrated with Astro via addClientDirective in astro:config:setup for full TypeScript JSX intellisense.

02. Implementation & Usage BUN / ASTRO 5+

// Installation CLI

bun add astro-client-directive-ai
# or
pnpm add astro-client-directive-ai

// Configuration astro.config.mjs

---
import AICodeAssistant from "../components/AICodeAssistant.tsx";
---

<!-- Hydrates only when Chrome Gemini Nano weights are resident in memory -->
<AICodeAssistant client:ai-ready />

<!-- With optional timeout and fallback strategy -->
<AICodeAssistant client:ai-ready={{ fallback: "client:visible", timeoutMs: 5000 }} />

// 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