{"record":{"id":"3c1851aed2496faa","repo":"vercel/ai","slug":"this-component-can-only-be-used-inside-server-comp","errorCode":null,"errorMessage":"This component can only be used inside Server Components.","messagePattern":"This component can only be used inside Server Components\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/rsc/src/provider.tsx","lineNumber":118,"sourceCode":"}) {\n  // Wrap all actions with our HoC.\n  const wrappedActions: ServerWrappedActions = {};\n  for (const name in actions) {\n    wrappedActions[name] = wrapAction(actions[name], {\n      onSetAIState,\n    });\n  }\n\n  const wrappedSyncUIState = onGetUIState\n    ? wrapAction(onGetUIState, {})\n    : undefined;\n\n  const AI: AIProvider<AIState, UIState, Actions> = async props => {\n    if ('useState' in React) {\n      // This file must be running on the React Server layer.\n      // Ideally we should be using `import \"server-only\"` here but we can have a\n      // more customized error message with this implementation.\n      throw new Error(\n        'This component can only be used inside Server Components.',\n      );\n    }\n\n    let uiState = props.initialUIState ?? initialUIState;\n    let aiState = props.initialAIState ?? initialAIState;\n    let aiStateDelta = undefined;\n\n    if (wrappedSyncUIState) {\n      const [newAIStateDelta, newUIState] = await wrappedSyncUIState(aiState);\n      if (newUIState !== undefined) {\n        aiStateDelta = newAIStateDelta;\n        uiState = newUIState;\n      }\n    }\n\n    return (\n      <InternalAIProvider","sourceCodeStart":100,"sourceCodeEnd":136,"githubUrl":"https://github.com/vercel/ai/blob/69428b1f8b037e4d118fb4853428d5c4e620493c/packages/rsc/src/provider.tsx#L100-L136","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Remove `'use client'` from the file that calls `createAI` and render `<AI>` only from Server Components","Render `<AI>` in a server component (e.g. a layout.tsx) and pass client children as props","Ensure the file is named/imported so Next.js treats it as RSC (default for `app/` server files)","If using a custom bundler, enable the `react-server` condition for this module's imports"],"exampleFix":"// before (ai.tsx)\n'use client';\nexport const AI = createAI({ ... });\n// after (ai.tsx, no directive)\nexport const AI = createAI({ ... });\n// layout.tsx (server component)\nexport default function Layout({ children }) {\n  return <AI>{children}</AI>;\n}","handlingStrategy":"type-guard","validationCode":"// in the file exporting the provider, assert it is the server build\nif (typeof (React as any).useState !== 'undefined') {\n  throw new Error('ai/rsc provider must not be imported into client code');\n}","typeGuard":"function isServerReact(react: typeof React): boolean {\n  return !('useState' in react);\n}","tryCatchPattern":"try {\n  const mod = await import('../ai');\n  return mod.AI;\n} catch (err) {\n  if (String(err).includes('only be used inside Server Components')) {\n    throw new Error('Move <AI> usage into a Server Component (no \"use client\")');\n  }\n  throw err;\n}","preventionTips":["Never add 'use client' to the file that calls createAI","Render <AI> only from server components (layouts/pages)","Import the AI component only in RSC files; pass client components as children","Check bundle warnings for ai/rsc appearing in client chunks"],"tags":["rsc","react-server-components","client-server-boundary","nextjs"],"backgroundTag":"component-used-on-wrong-layer","analyzedSha":"69428b1f8b037e4d118fb4853428d5c4e620493c","analyzedAt":"2026-08-30T12:32:21.016Z","schemaVersion":2},"datasetVersion":"2026-08-30T13:17:10.514Z"}