Astro Dev Middleware / Overlay // CHROME BUILT-IN AI

astro-og-smart-crop

Simulate social shares and generate character-budgeted headlines that avoid truncation.

View on GitHub ↗ Quickstart Spec ↓

01. Architectural Specifications STATUS: PRODUCTION READY

[ 01 // CAPABILITY ]

Social Card Simulator

Renders pixel-accurate simulated cards for X/Twitter, LinkedIn, Facebook, Discord, and Slack unfurls.

[ 02 // CAPABILITY ]

Truncation Prevention

Evaluates character limits and pixel bounding widths to flag awkward ellipsis cutoffs before publishing.

[ 03 // CAPABILITY ]

AI Headline Variants

Prompts Gemini Nano to suggest punchy, SEO-focused titles that strictly fit within platform budgets.

02. Implementation & Usage BUN / ASTRO 5+

// Installation CLI

bun add astro-og-smart-crop
# or
pnpm add astro-og-smart-crop

// Configuration astro.config.mjs

// astro.config.mjs
import { defineConfig } from "astro/config";
import ogSmartCrop from "astro-og-smart-crop";

export default defineConfig({
  integrations: [
    ogSmartCrop({
      platforms: ["twitter", "linkedin", "facebook", "discord", "slack"],
      characterBudgetPadding: 5
    })
  ]
});

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