Vercel AI SDK 4.2 important update supports MCP

❝

Key features:

• MCP (Model Context Protocol) client support: allows applications to connect to hundreds of pre-built tools such as GitHub, Slack, file system operations, etc. Users can also build and connect custom MCP servers to extend application functionality.
• Reasoning support: Support for reasoning models such as Anthropic's Claude 3.7 Sonnet and DeepSeek R1, which can solve problems in an explicit step-by-step reasoning manner.
• Sources standardization: Provide standardized URL search results across OpenAI, Google, Vertex, and Perplexity, ensuring consistent display of search results across different providers.
• Other features: Includes support for the OpenAI Responses API (for reliable answers based on web searches and simplified chat history).

❞

Introducing MCP clients, inference, sources, etc.

AI SDK is an open source toolkit for building AI applications using JavaScript and TypeScript. Its unified provider API allows you to use models in any language and supports powerful UI integration with leading web frameworks such as Next.js and Svelte.

With over 1 million downloads per week, developers are using the SDK to create amazing apps like Otto, an AI-powered research tool:

“The AI ​​SDK provides everything for Otto, from agents to data structures to building workflows. With the AI ​​SDK, we can focus on developing our product, allowing us to ship updates faster. Best of all, we don’t have to worry about changes to support new models - the AI ​​SDK takes care of that for us, allowing us to release updates faster.” - Sully Omar

Today, we are announcing the release of AI SDK 4.2, which brings the following new features and improvements:

• Reasoning
• Model Context Protocol (MCP) Client
• useChat message widget
• Image Generation with Language Models
• URL Source
• OpenAI Response API
• Svelte 5
• Middleware Updates

Let’s explore these new features and improvements.

Reasoning

Reasoning models, such as Anthropic Sonnet 3.7 and DeepSeek R1, invest computational resources as they reason, solving problems step by step, much like humans demonstrate their chains of thought. This approach can produce more accurate and reliable results than traditional models, especially for tasks that involve logic or multi-step analysis.

The AI ​​SDK now supports inference models from all major providers. You can use Anthropic's Claude 3.7 Sonnet like any other model and access the model's inference token through the reasoning property:

javascript

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

const { text, reasoning } = await generateText({
model: anthropic('claude-3-7-sonnet-20250219'),
prompt: 'How many people will live in the world in 2040? ',
});

You can try different models to find the one that works best for your application. You can easily switch providers by changing just two lines of code:

javascript

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

const { text, reasoning } = await generateText({
model: bedrock('anthropic.claude-3-7-sonnet-20250219-v1:0'),
prompt: 'How many people will live in the world in 2040? ',
});

For providers that output reasoning as part of the text output rather than as a separate token, you can use extractReasoningMiddleware, which automatically extracts the reasoning content from the formatted response. This ensures a consistent experience across providers such as OpenAI, Anthropic, Groq, Together AI, Azure OpenAI, etc., without requiring changes to your application code.

To see inference in action, check out the AI ​​SDK Inference Template. To learn more, see our Inference documentation.

Model Context Protocol (MCP) Client

The AI ​​SDK now supports the Model Context Protocol (MCP), an open standard that connects your app to a growing ecosystem of tools and integrations. With MCP support, you have access to hundreds of pre-built tools (“servers”) that add powerful capabilities to your app. Some popular MCP servers include:

• GitHub - Manage repositories, issues, and pull requests
• Slack - Send messages and interact with your workspace
• Filesystem - Secure file operations with configurable access controls

Because MCP is an open protocol, your users can also build and connect their own custom MCP servers to extend your application functionality as needed. MCP has many use cases, but is particularly powerful for local code automation.

The SDK supports connecting to an MCP server via stdio (local tools) or SSE (remote server). Once connected, you can use MCP tools directly in the AI ​​SDK:

javascript

import { experimental_createMCPClient as createMCPClient } from 'ai';
import { openai } from '@ai-sdk/openai';

const mcpClient = await createMCPClient({
transport:
type: 'sse',
url: 'https://my-server.com/sse',
},
});

const response = await generateText({
model: openai('gpt-4o'),
tools: await mcpClient.tools(), // Use MCP tools
prompt: 'Find products priced below $100',
});

To learn more about implementing MCP in your project, check out our MCP tool documentation and step-by-step MCP guide.

useChat message widget

Language models generate more than just text—they combine reasoning, provenance, tool calls, and text responses in a single message. In multi-step proxy use cases, these different types of output are often mixed in a single response.

AI SDK 4.2 introduces message parts for useChat, a new way to handle these different types of outputs that preserves their exact order:

javascript

