--- title: Render Visual Interface in Chat description: Learn how to generate text using the AI SDK and React Server Components. tags: ['rsc', 'generative user interface'] --- # Render Visual Interface in Chat We've now seen how a language model can call a function and render a component based on a conversation with the user. When we define multiple functions in [`tools`](/docs/reference/ai-sdk-core/generate-text#tools), it is possible for the model to reason out the right functions to call based on whatever the user's intent is. This means that you can write a bunch of functions without the burden of implementing complex routing logic to run them. ## 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); }} />

); } ``` ```tsx filename='components/stock.tsx' export async function Stock({ symbol, numOfMonths }) { const data = await fetch( `https://api.example.com/stock/${symbol}/${numOfMonths}`, ); return (

{symbol}

{data.timeline.map(data => (

{data.date}

{data.value}

))}

); } ``` ```tsx filename='components/flight.tsx' export async function Flight({ flightNumber }) { const data = await fetch(`https://api.example.com/flight/${flightNumber}`); return (

{flightNumber}

{data.status}

{data.source}

{data.destination}

); } ``` ## 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'; import { Stock } from '@/components/stock'; import { Flight } from '@/components/flight'; 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: { showStockInformation: { description: 'Get stock information for symbol for the last numOfMonths months', inputSchema: z.object({ symbol: z .string() .describe('The stock symbol to get information for'), numOfMonths: z .number() .describe('The number of months to get historical information for'), }), generate: async ({ symbol, numOfMonths }) => { history.done((messages: ServerMessage[]) => [ ...messages, { role: 'assistant', content: `Showing stock information for ${symbol}`, }, ]); return ; }, }, showFlightStatus: { description: 'Get the status of a flight', inputSchema: z.object({ flightNumber: z .string() .describe('The flight number to get status for'), }), generate: async ({ flightNumber }) => { history.done((messages: ServerMessage[]) => [ ...messages, { role: 'assistant', content: `Showing flight status for ${flightNumber}`, }, ]); return ; }, }, }, }); 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: [], }); ```