useChat

useChat provides client-side chat state and streaming behavior. In the current API, a transport handles communication with the provider, while the component owns input state and calls sendMessage to submit user text.

useChat(options?)

Returns chat state and utility functions, including messages and sendMessage; the current API also supports callbacks and transport-based request configuration.

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

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();

  return (
    <form onSubmit={event => {
      event.preventDefault();
      sendMessage({ text: input });
      setInput('');
    }}>
      {messages.map(message => (
        <div key={message.id}>
          {message.parts.map((part, index) =>
            part.type === 'text' ? <span key={index}>{part.text}</span> : null
          )}
        </div>
      ))}
      <input value={input} onChange={event => setInput(event.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

Creates a streamed chat interface while keeping input state in the component.