Source: https://ai-sdk.dev/docs/troubleshooting/server-actions-in-client-components

AI SDK

Menu

v5 (Latest)

AI SDK 5.x

AI SDK by Vercel

AI SDK 6 Beta

Foundations

Overview

Providers and Models

Prompts

Tools

Streaming

Getting Started

Navigating the Library

Next.js App Router

Next.js Pages Router

Svelte

Vue.js (Nuxt)

Node.js

Expo

Agents

Agents

Building Agents

Workflow Patterns

Loop Control

AI SDK Core

Overview

Generating Text

Generating Structured Data

Tool Calling

Model Context Protocol (MCP) Tools

Prompt Engineering

Settings

Embeddings

Image Generation

Transcription

Speech

Language Model Middleware

Provider & Model Management

Error Handling

Testing

Telemetry

AI SDK UI

Overview

Chatbot

Chatbot Message Persistence

Chatbot Resume Streams

Chatbot Tool Usage

Generative User Interfaces

Completion

Object Generation

Streaming Custom Data

Error Handling

Transport

Reading UIMessage Streams

Message Metadata

Stream Protocols

AI SDK RSC

Advanced

Reference

AI SDK Core

AI SDK UI

AI SDK RSC

Stream Helpers

AI SDK Errors

Migration Guides

Troubleshooting

Azure OpenAI Slow to Stream

Client-Side Function Calls Not Invoked

Server Actions in Client Components

useChat/useCompletion stream output contains 0:... instead of text

Streamable UI Errors

Tool Invocation Missing Result Error

Streaming Not Working When Deployed

Streaming Not Working When Proxied

Getting Timeouts When Deploying on Vercel

Unclosed Streams

useChat Failed to Parse Stream

Server Action Plain Objects Error

useChat No Response

Custom headers, body, and credentials not working with useChat

TypeScript performance issues with Zod and AI SDK 5

useChat "An error occurred"

Repeated assistant messages in useChat

onFinish not called when stream is aborted

Tool calling with generateObject and streamObject

Abort breaks resumable streams

streamText fails silently

Streaming Status Shows But No Text Appears

Stale body values with useChat

Type Error with onToolCall

Unsupported model version error

Object generation failed with OpenAI

Model is not assignable to type "LanguageModelV1"

TypeScript error "Cannot find namespace 'JSX'"

React error "Maximum update depth exceeded"

Jest: cannot find module '@ai-sdk/rsc'

Copy markdown

Server Actions in Client Components

=======================================================================================================================================================

You may use Server Actions in client components, but sometimes you may encounter the following issues.

Issue

---

It is not allowed to define inline "use server" annotated Server Actions in Client Components.

Solution

---

To use Server Actions in a Client Component, you can either:

• Export them from a separate file with "use server" at the top.
• Pass them down through props from a Server Component.
• Implement a combination of createAI and useActions hooks to access them.

Learn more about Server Actions and Mutations .

'use server';
import { generateText } from 'ai';import { openai } from '@ai-sdk/openai';
export async function getAnswer(question: string) {  'use server';
  const { text } = await generateText({    model: openai.chat('gpt-3.5-turbo'),    prompt: question,  });
  return { answer: text };}

On this page

Server Actions in Client Components

Issue

Solution

Deploy and Scale AI Apps with Vercel.

Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.

Trusted by industry leaders:

• OpenAI
• Photoroom
• 
• 

Talk to an expert