Smart Autofill — paste a URL and auto-populate template fields

[anurag629]

Phase 4 — Smart Autofill

The most impactful AI feature: paste any URL and AI reads the page, extracts content, suggests the best template, and auto-fills all fields.

User Flow

1. User enters the editor (or clicks "Smart Autofill" button)
2. Pastes a URL (e.g., a blog post, product page, GitHub repo)
3. System fetches the page content (reuse existing meta-fetcher)
4. AI analyzes the content and returns:
   • Best matching template (from 120+)
   • Auto-filled field values (title, subtitle, author, colors, etc.)
   • Brand colors extracted from the page
5. User sees the OG image preview instantly populated
6. User can tweak any field and export

UI

Autofill Entry Point

Add a prominent "✨ Autofill from URL" button in the editor, either:

• In the template picker as an alternative to manual selection
• As a floating action in the editor toolbar

```
┌──────────────────────────────────────────────┐
│ ✨ Smart Autofill │
│ │
│ Paste a URL and we'll generate your │
│ OG image automatically. │
│ │
│ ┌────────────────────────────────────┐ │
│ │ https://myblog.com/rest-api-guide │ │
│ └────────────────────────────────────┘ │
│ │
│ [Generate OG Image →] │
└──────────────────────────────────────────────┘
```

Processing State

```
┌──────────────────────────────────────────────┐
│ ✨ Analyzing page... │
│ │
│ ✅ Fetched page content │
│ ✅ Extracted metadata │
│ ⏳ Selecting best template... │
│ ○ Generating content... │
└──────────────────────────────────────────────┘
```

Result

• Template auto-selected and loaded
• All text fields populated
• Brand colors applied (if detected)
• User can modify anything before exporting

Technical Implementation

Backend: `POST /api/ai/autofill`

Request:
```json
{
"provider": "openai",
"apiKey": "sk-...",
"model": "gpt-4o-mini",
"url": "https://myblog.com/rest-api-guide"
}
```

Server-side steps:

1. Fetch the URL (reuse `meta-fetcher.ts` logic)
2. Extract: title, description, headings, main content (first ~2000 chars), OG tags, brand colors from CSS
3. Send to AI with a prompt that includes available template IDs + their descriptions
4. AI returns: `{ templateId, fields: { title, subtitle, author, ... }, colors: { bg, accent, text } }`

Response:
```json
{
"templateId": "blog-minimal-dark",
"fields": {
"title": "The Complete REST API Guide",
"subtitle": "Build production-ready APIs with Node.js",
"author": "Sarah Chen",
"tag": "Tutorial"
},
"colors": {
"bgColor": "#1a1a2e",
"accentColor": "#e94560"
}
}
```

Prompt Engineering

• Include the list of template IDs with short descriptions
• Include the extracted page content
• Ask AI to match content type to best template category
• Ask AI to extract/generate field values that fit the template
• Ask AI to detect brand colors from the page

Acceptance Criteria

• URL input with validation
• Page content fetched and extracted server-side
• AI selects appropriate template from available options
• All relevant template fields auto-populated
• Brand colors detected and applied when possible
• Step-by-step progress indicator during processing
• User can override any auto-filled value
• Graceful handling: invalid URL, unreachable page, AI failure
• Works for common page types: blog posts, product pages, GitHub repos, portfolios