AI TOOLKIT
Get started
Recipes/Next.js

Render Visual Interface in Chat

Learn how to render visual interfaces in chat using the AI TOOLKIT and Next.js

4 min readnextgenerative user interfaceView source

An interesting consequence of language models that can call tools is that this ability can be used to render visual interfaces by streaming React components to the client. history={[ { role: 'User', content: 'How is it going?' }, { role: 'Assistant', content: 'All good, how may I help you?' }, ]} inputMessage={{ role: 'User', content: 'What is the weather in San Francisco?', }} outputMessage={{ role: 'Assistant', content: 'The weather is 24°C and sunny in San Francisco.', display: ( content={{ weather: { temperature: 24, condition: 'Sunny', }, }} /> ), }} />

Run it locally

$ npm install ai

Client

Let's build an assistant that gets the weather for any city by calling the getWeatherInformation tool. Instead of returning text during the tool call, you will render a React component that displays the weather information on the client.

'use client';

import { useChat } from '@ai-toolkit/react';

import {

DefaultChatTransport,

lastAssistantMessageIsCompleteWithToolCalls,

} from 'ai-toolkit';

import { useState } from 'react';

import { ChatMessage } from './api/chat/route';

export default function Chat() {

const [input, setInput] = useState('');

const { messages, sendMessage, addToolOutput } = useChat<ChatMessage>({

transport: new DefaultChatTransport({

api: '/api/chat',

}),

sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,

// run client-side tools that are automatically executed:

async onToolCall({ toolCall }) {

if (toolCall.toolName === 'getLocation') {

const cities = ['New York', 'Los Angeles', 'Chicago', 'San Francisco'];

// No await - avoids potential deadlocks

addToolOutput({

tool: 'getLocation',

toolCallId: toolCall.toolCallId,

output: cities[Math.floor(Math.random() * cities.length)],

});

}

},

});

return (

<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch gap-4">

{messages?.map(m => (

<div key={m.id} className="whitespace-pre-wrap flex flex-col gap-1">

<strong>{${m.role}: }</strong>

{m.parts?.map((part, i) => {

switch (part.type) {

case 'text':

return <div key={m.id + i}>{part.text}</div>;

// render confirmation tool (client-side tool with user interaction)

case 'tool-askForConfirmation':

return (

<div

key={part.toolCallId}

className="text-gray-500 flex flex-col gap-2"

>

<div className="flex gap-2">

{part.state === 'output-available' ? (

<b>{part.output}</b>

) : (

<>

<button

className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"

onClick={() =>

addToolOutput({

tool: 'askForConfirmation',

toolCallId: part.toolCallId,

output: 'Yes, confirmed.',

})

}

>

Yes

</button>

<button

className="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700"

onClick={() =>

addToolOutput({

tool: 'askForConfirmation',

toolCallId: part.toolCallId,

output: 'No, denied',

})

}

>

No

</button>

</>

)}

</div>

</div>

);

// other tools:

case 'tool-getWeatherInformation':

if (part.state === 'output-available') {

return (

<div

key={part.toolCallId}

className="flex flex-col gap-2 p-4 bg-blue-400 rounded-lg"

>

<div className="flex flex-row justify-between items-center">

<div className="text-4xl text-blue-50 font-medium">

{part.output.value}°

{part.output.unit === 'celsius' ? 'C' : 'F'}

</div>

<div className="h-9 w-9 bg-amber-400 rounded-full flex-shrink-0" />

</div>

<div className="flex flex-row gap-2 text-blue-50 justify-between">

{part.output.weeklyForecast.map(forecast => (

<div

key={forecast.day}

className="flex flex-col items-center"

>

<div className="text-xs">{forecast.day}</div>

<div>{forecast.value}°</div>

</div>

))}

</div>

</div>

);

}

break;

case 'tool-getLocation':

if (part.state === 'output-available') {

return (

<div

key={part.toolCallId}

className="text-gray-500 bg-gray-100 rounded-lg p-4"

>

User is in {part.output}.

</div>

);

} else {

return (

<div key={part.toolCallId} className="text-gray-500">

Calling getLocation...

</div>

);

}

default:

break;

}

})}

</div>

))}

<form

onSubmit={e => {

e.preventDefault();

sendMessage({ text: input });

setInput('');

}}

>

<input

className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"

value={input}

placeholder="Say something..."

onChange={e => setInput(e.currentTarget.value)}

/>

</form>

</div>

);

}

