Settings

The Settings page is the control panel. Everything the user can change about ContentAI lives here.

Layout

The page is organized into cards, one per AI provider, plus a "Data" section at the bottom.

Each provider card shows:

• The provider name with a logo
• A Free or Recommended badge where applicable
• A link to grab an API key
• A password-masked API Key input (with show/hide toggle)
• A Model select pre-populated with available models
• A Test button
• A Set as active provider button (shown as "Active" when it's the current one)

Order on the page

The cards are ordered to guide new users to the free options first:

1. Groq — Free, recommended
2. Google Gemini — Free
3. OpenAI — Paid
4. Anthropic (Claude) — Paid

You can reorder them by editing the providers array at the top of app/(dashboard)/settings/page.tsx.

Testing a key

Click Test on any provider card. The app:

1. Reads the key and selected model from that card
2. POSTs a tiny prompt ("Say hello in 3 words.") to /api/generate
3. Shows a toast: green on success, red on failure

The test uses the exact model you selected, so switching the model and re-clicking Test is a valid way to confirm a specific model works on your plan.

Setting the active provider

The active provider is the one used by the Generate page and the Editor's AI actions. Click Set as active provider on whichever card you want.

The active provider and its selected model appear as a badge across the app. The store fields are activeProvider and selectedModels[activeProvider].

Data section

At the bottom of the page:

• Clear history — deletes all generations
• Clear documents — deletes all documents
• Clear API keys — removes every stored key
• Clear everything — wipes the full store and reloads the page

All destructive actions require a confirmation dialog.

Import / Export (optional)

If your users need to move data between browsers, you can add two buttons:

// Export
const data = JSON.stringify(useAppStore.getState());
download("contentai-backup.json", data);

// Import
const data = JSON.parse(fileContents);
useAppStore.setState(data);

This isn't in v1.0 by default but takes ~15 lines to add in settings/page.tsx.

Customization

Common edits to app/(dashboard)/settings/page.tsx:

• Hide a provider — remove it from the providers array.
• Add a custom provider — see Adding a new provider.
• Require a minimum key length — validate the input before allowing Test.
• Lock providers behind roles — if you've added auth, gate cards with a role check.

Next: AI Providers →