function Chat() {
const { messages } = useChat();
return (
<div>
{messages.map(message => (
message.parts.map((part, i) => {
switch (part.type) {
case "text": return <p key={i}>{part.text}</p>;
case "source": return <p key={i}>{part.source.url}</p>;
case "reasoning": return <div key={i}>{part.reasoning}</div>;
case "tool-invocation": return <div key={i}>{part.toolInvocation.toolName}</div>;
case "file": return <img key={i} src={`data:${part.mimeType};base64,${part.data}`} />;
}
})
))}
</div>
);
}

We plan to add more widget types in future 4.2.x releases. To learn more, check out our 4.2 Migration Guide.

Image Generation with Language Models

Google’s Gemini 2.0 Flash is the first language model capable of generating images directly in responses. The AI ​​SDK supports this capability, enabling you to build multimodal chatbots that support text and image generation and understanding.

On the client side, you can access the images generated by the language model using the file message widget via useChat:

javascript

import { useChat } from '@ai-sdk/react';

export default function Chat() {
const { messages } = useChat();

return (
<div>
{messages.map(message => (
<div key={message.id}>
{message.role === 'user' ? 'User: ' : 'AI: '}
{message.parts.map((part, i) => {
if (part.type === 'text') {
return <div key={i}>{part.text}</div>;
} else if (
part.type === 'file' &&
part.mimeType.startsWith('image/')
) {
return (
<img
key={i}
src={`data:${part.mimeType};base64,${part.data}`}
alt="Generated image"
/>
);
}
})}
</div>
))}
</div>
);
}

Once images are generated, they become part of your chat history just like text messages. You can reference, iterate, or “edit” previously generated images through natural conversation — asking the model to modify color, adjust style, or create variations, all while maintaining the context of the visual conversation.

To learn more, check out our file generation documentation.

URL Source

Many providers, such as OpenAI and Google, can include search results in their responses, but each provider implements this differently. The AI ​​SDK standardizes URL origins (i.e., websites), enabling you to build AI applications that use attribution.

For example, here's how to use and send a source using Gemini Flash:

api/chat/route.ts

javascript

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

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

const result = streamText({
model: google("gemini-1.5-flash", { useSearchGrounding: true }),
messages,
});

return result.toDataStreamResponse({
sendSources: true,
});
}

Here’s how to use useChat in a client-side component. Show source:

app/page.tsx

javascript

function Chat() {
const { messages } = useChat();
return (
<div>
{messages.map((message) => (
<div key={message.id}>
{message.role === "user" ? "User: " : "AI: "}
{message.parts
.filter((part) => part.type !== "source")
.map((part, index) => {
if (part.type === "text") {
return <div key={index}>{part.text}</div>;
}
})}
{message.parts
.filter((part) => part.type === "source")
.map((part) => (
<span key={`source-${part.source.id}`}>
[
<a href={part.source.url} target="_blank">
{part.source.title ?? new URL(part.source.url).hostname}
</a>
]
</span>
))}
</div>
))}
</div>
);
}

The AI ​​SDK supports sourcing via URLs for compatible models such as OpenAI Responses, Google, Vertex, and Perplexity. To see sourcing in action, check out the sourcing template.

OpenAI Response API

OpenAI recently released the Responses API, a new way to build applications on the OpenAI platform. The new API provides the ability to persist chat history, web search tools to support LLM responses, and upcoming file search and computer usage tools.

The AI ​​SDK has supported the Responses API since day one, and migrating from the existing Completions API to the new Responses API is very simple:

javascript

import { openai } from '@ai-sdk/openai';

const completionsAPIModel = openai('gpt-4o-mini');
const responsesAPIModel = openai.responses('gpt-4o-mini');

New web search tools enable models to access the internet for relevant information, improving the quality of responses to factual queries:

javascript

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

const result = await generateText({
model: openai.responses('gpt-4o-mini'),
prompt: 'What happened in San Francisco last week? ',
tools: {
web_search_preview: openai.tools.webSearchPreview(),
},
});

console.log(result.text);
console.log(result.sources);

The Responses API also simplifies the management of conversation history. Instead of sending the entire conversation with each request, you can reference previous interactions by ID, reducing the complexity of your application.

To learn more about these features, check out the OpenAI Responses API guide.

Svelte 5

With AI SDK 4.2, the @ai-sdk/svelte package has been completely rewritten by the Svelte team to support Svelte 5 and take full advantage of native mode.

This new implementation replaces React's hooks with a class-based Svelte-native pattern:

html

<script>
import { Chat } from '@ai-sdk/svelte';

// Use the Chat class instead of the useChat hook
const chat = new Chat();
</script>

