Server Actions in Client Components

Troubleshooting errors related to 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.

actions.ts

'use server';

import { generateText } from 'ai';

export async function getAnswer(question: string) {
  'use server';

  const { text } = await generateText({
    model: "anthropic/claude-sonnet-5.5",
    prompt: question,
  });

  return { answer: text };
}

PreviousClient-Side Function Calls Not Invoked NextuseChat/useCompletion stream output contains 0:... instead of text