app/page.tsx
tsx
  1. 1'use client';
  2. 2import { useChat } from '@ai-toolkit/react';
  3. 3import {
  4. 4 DefaultChatTransport,
  5. 5 lastAssistantMessageIsCompleteWithToolCalls,
  6. 6} from 'ai-toolkit';
  7. 7import { useState } from 'react';
  8. 8import { ChatMessage } from './api/chat/route';
  9. 9export default function Chat() {
  10. 10 const [input, setInput] = useState('');
  11. 11 const { messages, sendMessage, addToolOutput } = useChat<ChatMessage>({
  12. 12 transport: new DefaultChatTransport({
  13. 13 api: '/api/chat',
  14. 14 }),
  15. 15 sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
  16. 16 // run client-side tools that are automatically executed:
  17. 17 async onToolCall({ toolCall }) {
  18. 18 if (toolCall.toolName === 'getLocation') {
  19. 19 const cities = ['New York', 'Los Angeles', 'Chicago', 'San Francisco'];
  20. 20 // No await - avoids potential deadlocks
  21. 21 addToolOutput({
  22. 22 tool: 'getLocation',
  23. 23 toolCallId: toolCall.toolCallId,
  24. 24 output: cities[Math.floor(Math.random() * cities.length)],
  25. 25 });
  26. 26 }
  27. 27 },
  28. 28 });
  29. 29 return (
  30. 30 <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch gap-4">
  31. 31 {messages?.map(m => (
  32. 32 <div key={m.id} className="whitespace-pre-wrap flex flex-col gap-1">
  33. 33 <strong>{`${m.role}: `}</strong>
  34. 34 {m.parts?.map((part, i) => {
  35. 35 switch (part.type) {
  36. 36 case 'text':
  37. 37 return <div key={m.id + i}>{part.text}</div>;
  38. 38 // render confirmation tool (client-side tool with user interaction)
  39. 39 case 'tool-askForConfirmation':
  40. 40 return (
  41. 41 <div
  42. 42 key={part.toolCallId}
  43. 43 className="text-gray-500 flex flex-col gap-2"
  44. 44 >
  45. 45 <div className="flex gap-2">
  46. 46 {part.state === 'output-available' ? (
  47. 47 <b>{part.output}</b>
  48. 48 ) : (
  49. 49 <>
  50. 50 <button
  51. 51 className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
  52. 52 onClick={() =>
  53. 53 addToolOutput({
  54. 54 tool: 'askForConfirmation',
  55. 55 toolCallId: part.toolCallId,
  56. 56 output: 'Yes, confirmed.',
  57. 57 })
  58. 58 }
  59. 59 >
  60. 60 Yes
  61. 61 </button>
  62. 62 <button
  63. 63 className="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700"
  64. 64 onClick={() =>
  65. 65 addToolOutput({
  66. 66 tool: 'askForConfirmation',
  67. 67 toolCallId: part.toolCallId,
  68. 68 output: 'No, denied',
  69. 69 })
  70. 70 }
  71. 71 >
  72. 72 No
  73. 73 </button>
  74. 74 </>
  75. 75 )}
  76. 76 </div>
  77. 77 </div>
  78. 78 );
  79. 79 // other tools:
  80. 80 case 'tool-getWeatherInformation':
  81. 81 if (part.state === 'output-available') {
  82. 82 return (
  83. 83 <div
  84. 84 key={part.toolCallId}
  85. 85 className="flex flex-col gap-2 p-4 bg-blue-400 rounded-lg"
  86. 86 >
  87. 87 <div className="flex flex-row justify-between items-center">
  88. 88 <div className="text-4xl text-blue-50 font-medium">
  89. 89 {part.output.value}°
  90. 90 {part.output.unit === 'celsius' ? 'C' : 'F'}
  91. 91 </div>
  92. 92 <div className="h-9 w-9 bg-amber-400 rounded-full flex-shrink-0" />
  93. 93 </div>
  94. 94 <div className="flex flex-row gap-2 text-blue-50 justify-between">
  95. 95 {part.output.weeklyForecast.map(forecast => (
  96. 96 <div
  97. 97 key={forecast.day}
  98. 98 className="flex flex-col items-center"
  99. 99 >
  100. 100 <div className="text-xs">{forecast.day}</div>
  101. 101 <div>{forecast.value}°</div>
  102. 102 </div>
  103. 103 ))}
  104. 104 </div>
  105. 105 </div>
  106. 106 );
  107. 107 }
  108. 108 break;
  109. 109 case 'tool-getLocation':
  110. 110 if (part.state === 'output-available') {
  111. 111 return (
  112. 112 <div
  113. 113 key={part.toolCallId}
  114. 114 className="text-gray-500 bg-gray-100 rounded-lg p-4"
  115. 115 >
  116. 116 User is in {part.output}.
  117. 117 </div>
  118. 118 );
  119. 119 } else {
  120. 120 return (
  121. 121 <div key={part.toolCallId} className="text-gray-500">
  122. 122 Calling getLocation...
  123. 123 </div>
  124. 124 );
  125. 125 }
  126. 126 default:
  127. 127 break;
  128. 128 }
  129. 129 })}
  130. 130 </div>
  131. 131 ))}
  132. 132 <form
  133. 133 onSubmit={e => {
  134. 134 e.preventDefault();
  135. 135 sendMessage({ text: input });
  136. 136 setInput('');
  137. 137 }}
  138. 138 >
  139. 139 <input
  140. 140 className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
  141. 141 value={input}
  142. 142 placeholder="Say something..."
  143. 143 onChange={e => setInput(e.currentTarget.value)}
  144. 144 />
  145. 145 </form>
  146. 146 </div>
  147. 147 );
  148. 148}