<div>
{#each chat.messages as message}
<div class="message {message.role}">{message.content}</div>
{/each}
</div>

To learn more, check out the Svelte Quick Start Guide or look at the open source Svelte chatbot template implemented using these patterns.

Middleware Updates

Language model middleware, now stable, intercepts and modifies calls to a language model to enhance its behavior. This pattern enables features such as guardrails, caching, and logging while maintaining flexibility for providers. The middleware is applied via a simple wrapper function that preserves the standard model interface.

The SDK now includes three production-ready middleware options:

• extractReasoningMiddleware: Extracts reasoning steps from text with special tags such as .
• simulateStreamingMiddleware: Simulates streaming behavior through responses from a non-streaming language model.
• defaultSettingsMiddleware: Apply consistent configuration across model calls, working seamlessly with any model, including custom providers. Simply specify default values ​​for parameters (such as temperature) and set provider-specific options using providerMetadata.

javascript

import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";
import {
customProvider,
defaultSettingsMiddleware,
wrapLanguageModel,
} from "ai";

// Custom provider using defaultSettingsMiddleware:
export const model = customProvider({
languageModels:
fast: openai("gpt-4o-mini"),
writing: anthropic("claude-3-5-sonnet-latest"),
reasoning: wrapLanguageModel({
model: anthropic("claude-3-7-sonnet-20250219"),
middleware: defaultSettingsMiddleware({
settings: {
providerMetadata: {
anthropic:
thinking: { type: "enabled", budgetTokens: 12000 },
},
},
},
}),
}),
},
});

These middleware options can be combined to create powerful, composable capabilities across any supported language model. Check out our middleware documentation to learn more.

Other Features

We recently made several experimental features stable, which means they are now production-ready and fully tested. These features include:

• Custom Provider: Maps an ID to any model, allowing you to set custom model configuration, aliases, etc.
• Middleware improvements: Apply multiple middlewares simultaneously to enhance request handling and transformation. Middleware has been moved to stable.
• Tool call streaming: Stream partial tool calls as part of the data flow. Moved to stable.
• Response body access: Directly access the raw response body through the response.body property when using generateText or generateObject.
• Data stream enhancements: send start/end events for streamText, and use write/writeSource methods for finer control over streaming data.
• Error handling: Use the onError callback of streamText/streamObject to manage errors gracefully.
• Object Generation: Fix and improve generated content using the repairText function of generateObject.
• Provider options: Configure provider-specific request options (e.g. OpenAI's reasoningEffort). Depends on the provider. Moved to stable.
• Provider Metadata: Access provider-specific response metadata. Depends on the provider. Moved to stable.

Provider Updates

The AI ​​SDK provider ecosystem continues to expand, with new and improved providers including:

• Amazon Bedrock: Tighter integration with AI SDK standard features, support for abort, fetch, and error handling. Added support for cache points, image generation for Amazon Nova Canvas, budget token support, and inference support.
• Anthropic: Added inference support, model settings tweaks for inference content, tool updates (bash, text editor, computers), and image URL support.
• Azure: Added support for image generation.
• Cohere: Improved tool handling, fixed parameters and tool plan stuff.
• DeepInfra: Added support for image generation.
• Google: Enhanced schema support, tolerance for undefined parts, seed support, dynamic retrieval, empty content handling, inference support, and model ID updates.
• Google Vertex AI: Added Gemini model, support for public file URLs in messages, and hint caching for the Anthropic Claude model.
• Mistral: Improved content handling, fixes for undefined content, complex content types, PDF support, and multiple text content sections.
• OpenAI: Added support for gpt-4.5, o3-mini, Responses API, and PDF input.
• OpenAI compatibility: Added support for providerOptions in generateText/streamText.
• Perplexity: New source support.
• Replicate: Added support for versioned models.
• Together AI: Added support for image generation and extended the provider V1 specification.
• xAI: Added support for image generation.

getting Started

With powerful new features like MCP support, language model image generation, and inference, there’s never been a better time to build AI applications with the AI ​​SDK.

• Starting a New AI Project: Ready to build something new? Check out our latest guide.
• Explore our templates: Visit our template library to see the AI ​​SDK in action.
• Join the community: Share your builds in our GitHub discussions.

exhibit

Since the release of version 4.1, we’ve seen some amazing products powered by the AI ​​SDK that deserve special mention:

• Otto: A proxy spreadsheet that automates repetitive knowledge work.
• Payload: An open source Next.js full-stack framework that turns your configuration into a complete backend, including admin UI, API, and database management, in one seamless package.

“Switching to the AI ​​SDK allowed us to immediately remove a ton of custom code and easily support all current and future AI providers. The API is very clean, well thought out, and offers first class TypeScript support - we couldn’t be happier!” - Alessio Gravili, Payload