vercel/ai · error

This component can only be used inside Server Components.

Error message

This component can only be used inside Server Components.

What it means

The `<AI>` component returned by `createAI` must render on the React Server (RSC) layer. The SDK detects the client bundle by checking whether `useState` exists on the imported React object (server React builds do not export hooks). If it does, this module was bundled into client code, which cannot provide the server-side AI state/actions plumbing.

Source

Thrown at packages/rsc/src/provider.tsx:118

}) {
  // Wrap all actions with our HoC.
  const wrappedActions: ServerWrappedActions = {};
  for (const name in actions) {
    wrappedActions[name] = wrapAction(actions[name], {
      onSetAIState,
    });
  }

  const wrappedSyncUIState = onGetUIState
    ? wrapAction(onGetUIState, {})
    : undefined;

  const AI: AIProvider<AIState, UIState, Actions> = async props => {
    if ('useState' in React) {
      // This file must be running on the React Server layer.
      // Ideally we should be using `import "server-only"` here but we can have a
      // more customized error message with this implementation.
      throw new Error(
        'This component can only be used inside Server Components.',
      );
    }

    let uiState = props.initialUIState ?? initialUIState;
    let aiState = props.initialAIState ?? initialAIState;
    let aiStateDelta = undefined;

    if (wrappedSyncUIState) {
      const [newAIStateDelta, newUIState] = await wrappedSyncUIState(aiState);
      if (newUIState !== undefined) {
        aiStateDelta = newAIStateDelta;
        uiState = newUIState;
      }
    }

    return (
      <InternalAIProvider

View on GitHub (pinned to 69428b1f8b)

Solutions

1. Remove `'use client'` from the file that calls `createAI` and render `<AI>` only from Server Components
2. Render `<AI>` in a server component (e.g. a layout.tsx) and pass client children as props
3. Ensure the file is named/imported so Next.js treats it as RSC (default for `app/` server files)
4. If using a custom bundler, enable the `react-server` condition for this module's imports

Example fix

// before (ai.tsx)
'use client';
export const AI = createAI({ ... });
// after (ai.tsx, no directive)
export const AI = createAI({ ... });
// layout.tsx (server component)
export default function Layout({ children }) {
  return <AI>{children}</AI>;
}

// in the file exporting the provider, assert it is the server build
if (typeof (React as any).useState !== 'undefined') {
  throw new Error('ai/rsc provider must not be imported into client code');
}

function isServerReact(react: typeof React): boolean {
  return !('useState' in react);
}

try {
  const mod = await import('../ai');
  return mod.AI;
} catch (err) {
  if (String(err).includes('only be used inside Server Components')) {
    throw new Error('Move <AI> usage into a Server Component (no "use client")');
  }
  throw err;
}

When it happens

Trigger: Rendering the `<AI>` provider from a file with `'use client'`; importing the `AI` component into a client component; a bundler misconfiguration that resolves the rsc package through the client entry.

Common situations: Next.js App Router projects where the `ai.ts` file created by `createAI` is accidentally marked `'use client'` or imported by a client component; using the RSC `ai/rsc` API in a plain SPA (Vite/CRA) with no server components; wrong package exports conditions (browser instead of react-server) in custom bundler setups.

Related errors

• You can't get the "${String(key)}" field from the AI state b
• `getMutableAIState` must be called before returning from an
• ${method}: Value stream is already closed.
• ${method}: Value stream is locked and cannot be updated.
• .append(): The current value is not a string. Received: ${ty

AI-assisted analysis of vercel/ai@69428b1f8b (2026-08-30). Data as JSON: /api/errors/3c1851aed2496faa. Report an issue: GitHub.