How to use fallback AI models in AI Copilots

AI Copilots allows you to select an AI model when you create a copilot, however AI models are regularly down and token usage limits are easily reached. Liveblocks supports using OpenAI-compatible models when you create a copilot, and you can use this with a service such as OpenRouter, which will swap in a fallback model when your primary model is unavailable or over its rate limit.

Creating fallbacks with OpenRouter

How to set up OpenRouter and attach your fallback models to your Liveblocks copilot.

1. Create an account

   To get started, first sign up for an account at OpenRouter.

2. Add credit or set up integrations

   You can add credit, and pay OpenRouter directly for model usage, or you can insert API keys from AI providers. Go to “Settings” and then either “Credit” or “Integrations”, and set it up as you prefer.

3. Create a preset

   Presets let you define your AI settings, including the fallback model. Create a new preset, and make note of the name, as we’ll need this later. Select multiple AI models—the first will be your primary, and the rest will be your fallbacks. After this, save your model.

4. Create an API key

   Navigate to “Settings” and then “API Keys”. Create an API key, and save it for later.

5. Add to your Liveblocks copilot

   Navigate to the Liveblocks dashboard, select your project and click on “Copilots”. Click on “Add Copilot” and use the following settings:

   Name

   Whatever you like. Example: My Copilot

   Model

   OpenAI compatible

   Model

   Insert the name of the OpenRouter preset, prefixed by @preset/. For example if the name was my-model your should insert @preset/my-model.

   Custom provider name

   Whatever you like. Example: custom

   Base URL

   https://openrouter.ai/api/v1/

   API Key

   Insert the OpenRouter API key you created earlier. Example: sk-or-v1-...

   System Prompt

   Your system prompt. Example: You are a helpful assistant.

6. Copy the copilot ID into your app

   You’ve now set up a copilot with fallbacks! Copy the copilotId from the dashboard into AiChat and useSendAiMessage to start using it in your application.

   import { AiChat } from "@liveblocks/react-ui";
   function Chat() {  return (    <AiChat      chatId="my-chat-id"      copilotId="co_tUYtNctLAtUIAAIZBc1Zk"    />  );}

   import { useSendAiMessage } from "@liveblocks/react";
   function SendMessage() {  const sendAiMessage = useSendAiMessage("my-chat-id", {    copilotId: "co_tUYtNctLAtUIAAIZBc1Zk",  });
     return (    <button onClick={() => sendAiMessage("What's new?")}>What's new?</button>  );}

Learn more

While we’ve had success with OpenRouter, there are likely alternative services that work too, as long as they are OpenAI-compatible. To learn more about setting up a copilot read our Copilots overview page.