Integration with the Vercel AI SDK

Updated November 3, 2026, based on the AI SDK 7 documentation and xAI’s Multi-agent page: xai() now uses the Responses API (the warning from the previous version no longer applies), the Next.js route no longer uses the removed toDataStreamResponse(), and the fallback targets grok-4.7. The mapping low/medium → 4 agents, high/xhigh → 16 agents comes from xAI’s documentation. Sources: AI SDK, xAI provider · xAI, Multi-agent.

Multi-agent in the JavaScript ecosystem

The Vercel AI SDK (ai) has become a standard for integrating AI models into JavaScript and TypeScript web applications. Paired with the @ai-sdk/xai provider, it gives you access to Grok’s multi-agent mode from Next.js, SvelteKit, or any other JavaScript framework, without leaving the abstractions your front-end team already knows.

Installation

You need two packages:

npm install ai @ai-sdk/xai

They split the work: @ai-sdk/xai handles communication with the xAI API, while ai provides the generic generateText and streamText functions you use regardless of the provider.

Basic configuration

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

const { text } = await generateText({
  model: xai.responses("grok-4.20-multi-agent-0309"),
  prompt: "What are the latest JavaScript frameworks of 2026?",
  providerOptions: {
    xai: { reasoningEffort: "low" },
  },
});

console.log(text);

Multi-agent requires xAI’s Responses API. With current versions (AI SDK 7 and @ai-sdk/xai 5), it is the only API the provider uses: xai(model) already goes through it. Writing xai.responses() makes that choice explicit, which also protects code running against an older SDK version where xai() went through Chat Completions.

Controlling the number of agents

You set the number of agents with providerOptions.xai.reasoningEffort:

// Pass as providerOptions to generateText or streamText
const rapide = { xai: { reasoningEffort: "low" } };       // 4 agents
const approfondie = { xai: { reasoningEffort: "high" } }; // 16 agents

The mapping is the same one you saw with the OpenAI SDK: low and medium use 4 agents, while high and xhigh use 16. So you get the same two modes under a different parameter name.

Streaming with streamText

In a web application, streaming becomes mandatory: a multi-agent research run can take a minute, and no one stays in front of an empty screen that long.

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

const result = streamText({
  model: xai.responses("grok-4.20-multi-agent-0309"),
  prompt: "Analyze AI market trends in Europe",
  providerOptions: {
    xai: { reasoningEffort: "medium" },
  },
});

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

In a Next.js application using the App Router, you don’t even need to consume the stream on the server: an API route can return it directly to the browser.

// app/api/research/route.ts
import { xai } from "@ai-sdk/xai";
import { createTextStreamResponse, streamText, toTextStream } from "ai";

export async function POST(req: Request) {
  const { query } = await req.json();

  const result = streamText({
    model: xai.responses("grok-4.20-multi-agent-0309"),
    prompt: query,
    providerOptions: {
      xai: { reasoningEffort: "low" },
    },
  });

  // Raw text stream: on the client, read it with fetch,
  // or with useChat and a TextStreamChatTransport
  return createTextStreamResponse({
    stream: toTextStream({ stream: result.stream }),
  });
}

The reasoningEffort: "low" in this example is a deliberate choice: on a route called directly from the UI, the latency of 16 agents would be hard to sustain.

Error handling

Because multi-agent is in beta, an outage should not turn into a broken page. The pattern below shows the simplest fallback: catch the error and replay the same question on a standard model:

try {
  const { text } = await generateText({
    model: xai.responses("grok-4.20-multi-agent-0309"),
    prompt: "My question",
    providerOptions: {
      xai: { reasoningEffort: "low" },
    },
  });
  return text;
} catch (error) {
  console.error("Multi-agent error:", error);
  // Fall back to a standard model
  const { text } = await generateText({
    model: xai("grok-4.7"),
    prompt: "My question",
  });
  return text;
}

The fallback switches to a standard model, grok-4.7, which does not have multi-agent’s constraints (with AI SDK 7, xai() also uses the Responses API). Also let your user know in some way, because the fallback answer will be less thorough than the one they expected.

Use case in a web application

The use case that gets the most out of this integration is the advanced research interface: the user asks a complex question, your application opens the stream, and the answer writes itself to the screen while the agents keep working in the background.

The resulting experience is surprisingly natural. The text advances, sometimes pauses when the agents launch a web search, then resumes. These pauses are far from a flaw: they tell the user that real research is underway—provided your interface pairs them with an indicator instead of making it look like a stall.

Key takeaways

• Use @ai-sdk/xai with xai.responses() for multi-agent
• Control the number of agents with providerOptions.xai.reasoningEffort
• streamText is ideal for interactive web applications
• The Vercel AI SDK integrates natively with Next.js and other frameworks
• Plan a fallback to a standard model in case of an error