AI models are evolving fast, and developers are increasingly looking for ways to integrate multiple models into their applications, giving users the flexibility to choose the one that best fits their needs.
In this post, weâll walk through how to build a simple multi-model chat interface using Next.js and the @ai-sdk package, allowing users to switch between different large language models (LLMs) like OpenAIâs GPT-4 Turbo and Anthropicâs Claude 3.
Letâs start by setting up a configuration for handling multiple AI models. The idea is to create a single place where you define the models your app supports. This makes it easy to scale as new models become available:
Here, weâre importing model definitions and creating a MODELS object that maps human-readable keys to model instances. This approach gives us flexibility to refer to models by their key in the UI and in our API logic.
This implementation already shows how the AI SDK allows you to use multiple models in a clean and efficient way, without needing to install separate SDKs for each one. It also shows how âeasyâ it becomes to add models to your project once they are available in the SDK.
Now that we have our models defined, letâs move on to the client side. Weâll have a React component that allows the user to select a model, send a message, and receive a response:
This component does a few things. First, it displays the conversation history, showing both user inputs and AI responses. It also allows users to select from the available models through a dropdown menu, updating the selected model in the componentâs state. Finally, it handles form submission, sending the selected model along with the userâs input to the server for processing.
To support this on the backend, we need an API route that accepts the chat messages and the selected model, streams the AI response, and returns it to the client:
This handler extracts the selected model and message history from the incoming request. It retrieves the appropriate model instance from the MODELS object and uses it to stream a response back to the client.
With these pieces in place, you have a simple but powerful chat application where users can experiment with different LLMs. As new models become available, all you need to do is update the MODELS object and the UI will automatically reflect the changes. This kind of flexibility is becoming increasingly important as the AI landscape diversifies. Whether youâre building tools for internal teams or customer-facing apps, giving users the option to choose the right AI model can greatly enhance their experience.