Adding a New Provider

Step-by-step guide to adding Mistral, Cohere, xAI, or any OpenAI-compatible API.

Adding a new AI provider to ContentAI takes four steps. The example below adds Mistral, but the same pattern applies to any @ai-sdk/* package.

1. Install the SDK

pnpm add @ai-sdk/mistral

The Vercel AI SDK providers page lists every supported provider. If your target isn't there but uses the OpenAI API format, use @ai-sdk/openai-compatible.

2. Add it to the store

In lib/store.ts:

export type AIProvider = "groq" | "google" | "openai" | "anthropic" | "mistral"; 

export const providerModels: Record<AIProvider, string[]> = {
  groq: [/* ... */],
  google: [/* ... */],
  openai: [/* ... */],
  anthropic: [/* ... */],
  mistral: ["mistral-large-latest", "mistral-small-latest", "open-mistral-7b"], 
};

Then add sensible defaults for apiKeys and selectedModels:

apiKeys: {
  groq: "",
  google: "",
  openai: "",
  anthropic: "",
  mistral: "", 
},
selectedModels: {
  groq: "llama-3.3-70b-versatile",
  google: "gemini-2.5-flash",
  openai: "gpt-4o-mini",
  anthropic: "claude-3-5-sonnet-20241022",
  mistral: "mistral-large-latest", 
},

3. Bump the store version and migrate

{
  name: "contentai-store",
  version: 3,                         
  migrate: (persisted: any, version) => {
    // ... previous migrations
    if (version < 3) {                
      persisted.apiKeys.mistral = ""; 
      persisted.selectedModels.mistral = "mistral-large-latest"; 
    }                                 
    return persisted;
  },
}

This prevents existing users from losing data when they upgrade.

4. Handle it in the API route

In app/api/generate/route.ts, update createModel():

import { createMistral } from "@ai-sdk/mistral"; 

function createModel(provider: AIProvider, apiKey: string, model: string) {
  switch (provider) {
    case "groq":      return createGroq({ apiKey })(model);
    case "google":    return createGoogleGenerativeAI({ apiKey })(model);
    case "openai":    return createOpenAI({ apiKey })(model);
    case "anthropic": return createAnthropic({ apiKey })(model);
    case "mistral":   return createMistral({ apiKey })(model); 
  }
}

5. Show the card in Settings

In app/(dashboard)/settings/page.tsx, add a Mistral entry to the providers array used to render cards:

const providers = [
  { id: "groq",      label: "Groq",      badge: "Free",    url: "..." },
  { id: "google",    label: "Google",    badge: "Free",    url: "..." },
  { id: "openai",    label: "OpenAI",    badge: null,      url: "..." },
  { id: "anthropic", label: "Anthropic", badge: null,      url: "..." },
  { id: "mistral",   label: "Mistral",   badge: null,      url: "https://console.mistral.ai/api-keys" }, 
];

That's it — restart pnpm dev, and the new provider appears in Settings, on the generate badge, and in the API route.

For OpenAI-compatible providers

Many providers (Together, DeepInfra, Fireworks, xAI Grok, local Ollama) expose an OpenAI-compatible endpoint. For those, use @ai-sdk/openai-compatible:

import { createOpenAICompatible } from "@ai-sdk/openai-compatible";

case "together":
  return createOpenAICompatible({
    name: "together",
    apiKey,
    baseURL: "https://api.together.xyz/v1",
  })(model);

Testing

Always run the Test button in Settings after adding a provider. It's the fastest way to catch a typo in the model ID or the SDK instantiation.

Next: Templates Reference →