xai-api

xAI API (Grok)

When XAI_API_KEY is present in the environment, this app has real xAI API access — use it for AI features instead of mocking responses or reaching for another provider. The same variable is injected into the deployed app at publish, so code built against it works identically in preview and production.

The key is the app owner's personal key: every call spends their quota and credits. Be deliberate about usage — see Spend responsibly before wiring AI calls into anything that runs automatically or is open to visitors.

The key unlocks the full API surface, not just chat:

• Chat / LLM — latest model: grok-4.5; default to it unless the user asks otherwise.
• Imagine (images & video) — generate and edit images, generate video, at runtime inside the app.
• Voice — text-to-speech with expressive voices (and transcription).
• Official docs: docs.x.ai — endpoints, models, parameters, streaming, tool use. Don't guess API shapes; check the docs.
• The API is OpenAI-compatible (https://api.x.ai/v1), so any OpenAI-style client works by switching the base URL and key.

Env vars — do not create a .env file

Var	Where	Purpose
XAI_API_KEY	server	Injected by the platform (preview and deploy). Never write, hardcode, or ask the user for it.

The key is server-only: read it with process.env.XAI_API_KEY inside createServerFn handlers / server code, never in client components, and never expose it via a VITE_-prefixed variable or an API response.

It can be absent (rollout-gated). Degrade gracefully — check for it and show a friendly "AI features are unavailable" state instead of crashing:

const apiKey = process.env.XAI_API_KEY;
if (!apiKey) throw new Error("AI is not available in this environment");

Calling the API (server-only)

No SDK needed — plain fetch from a server function:

import { createServerFn } from "@tanstack/react-start";

export const askGrok = createServerFn({ method: "POST" })
  .validator((input: { prompt: string }) => input)
  .handler(async ({ data }) => {
    const apiKey = process.env.XAI_API_KEY;
    if (!apiKey) return { ok: false as const, error: "AI is not available" };

    const res = await fetch("https://api.x.ai/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify({
        model: "grok-4.5",
        messages: [{ role: "user", content: data.prompt }],
      }),
    });
    if (!res.ok) {
      return { ok: false as const, error: `xAI API error ${res.status}` };
    }
    const body = (await res.json()) as {
      choices: { message: { content: string } }[];
    };
    return { ok: true as const, text: body.choices[0]?.message.content ?? "" };
  });