Phase 2 — Settings UI (2/2)
Wire the AI Settings modal into the editor and control visibility of AI features based on key configuration.
Scope
Navbar Integration
- Add an AI settings icon/button to the editor navbar (sparkle ✨ icon or similar)
- Button states:
- No key configured: Muted icon with subtle "Set up AI" tooltip
- Key configured: Active/highlighted icon, tooltip shows provider name
- Clicking opens the AI Settings modal
Conditional Feature Visibility
- Create a React context or hook: `useAI()`
- `isConfigured: boolean` — whether any provider has a valid key
- `provider: AIProvider | null`
- `model: string | null`
- `openSettings(): void` — opens the settings modal
- `generate(prompt, systemPrompt?): Promise` — calls /api/ai/generate
- AI action buttons (generate, suggest, analyze) should:
- Show in the UI always (so users know AI features exist)
- If no key configured → clicking opens Settings modal with a helpful message
- If key configured → perform the AI action
Empty State
When user clicks an AI button with no key configured:
```
┌──────────────────────────────────────────┐
│ ✨ AI Features │
│ │
│ Set up an AI provider to unlock: │
│ • AI-generated titles & descriptions │
│ • Smart autofill from URL │
│ • Template recommendations │
│ │
│ Bring your own API key — we support │
│ OpenAI, Anthropic, Google, Groq, and │
│ OpenRouter. │
│ │
│ [Configure AI Provider →] │
└──────────────────────────────────────────┘
```
Files
- `src/components/editor/AIProvider.tsx` — React context provider
- `src/hooks/useAI.ts` — hook wrapping the context
- Update existing editor navbar component to include settings icon
- Update existing editor component to wrap with AIProvider
Acceptance Criteria
Phase 2 — Settings UI (2/2)
Wire the AI Settings modal into the editor and control visibility of AI features based on key configuration.
Scope
Navbar Integration
Conditional Feature Visibility
Empty State
When user clicks an AI button with no key configured:
```
┌──────────────────────────────────────────┐
│ ✨ AI Features │
│ │
│ Set up an AI provider to unlock: │
│ • AI-generated titles & descriptions │
│ • Smart autofill from URL │
│ • Template recommendations │
│ │
│ Bring your own API key — we support │
│ OpenAI, Anthropic, Google, Groq, and │
│ OpenRouter. │
│ │
│ [Configure AI Provider →] │
└──────────────────────────────────────────┘
```
Files
Acceptance Criteria