@ai-sdk/react

@ai-sdk/rsc is a sub-package in the Vercel AI SDK ecosystem; rsc stands for React Server Components and provides tools for integrating generative AI capabilities in server component environments.

Vercel AI SDK uses the changesets tool to manage version changes, and each patch to the core ai package is automatically propagated to all adapter layers such as @ai-sdk/svelte, @ai-sdk/react, and @ai-sdk/vue.

The Vercel AI SDK adopts a Monorepo single-repository management model, with the core package ai and various framework adapter packages (such as @ai-sdk/vue, @ai-sdk/react, and @ai-sdk/svelte) released in coordination.

AI SDK's framework adapter packages keep their patch version numbers aligned with the core package (for example, ai@7.0.140 corresponds to @ai-sdk/svelte@5.0.140).

Within the AI SDK ecosystem, there exists an adapter package @ai-sdk/zod similar to @ai-sdk/valibot, with both providing the same public interface.

@ai-sdk/vue is the AI SDK's binding layer for the Vue framework, responsible for exposing the capabilities of the core ai package (such as streaming responses, message state management, and the useChat composable API) to Vue components.

The core capabilities of @ai-sdk/vue are exposed in the form of Vue Composables, such as hooks like useChat and useCompletion, which are functionally symmetric with @ai-sdk/react.

Framework adaptation layers such as @ai-sdk/vue and @ai-sdk/react wrap core capabilities into the corresponding framework's composable APIs.

The server issues a short-term token for the selected model and the browser opens the WebSocket session itself, which keeps the API Key from being exposed on the client side; on the browser side, the useRealtime hook in @ai-sdk/react can be used to handle connection, microphone capture, and audio playback.

The AI SDK officially maintains multiple framework bindings such as React, Svelte, and Vue, and these packages usually release patches with the same version number within the same time window.

The React adapter package uses useState and the rules of hooks to implement the same reactive semantics as the Vue adapter layer.

For production environments, it is recommended to carefully evaluate the actual benefit of each upgrade in conjunction with the changelog, and to establish a reasonable dependency management strategy.

The ai core package has entered the 7.x stage, while the React adapter layer remains at 4.x.

React developers use @ai-sdk/react, while Vue developers depend on @ai-sdk/vue.

Both useChat and useCompletion support specifying a custom backend route via the api parameter, where the backend calls the model provider API, thereby avoiding exposure of keys on the frontend.

The React adapter package uses version 2.0.x and the core package ai uses version 5.0.x; the two are managed independently under semantic versioning and remain linked through the dependency relationship.

@ai-sdk/react serves as the upper-level React binding layer, and its behavioral changes are driven by the underlying ai core package.

Version 3.0.300 is a patch release whose main content is a series of dependency synchronization updates, rather than the introduction of new features or breaking changes.

Upgrading to 3.0.300 generally requires no modifications to existing code; the main benefit is obtaining stability improvements and potential bug fixes brought by the underlying core package.

@ai-sdk/svelte, @ai-sdk/react, @ai-sdk/vue, and others are adapter layer packages targeting different front-end frameworks.