An AI provider exposes models through a client or API. OpenAI, Google AI, Anthropic, and Cohere offer models with different capabilities and interfaces. Choose both a provider and a model for the task: a suitable model type and relevant training data matter as much as the integration path. section 1.4 section 3.3.1
Calling each provider directly means writing separate client setup and request code. The Vercel AI SDK’s language-model abstraction lets an application pass a selected model to a shared operation such as generateText or streamText. This separates the intent—generate a response—from the provider-specific invocation, making model changes easier to manage. section 3.1.3 section 3.3.1
Listing 3.9 Calling both OpenAI and Cohere clients
import OpenAI from 'openai';
import 'dotenv/config';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
const openaiResponse = await openai.chat.completions.create({. #1
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: 'What is 7+7 and why?' }],
max_tokens: 150, #2
});
import { CohereClient } from "cohere-ai";
const cohere = new CohereClient({. #3
token: process.env.COHERE_API_KEY,
});
const chat = await cohere.chat({. #4
model: "command",
message: "What is 7+7 and why?",
});
Compare the OpenAI and Cohere client calls: even a simple text request needs different initialization, request fields, and API methods. section 3.3.1
For a chat interface that lets users switch providers:
- Install the provider packages and keep a supported-provider configuration that maps each provider to its constructor and allowed models. section 3.3.3
- Before creating a model instance, reject unsupported providers or models and check that the corresponding API key is present. section 3.3.3
- Send the chosen provider and model with the chat request; let the route select the model for streamText. section 3.3.3
Listing 3.13 Updating page.js component to allow multiple providers
const providers = [. #1
{ value: 'openai', label: 'OpenAI' },
{ value: 'gemini', label: 'Google AI' },
];
const models = {. #2
openai: [
{ value: 'gpt-3.5-turbo', label: 'GPT-3.5-turbo' },
{ value: 'gpt-4', label: 'GPT-4' },
],
gemini: [{ value: 'models/gemini-2.0-flash', label: 'Gemini' }],
};
const Chat = () => {
const [provider, setProvider] =
React.useState('openai'); #3
const [model, setModel] = React.useState('gpt-4');
const { messages, input, handleInputChange, handleSubmit,
isLoading } = useChat({
api: '/api',
body: { provider, model }, #4
});
The React chat component keeps provider and model selections in state and passes both through useChat to the API route. section 3.3.3
Treat provider support as something to verify in running workflows, not just documentation. API changes, regional restrictions, model-version differences, and unavailable features can cause failures. Track errors with the provider and model, show a useful message, and offer a retry path. section 8.2.1
