Skip to content
Docs
Generative UI
getMutableAIState

getMutableAIState

getMutableAIState

getMutableAIState is called within a Server Action to make updates to the AI state.

Methods

get

The get method returns a mutable copy of the AI state.

update

The update method updates the AI state with a new value.

done

You must call .done() when you're finished updating the AI state. This "seals" the AI state and marks it ready to be synced with the client as well as external storage.

Examples

const state = getMutableAIState();
state.update({ ...state.get(), key: 'value' });
state.update(currentState => ({ ...currentState, key: 'value' }));
state.done();
const state = getMutableAIState();
state.done({ ...state.get(), key: 'value' }); // Done with a new state

It can be called with a specific key as a shorthand for updating a part of the state (if the state is an object):

const state = getMutableAIState('messages');
state.done([...state.get(), newMessage]);
 
// is equivalent to:
const state = getMutableAIState();
state.update({
  ...state.get(),
  messages: [...state.get().messages, newMessage],
});

Usage

app/action.tsx
import { getMutableAIState } from 'ai/rsc';
 
async function submitUserMessage(content: string) {
  'use server'
 
  const aiState = getMutableAIState()
  aiState.update([...aiState.get(), { role: 'user', content }])
 
  const reply = createStreamableUI(<BotMessage>{spinner}</BotMessage>)
 
  const completion = runOpenAICompletion(openai, {
    model: 'gpt-3.5-turbo',
    stream: true,
    messages: [
      {
        role: 'system',
        content: 'You are a friendly assistant!',
      },
      ...aiState.get().map((message: any) => ({
        role: message.role,
        content: message.content,
      })),
    ],
    functions: [],
  })
 
  completion.onTextContent((content: string, isFinal: boolean) => {
    reply.update(<BotMessage>{content}</BotMessage>)
 
    if (isFinal) {
      reply.done()
      aiState.done([...aiState.get(), { role: 'assistant', content }])
    }
  })
 
  return {
    id: Date.now(),
    display: reply.value,
  }
}

© 2023 Vercel Inc.