useChat

useChat(options): UseChatReturn

Defined in: react-nextjs/src/client.ts:73

useChat hook optimized for Next.js with App Router support.

This hook wraps the core useChat hook with Next.js-specific defaults and conventions. It automatically configures the API route to /api/chat following Next.js conventions, and sets the stream protocol to ‘data’ (Server-Sent Events) which works seamlessly with Next.js App Router streaming responses.

Parameters

options

UseNextChatOptions = {}

Configuration options extending core useChat options with Next.js features

Returns

UseChatReturn

Chat state and handlers including messages, input, submit, and loading states

Example

'use client';

import { useChat } from 'ai.matey.react.nextjs';

export function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat', // Optional, defaults to this
    onError: (error) => console.error('Chat error:', error)
  });

  return (
    <form onSubmit={handleSubmit}>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <input
        value={input}
        onChange={handleInputChange}
        disabled={isLoading}
      />
      <button type="submit" disabled={isLoading}>Send</button>
    </form>
  );
}