useChat Hook

'use client';

import { useChat } from 'ai/react';

export default function ChatPage() {
  const {
    messages,          // Message[]
    input,             // Current input value
    handleInputChange, // Input onChange handler
    handleSubmit,      // Form onSubmit handler
    isLoading,         // Is AI responding?
    stop,              // Stop generation
    reload,            // Regenerate last response
    error,             // Error object
  } = useChat();

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map(m => (
          <div key={m.id} className={`message ${m.role}`}>
            <strong>{m.role === 'user' ? 'You' : 'AI'}:</strong>
            <p>{m.content}</p>
          </div>
        ))}
      </div>

      {error && <div className="error">{error.message}</div>}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
          disabled={isLoading}
        />
        {isLoading
          ? <button type="button" onClick={stop}>Stop</button>
          : <button type="submit">Send</button>
        }
      </form>

      {messages.length > 0 && (
        <button onClick={() => reload()}>Regenerate</button>
      )}
    </div>
  );
}

const { messages, ... } = useChat({
  api: '/api/chat',                // Custom endpoint
  id: 'my-chat',                   // Unique chat ID
  initialMessages: [],              // Pre-loaded messages
  body: { model: 'gpt-4o' },       // Extra body params
  headers: { 'X-API-Key': key },   // Custom headers
  onFinish: (message) => {          // Called when done
    console.log('Complete:', message);
  },
  onError: (error) => {             // Error handler
    console.error(error);
  },
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    system: 'You are a helpful coding assistant. Respond concisely.',
    messages,
    maxTokens: 1000,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

import ReactMarkdown from 'react-markdown';

{messages.map(m => (
  <div key={m.id}>
    {m.role === 'assistant' ? (
      <ReactMarkdown>{m.content}</ReactMarkdown>
    ) : (
      <p>{m.content}</p>
    )}
  </div>
))}