Server

import {

type InferUITools,

type ToolSet,

type UIDataTypes,

type UIMessage,

convertToModelMessages,

stepCountIs,

streamText,

tool,

} from 'ai-toolkit';

import { z } from 'zod';

const tools = {

getWeatherInformation: tool({

description: 'show the weather in a given city to the user',

inputSchema: z.object({ city: z.string() }),

execute: async ({}: { city: string }) => {

return {

value: 24,

unit: 'celsius',

weeklyForecast: [

{ day: 'Monday', value: 24 },

{ day: 'Tuesday', value: 25 },

{ day: 'Wednesday', value: 26 },

{ day: 'Thursday', value: 27 },

{ day: 'Friday', value: 28 },

{ day: 'Saturday', value: 29 },

{ day: 'Sunday', value: 30 },

],

};

},

}),

// client-side tool that starts user interaction:

askForConfirmation: tool({

description: 'Ask the user for confirmation.',

inputSchema: z.object({

message: z.string().describe('The message to ask for confirmation.'),

}),

}),

// client-side tool that is automatically executed on the client:

getLocation: tool({

description:

'Get the user location. Always ask for confirmation before using this tool.',

inputSchema: z.object({}),

}),

} satisfies ToolSet;

export type ChatTools = InferUITools<typeof tools>;

export type ChatMessage = UIMessage<never, UIDataTypes, ChatTools>;

export async function POST(request: Request) {

const { messages }: { messages: ChatMessage[] } = await request.json();

const result = streamText({

model: 'openai/gpt-4.1',

messages: await convertToModelMessages(messages),

tools,

stopWhen: stepCountIs(5),

});

return result.toUIMessageStreamResponse();

}

api/chat.ts
tsx
  1. 1import {
  2. 2 type InferUITools,
  3. 3 type ToolSet,
  4. 4 type UIDataTypes,
  5. 5 type UIMessage,
  6. 6 convertToModelMessages,
  7. 7 stepCountIs,
  8. 8 streamText,
  9. 9 tool,
  10. 10} from 'ai-toolkit';
  11. 11import { z } from 'zod';
  12. 12const tools = {
  13. 13 getWeatherInformation: tool({
  14. 14 description: 'show the weather in a given city to the user',
  15. 15 inputSchema: z.object({ city: z.string() }),
  16. 16 execute: async ({}: { city: string }) => {
  17. 17 return {
  18. 18 value: 24,
  19. 19 unit: 'celsius',
  20. 20 weeklyForecast: [
  21. 21 { day: 'Monday', value: 24 },
  22. 22 { day: 'Tuesday', value: 25 },
  23. 23 { day: 'Wednesday', value: 26 },
  24. 24 { day: 'Thursday', value: 27 },
  25. 25 { day: 'Friday', value: 28 },
  26. 26 { day: 'Saturday', value: 29 },
  27. 27 { day: 'Sunday', value: 30 },
  28. 28 ],
  29. 29 };
  30. 30 },
  31. 31 }),
  32. 32 // client-side tool that starts user interaction:
  33. 33 askForConfirmation: tool({
  34. 34 description: 'Ask the user for confirmation.',
  35. 35 inputSchema: z.object({
  36. 36 message: z.string().describe('The message to ask for confirmation.'),
  37. 37 }),
  38. 38 }),
  39. 39 // client-side tool that is automatically executed on the client:
  40. 40 getLocation: tool({
  41. 41 description:
  42. 42 'Get the user location. Always ask for confirmation before using this tool.',
  43. 43 inputSchema: z.object({}),
  44. 44 }),
  45. 45} satisfies ToolSet;
  46. 46export type ChatTools = InferUITools<typeof tools>;
  47. 47export type ChatMessage = UIMessage<never, UIDataTypes, ChatTools>;
  48. 48export async function POST(request: Request) {
  49. 49 const { messages }: { messages: ChatMessage[] } = await request.json();
  50. 50 const result = streamText({
  51. 51 model: 'openai/gpt-4.1',
  52. 52 messages: await convertToModelMessages(messages),
  53. 53 tools,
  54. 54 stopWhen: stepCountIs(5),
  55. 55 });
  56. 56 return result.toUIMessageStreamResponse();
  57. 57}
Browse all recipes