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 |
| Google |
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.
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.
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.
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.
Milestone: Full AI feature suite operational.
Documentation
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
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
AI Features
Architecture
Phase 1 — Foundation
Build the core infrastructure: types, provider registry, key storage, and API proxy endpoints.
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.
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.
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.
Milestone: Full AI feature suite operational.
Documentation
Design Principles
Non-Goals