--- title: Stream Text with Chat Prompt description: Learn how to stream text with chat prompt using the AI SDK and React Server Components. tags: ['rsc', 'chat'] --- # Stream Text with Chat Prompt Chat completion can sometimes take a long time to finish, especially when the response is big. In such cases, it is useful to stream the chat completion to the client in real-time. This allows the client to display the new message as it is being generated by the model, rather than have users wait for it to finish. ## Client Let's create a simple conversation between a user and a model, and place a button that will call `continueConversation`. ```tsx filename='app/page.tsx' 'use client'; import { useState } from 'react'; import { Message, continueConversation } from './actions'; import { readStreamableValue } from '@ai-sdk/rsc'; // Allow streaming responses up to 30 seconds export const maxDuration = 30; export default function Home() { const [conversation, setConversation] = useState([]); const [input, setInput] = useState(''); return (

{conversation.map((message, index) => (

{message.role}: {message.content}

))}

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

); } ``` ## Server Now, let's implement the `continueConversation` function that will insert the user's message into the conversation and stream back the new message. ```typescript filename='app/actions.ts' 'use server'; import { streamText } from 'ai'; import { createStreamableValue } from '@ai-sdk/rsc'; export interface Message { role: 'user' | 'assistant'; content: string; } export async function continueConversation(history: Message[]) { 'use server'; const stream = createStreamableValue(); (async () => { const { textStream } = streamText({ model: 'openai/gpt-5.4', system: "You are a dude that doesn't drop character until the DVD commentary.", messages: history, }); for await (const text of textStream) { stream.update(text); } stream.done(); })(); return { messages: history, newMessage: stream.value, }; } ```