This React hook creates a chat instance that can generate and render UI components. The result object contains functions and state enabling you to send and receive messages and monitor the state of the chat.
The useUiChat hook provides functionality for generating UI components through chat. This is particularly useful for: - Dynamic UI generation - Interactive chat interfaces - Component-based responses - Building chat-based UIs
useUiChat: <Tools extends Chat.AnyTool >(options: UiChatOptions <Tools>) => {
messages: UiChatMessage <Tools>[];
setComponents: React.Dispatch <React.SetStateAction <ExposedComponent <any>[]>>;
setMessages: (messages: Chat.Message <~UiChatSchema , Tools>[]) => void;
sendMessage: (message: Chat.Message <~UiChatSchema , Tools>) => void;
resendMessages: () => void;
reload: () => void;
error: Error | null;
isReceiving: boolean;
isSending: boolean;
isRunningToolCalls: boolean;
exhaustedRetries: boolean;
}
useUiChat: <Tools extends Chat.AnyTool>(options: UiChatOptions<Tools>) => {
messages: UiChatMessage<Tools>[];
setComponents: React.Dispatch<React.SetStateAction<ExposedComponent<any>[]>>;
setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
resendMessages: () => void;
reload: () => void;
error: Error | null;
isReceiving: boolean;
isSending: boolean;
isRunningToolCalls: boolean;
exhaustedRetries: boolean;
}@paramoptionsUiChatOptions<Tools>@typeToolsChat.AnyTool@returns {UseUiChatResult} An object containing chat state, functions to interact with the chat, and rendered UI components.
{
messages: UiChatMessage <Tools>[];
setComponents: React.Dispatch <React.SetStateAction <ExposedComponent <any>[]>>;
setMessages: (messages: Chat.Message <~UiChatSchema , Tools>[]) => void;
sendMessage: (message: Chat.Message <~UiChatSchema , Tools>) => void;
resendMessages: () => void;
reload: () => void;
error: Error | null;
isReceiving: boolean;
isSending: boolean;
isRunningToolCalls: boolean;
exhaustedRetries: boolean;
}
{
messages: UiChatMessage<Tools>[];
setComponents: React.Dispatch<React.SetStateAction<ExposedComponent<any>[]>>;
setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
resendMessages: () => void;
reload: () => void;
error: Error | null;
isReceiving: boolean;
isSending: boolean;
isRunningToolCalls: boolean;
exhaustedRetries: boolean;
}Examples
In this example, the LLM will respond with a UI component that can be rendered directly in your React application.
const { messages, sendMessage } = useUiChat({
model: 'gpt-4o',
system: 'You are a helpful assistant that can generate UI components.',
components: [
exposeComponent(Button, {
name: 'Button',
description: 'A clickable button component',
props: {
label: s.string('The text to display on the button'),
onClick: s.function('Function to call when clicked')
}
})
]
});