Epic: AI-Powered Features with BYOK (Bring Your Own Key) Support #32
Description
Overview
Add AI-powered features to OGCOPS using a Bring Your Own Key (BYOK) model. Users paste their own API keys from any supported provider. Keys are stored in the browser (localStorage) and proxied through the server — never stored or logged server-side.
Supported Providers
| Provider | Models | Notes |
|---|---|---|
| OpenAI | GPT-4o, GPT-4o-mini | Most popular |
| Anthropic | Claude Sonnet, Claude Haiku | Best writing quality |
| Gemini Flash, Gemini Pro | Free tier available | |
| Groq | Llama 4, Mixtral | Very fast, free tier |
| OpenRouter | 100+ models | One key, access to everything |
AI Features
- AI Copy Generator — Generate compelling titles and descriptions with one click
- Smart Autofill from URL — Paste a URL → AI reads the page, picks the best template, fills all fields
- AI Meta Tag Analyzer — Enhance the preview checker with AI-powered improvement suggestions and scoring
- AI Template Recommender — Describe what you need in plain English, get the best template matches
Architecture
Browser (localStorage: API keys, provider, model)
↓ POST /api/ai/{validate,generate,autofill}
OGCOPS Server (stateless proxy — never stores keys)
↓ Forward with provider-specific headers/format
AI Provider API (OpenAI, Anthropic, Google, Groq, OpenRouter)
Phase 1 — Foundation
Build the core infrastructure: types, provider registry, key storage, and API proxy endpoints.
- AI Provider types, registry, and configuration #19 — AI provider types, registry, and configuration
- Client-side API key storage with localStorage #20 — Client-side API key storage with localStorage
- AI proxy API endpoints — validate and generate #21 — AI proxy API endpoints — validate and generate
- Tests for AI foundation layer #22 — Tests for AI foundation layer
Milestone: API proxy works end-to-end. Can validate a key and proxy a generation request for all 5 providers.
Phase 2 — Settings UI
Build the settings modal and wire AI into the editor.
- AI Settings modal — provider, key, and model management UI #23 — AI Settings modal — provider, key, and model management UI
- Integrate AI settings into editor navbar and conditional feature visibility #24 — Integrate AI settings into editor navbar and conditional feature visibility
Milestone: Users can configure AI provider, paste + validate API keys, and see AI buttons in the editor.
Phase 3 — AI Copy Generator (First Feature)
The first user-facing AI feature — generate OG-optimized titles and descriptions.
- AI copy generator — generate OG titles and descriptions #25 — AI copy generator — prompt engineering and generation logic
- AI generate button and suggestion picker UI #26 — AI generate button and suggestion picker UI
Milestone: Users click ✨ next to a text field, get 3 AI-generated suggestions, pick one.
Phase 4 — Advanced Features
Expand AI capabilities across the product.
- Smart Autofill — paste a URL and auto-populate template fields #27 — Smart Autofill — paste a URL and auto-populate template fields
- AI-powered meta tag analyzer for preview checker #28 — AI-powered meta tag analyzer for preview checker
- AI template recommender — natural language template search #29 — AI template recommender — natural language template search
- Tests for AI features — settings UI, copy generator, autofill, analyzer #30 — Tests for AI features (phases 2-4)
Milestone: Full AI feature suite operational.
Documentation
- Documentation — AI features guide and API docs update #31 — Documentation — AI features guide and API docs update
Design Principles
- BYOK only — no OGCOPS-hosted AI, no API costs for maintainers
- Progressive disclosure — AI features enhance, don't complicate. Always optional.
- Provider agnostic — same UX regardless of which provider the user chooses
- No database — consistent with OGCOPS philosophy. Keys in localStorage, state in URL params.
- Security first — keys never stored server-side, never logged, HTTPS only
Non-Goals
- Hosting AI models or paying for API usage
- AI-generated background images (potential future scope)
- Fine-tuned models or custom training
- Server-side key storage or user accounts