ui hooks - usechat

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useChat hook import and basic usage

The useChat hook is imported from @ai-sdk/react. It is called with a configuration object containing a transport property, which is set to a new DefaultChatTransport instance. The DefaultChatTransport is imported from 'ai' and takes a configuration object with an api property specifying the endpoint URL (e.g., '/api/chat'). The useChat hook returns an object with messages and sendMessage properties.

useChat sendMessage method signature

The sendMessage method accepts an object with a parts property, which is an array of message parts. Each part has a type property (e.g., 'text') and a text property containing the message content.

useChat messages structure

The messages array returned from useChat contains message objects. Each message has an id property and a parts property which is an array of message parts. Each part has a type property (such as 'text') and for text parts, a text property containing the content.

DefaultChatTransport configuration

DefaultChatTransport is imported from 'ai' and configured with an api property that specifies the endpoint URL where the chat messages will be sent.

UIMessage type definition

UIMessage is a type imported from 'ai' representing messages in UI format. These messages can be converted to model messages using convertToModelMessages.

useChat hook with multimodal parts array

The useChat hook's sendMessage function accepts a message object with a role and parts array. The parts array can contain objects of type 'text' with a text property, or type 'file' with mediaType and url properties for images. Example: sendMessage({ role: 'user', parts: [{ type: 'file' as const, mediaType: 'image/png', url: imageUrl }, { type: 'text' as const, text: input }] })

Message parts structure for images in useChat

When sending an image with text to useChat, the message parts array can include a file part with properties: type set to 'file', mediaType set to the MIME type (e.g., 'image/png'), and url set to the image URL. Text parts have type 'text' and a text property.

Rendering multimodal message parts in useChat

Messages from useChat contain a parts array. When rendering, iterate through parts and switch on part.type: for 'text' type parts, access the text property; for 'file' type parts, render as an image using the url property and optionally the filename property for the alt attribute.

Conditional image inclusion in message parts

When building a message parts array, image parts should be conditionally included based on whether an image URL is provided. Use spread syntax with a ternary operator: ...(imageUrl.trim().length > 0 ? [{ type: 'file', mediaType: 'image/png', url: imageUrl }] : []) to add the image part only when needed.

useChat hook basic interface

useChat is a React hook that returns an object with messages (array of chat messages) and sendMessage (function to send messages). It manages the chat state and handles communication with a streaming endpoint.

useChat message structure with parts

Messages from useChat contain an id, role, and parts array. Parts can have different types including 'text' (containing a text property) and tool result types like 'tool-extractGoal' (containing the full tool result object).

useUIState hook manages client-side UI state

useUIState is a hook imported from '@ai-sdk/rsc' that manages the conversation UI state on the client. It returns a tuple with the current conversation array and a setConversation function to update it. The conversation array contains ClientMessage objects with id, role ('user' or 'assistant'), and display (ReactNode) properties.

Give your agent this brain