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.
function useChat<Tools extends Chat.AnyTool >(
options: UseChatOptions <Tools>): UseChatResult <Tools>;
function useChat<Tools extends Chat.AnyTool>(
options: UseChatOptions<Tools>): UseChatResult<Tools>;@paramoptionsUseChatOptions<Tools>@typeToolsChat.AnyTool@returns {UseChatResult} An object containing chat state and functions to interact with the chat.
UseChatResult<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>
);
};