--- title: Stream Updates to Visual Interfaces description: Learn how to generate text using the AI SDK and React Server Components. tags: ['rsc', 'streaming', 'generative user interface'] --- # Stream Updates to Visual Interfaces In our previous example we've been streaming react components from the server to the client. By streaming the components, we open up the possibility to update these components based on state changes that occur in the server. ## Client ```tsx filename='app/page.tsx' 'use client'; import { useState } from 'react'; import { ClientMessage } from './actions'; import { useActions, useUIState } from '@ai-sdk/rsc'; import { generateId } from 'ai'; // Allow streaming responses up to 30 seconds export const maxDuration = 30; export default function Home() { const [input, setInput] = useState(''); const [conversation, setConversation] = useUIState(); const { continueConversation } = useActions(); return (

{conversation.map((message: ClientMessage) => (

{message.role}: {message.display}

))}

{ setInput(event.target.value); }} />

); } ``` ## Server ```tsx filename='app/actions.tsx' 'use server'; import { getMutableAIState, streamUI } from '@ai-sdk/rsc'; import { ReactNode } from 'react'; import { z } from 'zod'; import { generateId } from 'ai'; export interface ServerMessage { role: 'user' | 'assistant'; content: string; } export interface ClientMessage { id: string; role: 'user' | 'assistant'; display: ReactNode; } export async function continueConversation( input: string, ): Promise { 'use server'; const history = getMutableAIState(); const result = await streamUI({ model: 'openai/gpt-5.4', messages: [...history.get(), { role: 'user', content: input }], text: ({ content, done }) => { if (done) { history.done((messages: ServerMessage[]) => [ ...messages, { role: 'assistant', content }, ]); } return

{content}

; }, tools: { deploy: { description: 'Deploy repository to vercel', inputSchema: z.object({ repositoryName: z .string() .describe('The name of the repository, example: vercel/ai-chatbot'), }), generate: async function* ({ repositoryName }) { yield

Cloning repository {repositoryName}...

; // [!code highlight:5] await new Promise(resolve => setTimeout(resolve, 3000)); yield

Building repository {repositoryName}...

; await new Promise(resolve => setTimeout(resolve, 2000)); return

{repositoryName} deployed!

; }, }, }, }); return { id: generateId(), role: 'assistant', display: result.value, }; } ``` ```typescript filename='app/ai.ts' import { createAI } from '@ai-sdk/rsc'; import { ServerMessage, ClientMessage, continueConversation } from './actions'; export const AI = createAI({ actions: { continueConversation, }, initialAIState: [], initialUIState: [], }); ```