This React hook creates a chat instance used to interact with the LLM. The result object contains functions and state enabling you to send and recieve messages and monitor the state of the chat.
The useChat hook provides the most basic functionality for un-structured chats. Unstructured chats include things like general chats and natural language controls.
API
export declare function useChat<
Tools extends Chat.AnyTool ,
>(
options: UseChatOptions <Tools>,
): UseChatResult <Tools>;useChat
UseChatResult<Tools>@paramoptions:UseChatOptions<Tools>@typeToolsChat.AnyTool@returnsUseChatResult<Tools>Examples
This example demonstrates how to use the useChat hook to create a simple chat component.
const MyChatComponent = () => {
const { messages, sendMessage, status } = useChat({
model: 'gpt-4o',
system: 'You are a helpful assistant.',
tools: [],
});
const handleSendMessage = () => {
sendMessage({ role: 'user', content: 'Hello, how are you?' });
};
return (
<div>
<button onClick={handleSendMessage}>Send Message</button>
<div>Status: {status}</div>
<ul>
{messages.map((msg, index) => (
<li key={index}>{msg.content}</li>
))}
</ul>
</div>
);
};