JavaScript examples
Using the Model API with the OpenAI JavaScript / TypeScript SDK.
- Can I call the Model API from a browser extension?Not with your key inside the extension: anyone can extract it. Route calls through your own server.FAQ
- Can I call the Model API with plain fetch instead of the SDK?Yes: POST JSON to /v1/chat/completions with the Authorization and X-Clatter-Account headers.FAQ
- Can I use the Model API from Deno or Bun?Yes. The OpenAI package and plain fetch both work in Deno and Bun with the same base URL and headers.FAQ
- Does the Model API work with TypeScript?Yes. The OpenAI SDK's types apply; extra fields like reasoning_content need a small type extension.How-to
- How do I build a multi-turn chat in JavaScript?Keep a messages array, push each assistant reply, and send the full history every call.How-to
- How do I call the Model API from a Next.js route handler?Create the client in a server-only route handler and stream the text back; never in a client component.How-to
- How do I call the Model API from an Express server?Create the OpenAI client once and call it in a route; return the answer and usage as JSON.How-to
- How do I cancel a Model API request in JavaScript?Pass an AbortSignal to stop waiting for a reply you no longer need.How-to
- How do I detect and act on abuse warnings in JavaScript?Read x-clatter-notice with .withResponse(); when it's abuse_warning, flag or block the end user who sent the message.How-to
- How do I estimate the cost of a call in JavaScript?Multiply usage.prompt_tokens and completion_tokens by the model's per-1M prices.How-to
- How do I handle Model API errors in JavaScript?Catch OpenAI.APIError, read status and code, and only retry 429 and 5xx.How-to
- How do I list models in JavaScript?client.models.list() returns the ids; GET /v1/models also includes prices, families and retired ids.How-to
- How do I parse a Model API stream with fetch?Read the response body, split on lines, parse each data: event, and stop at data: [DONE].How-to
- How do I pick Flash, Max or Heavy in JavaScript?Use supercosmos-flash, -max or -heavy, or the family id supercosmos with effort or reasoning_effort.How-to
- How do I read response headers like X-Request-Id in JavaScript?Use .withResponse() on the SDK call to get both data and the raw Response.How-to
- How do I set retries and timeouts in the JavaScript SDK?Pass maxRetries and timeout (milliseconds) to the client or per request.How-to
- How do I set up the OpenAI JavaScript SDK for the Model API?npm install openai, set baseURL to the Clatter Labs gateway and add X-Clatter-Account as a default header.How-to
- How do I show Max or Heavy's reasoning while streaming in JavaScript?Read delta.reasoning_content and delta.content separately from each chunk and display them in different places.How-to
- How do I stream a reply in JavaScript?Pass stream: true and iterate the chunks with for await.How-to
- How do I stream Model API output to a browser without exposing my key?Call the Model API from your server and forward the text to the browser; never put the key in front-end code.How-to
- How do I use tool calling in JavaScript?Define function tools, run what the model asks for, and send results back as tool messages.How-to
Still need help?
Tried the steps above and still stuck? Email us. We usually reply within the first hour, and always within 24 hours. A full support team is with you.
Infrastructure questions, or permanent deletion of your data
infrastructure@clatterlabs.xyzFor deleting your whole account or the data of one service.