The Vercel AI SDK for Grok

Updated November 3, 2026, based on the documentation for AI SDK 7 and its xAI provider: xai() uses the Responses API, and version 5 of the @ai-sdk/xai provider no longer supports Chat Completions; the Next.js route returns createUIMessageStreamResponse, and image generation goes through generateImage with aspectRatio. Sources: AI SDK, xAI provider · AI SDK, Chatbot.

Grok in the JavaScript ecosystem

The Vercel AI SDK is the go-to solution for integrating language models into JavaScript and TypeScript applications. xAI provides a dedicated provider (@ai-sdk/xai) that integrates natively with the SDK, for a smooth development experience in web apps.

Installation

Install the SDK and the xAI provider:

npm install ai @ai-sdk/xai

If you use TypeScript with validation schemas (structured outputs), add Zod:

npm install ai @ai-sdk/xai zod

Configuration

The xAI provider automatically reads the XAI_API_KEY environment variable. Create a .env.local file at the root of your project:

XAI_API_KEY=xai-your-key-here

Generate text

Basic usage with generateText:

import { generateText } from 'ai';
import { xai } from '@ai-sdk/xai';

const { text } = await generateText({
  model: xai('grok-4.7'),
  prompt: 'Explain the concept of serverless in 3 sentences.',
});

console.log(text);

With a conversation history

import { generateText } from 'ai';
import { xai } from '@ai-sdk/xai';

const { text } = await generateText({
  model: xai('grok-4.7'),
  messages: [
    { role: 'system', content: 'You are a cloud architecture expert.' },
    { role: 'user', content: 'What are the benefits of serverless?' },
  ],
});

Streaming

The Vercel AI SDK excels at streaming, which is especially useful for responsive user interfaces:

import { streamText } from 'ai';
import { xai } from '@ai-sdk/xai';

const result = streamText({
  model: xai('grok-4.7'),
  prompt: 'Write an introduction to RESTful APIs.',
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Responses API or Chat Completions

With current versions (AI SDK 7 and @ai-sdk/xai 5), xai(model) goes through xAI’s Responses API, the one xAI recommends: all the examples above already use it, and xai.responses(model) lets you say so explicitly. The provider has no longer supported the legacy Chat Completions endpoint since version 5 (September 2026); if you need it, use the OpenAI SDK pointed at xAI (previous lesson).

import { generateText } from 'ai';
import { xai } from '@ai-sdk/xai';

// Responses API: short form, or explicit
const { text } = await generateText({
  model: xai('grok-4.7'),
  prompt: 'Analyze the pros and cons of microservices.',
});

const explicit = await generateText({
  model: xai.responses('grok-4.7'),
  prompt: 'Same question, naming the API.',
});

Integration with Next.js

The Vercel AI SDK is designed to work best with Next.js. Here’s an API route with streaming, in the format the useChat hook from @ai-sdk/react expects:

// app/api/chat/route.ts
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  type UIMessage,
} from 'ai';
import { xai } from '@ai-sdk/xai';

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: xai('grok-4.7'),
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

The old result.toDataStreamResponse() no longer exists; result.toUIMessageStreamResponse() still works in AI SDK 7 but is deprecated.

Image generation

The xAI provider also supports image generation, with generateImage:

import { generateImage } from 'ai';
import { xai } from '@ai-sdk/xai';

const { image } = await generateImage({
  model: xai.image('grok-imagine-image'),
  prompt: 'A futuristic city at sunset',
  aspectRatio: '16:9',
});

xAI’s image model doesn’t take a size parameter: use aspectRatio.

When to choose this SDK

The Vercel AI SDK is the clear choice as soon as you work on the JavaScript or TypeScript web. If your app lives in Next.js, Nuxt, SvelteKit, or a comparable framework, it fits right where you already work, with hooks and components designed for those environments. Its most visible strength is streaming to the browser: progressive display of answers, which takes tricky code by hand, works here in a few lines. And its multi-provider abstraction (the same API for OpenAI, Anthropic, and xAI) makes it the best choice when you want to be able to switch models without rewriting your integration layer: the xAI provider replaces another one with a single import line.

Key takeaways

• Install ai and @ai-sdk/xai for native Grok support
• The xai() provider automatically reads XAI_API_KEY
• Use generateText for complete answers and streamText for streaming
• xai() uses the Responses API; the provider has no longer supported Chat Completions since version 5