Build a Multi-Model Chatbot with Next.js and Celedog

A Next.js chatbot that streams from any of 200+ AI models with one API key. ~80 lines of code for the working endpoint + UI.

A multi-model chatbot in Next.js is mostly one server route that calls Celedog and streams the answer back to the browser. Because Celedog is OpenAI-compatible, you use the standard openai Node package and never touch a provider SDK.

1. Install and configure

Install the openai package and put your key in an environment variable (CELEDOG_API_KEY) — never in client code.

npm install openai

2. A streaming route handler

Create an App Router route at app/api/chat/route.ts. It reads the user messages and the chosen model from the request body, calls Celedog with streaming on, and pipes the stream straight to the client.

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.CELEDOG_API_KEY,
  baseURL: "https://celedog.io/v1",
});

export async function POST(req) {
  const body = await req.json();
  const model = body.model || "gpt-5.5";
  const stream = await client.chat.completions.create({
    model,
    messages: body.messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0].delta.content || "";
        controller.enqueue(encoder.encode(text));
      }
      controller.close();
    },
  });
  return new Response(readable);
}

3. A model picker on the client

Because the model is just a field in the POST body, your UI can offer a dropdown of models from the Models page — GPT, Claude, Gemini, DeepSeek — and the same route handles all of them. No per-provider branches in your code.

4. Production notes

  • Run on the server. Keep the key server-side; the browser only talks to your route, never to Celedog directly.
  • Pick sane defaults. Default to a cost-effective model and let users opt into premium ones, or route automatically (see the auto-routing tutorial).
  • Cap context. Trim history before sending so a long conversation does not silently inflate token cost.
One route, one OpenAI client, every model selectable from a dropdown. That is the entire architecture of a multi-model chatbot when the gateway does the provider juggling for you.

Written by · Last updated May 28, 2026

Where to go next