useCompletion

useCompletion(options): UseCompletionReturn

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

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

This hook wraps the core useCompletion hook with Next.js-specific defaults. It automatically configures the API route to /api/completion and uses Server-Sent Events (SSE) streaming, making it ideal for text completion use cases like autocomplete, text generation, and inline suggestions.

Parameters

options

UseNextCompletionOptions = {}

Configuration options extending core useCompletion options

Returns

UseCompletionReturn

Completion state and handlers including completion text, input, and submit

Example

'use client';

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

export function CompletionComponent() {
  const {
    completion,
    input,
    handleInputChange,
    handleSubmit,
    isLoading
  } = useCompletion({
    onFinish: (prompt, completion) => {
      console.log('Completed:', { prompt, completion });
    }
  });

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={input}
        onChange={handleInputChange}
        placeholder="Enter prompt..."
      />
      <button type="submit" disabled={isLoading}>Generate</button>
      <div className="completion">{completion}</div>
    </form>
  );
}