useActions is a Vercel AI SDK hook that exposes the server actions registered with createAI to client-side components. A component must render inside the AI context provider before it can retrieve and call those actions. section 4.2.2 section 4.2.3
Use the hook as the client-side boundary for server-backed operations:
- Define actions such as continueConversation, fetchUserData, or updateUserSettings in createAI. section 4.2.2
- Wrap the application layout with the AI provider so descendant components share the context. section 4.2.3
- Call useActions in a child component and destructure the action needed by the interaction. section 4.2.3
- Invoke the action from an event handler, then update UI state with the returned value. section 4.2.3
Calling a conversation server action
A chat page can retrieve the registered action with `const { continueConversation } = useActions();`. Its submit handler adds the user message to UI state, calls `await continueConversation(input, provider, model)`, appends the returned assistant response, and clears the input. The action can use server-side conversation history and stream a rendered response before returning it to the component. section 4.2.3
Listing 4.9 Including new hooks for managing AI and UI state
export default function Home() {
const [provider, setProvider] = useState('openai');
const [model, setModel] = useState('gpt-4');
const [input, setInput] = useState('');
const [isLoading, setIsloading] = useState(false);
const [conversation, setConversation] =
useUIState(); #1
const [aiState] = useAIState(); #2
const { continueConversation } = useActions(); #3
const handleSubmit = async (e) => {
e.preventDefault();
setUIState((prev) => ({. #4
...prev,
messages: [...prev.messages, { role: 'user', content: input }],
}));
const response =
await continueConversation(input, provider, model); #5
setUIState((prev) => ({
...prev,
messages: [...prev.messages, response],
}));
setInput('');
};
Inspect the complete hook integration showing useUIState, useAIState, useActions, and the continueConversation call in a React chat component. section 4.2.3
