How do I stream Model API output to a browser without exposing my key?

Keep the call on your server and pass the text through. Here's a minimal Node handler that streams plain text to the browser.

import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "https://api.gateway.clatterlabs.xyz/v1",
  apiKey: process.env.CLATTER_API_KEY,
  defaultHeaders: { "X-Clatter-Account": process.env.CLATTER_ACCOUNT_ID },
});
import http from "node:http";

http.createServer(async (req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain; charset=utf-8" });
  try {
    const stream = await client.chat.completions.create({
      model: "supercosmos-flash",
      messages: [{ role: "user", content: "Tell me a short story." }],
      stream: true,
    });
    for await (const chunk of stream) {
      const t = chunk.choices[0]?.delta?.content;
      if (t) res.write(t);
    }
  } catch (e) {
    res.write("\n[stream failed, please retry]");
  }
  res.end();
}).listen(3000);

Authenticate your own users before calling the API: their text counts against your account under the Abuse policy.

Every JavaScript example uses the same client (base URL, key and the X-Clatter-Account header); see Set up the JavaScript SDK. Full parameter list: Create a chat completion.

Still need help?#

• General support: support@clatterlabs.com or team@clatterlabs.xyz
• Infrastructure questions, or permanent deletion of your data (your whole account or one service): infrastructure@clatterlabs.xyz

We usually reply within the first hour, and always within 24 hours. A full support team is with you.