Next.js Discord

Discord Forum

Attempted import error: 'useActions' is not exported from 'ai/rsc'

Answered
French Lop posted this in #help-forum
Open in Discord
French LopOP
Hi friends, I'm attempting to create my first simple AI hello world example, using the ai/rsc package.

I'm attempting to follow the example instructions from the README (https://github.com/vercel/ai?tab=readme-ov-file#appactionstsx-nextjs-app-router) but when I import { useActions } from 'ai/rsc', useActions comes through as undefined. Any idea why this may be? My page.tsx where I'm including this import from is a server component.
Answered by French Lop
Oof, I think I figured it out, {useActions} must be imported from a client component. Still wrapping my head around this new paradigm. Perhaps a better error message might be helpful for noobs.
View full answer

2 Replies

French LopOP
Oof, I think I figured it out, {useActions} must be imported from a client component. Still wrapping my head around this new paradigm. Perhaps a better error message might be helpful for noobs.
Answer
Velvet ant
the example on the readme is confusing. page in app router is a server component. So this seems wrong to me :

import { useActions } from 'ai/rsc';
import { ReactNode, useState } from 'react';

export default function Page() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState<ReactNode[]>([]);
  const { submitMessage } = useActions();

  return (
    <div>
      <input
        value={input}
        onChange={event => {
          setInput(event.target.value);
        }}
      />
      <button
        onClick={async () => {
          const { ui } = await submitMessage(input);
          setMessages(currentMessages => [...currentMessages, ui]);
        }}
      >
        Submit
      </button>
    </div>
  );
}