`useCompletion()`
useCompletion()
애플리케이션에 텍스트 완성 기반 기능을 만들 수 있게 해줘요. AI 제공자로부터 텍스트 완성 스트리밍을 지원하고, 채팅 입력 상태를 관리하며, 새 메시지가 도착하면 UI를 자동으로 업데이트해요.
출처: 문서
본문
가져오기
<Tabs items={['React', 'Svelte', 'Vue', 'Angular']}>
API 시그니처
타입 매개변수
<PropertiesTable content={[ { name: 'BODY', type: 'object', description: '훅 옵션이나 complete 함수를 통해 전달되는 추가 요청 본문의 타입이에요. 기본값은 object예요.', }, ]} />
매개변수
<PropertiesTable
content={[
{
name: 'api',
type: "string = '/api/completion'",
description:
'텍스트를 생성하기 위해 호출되는 API 엔드포인트예요. /로 시작하는 상대 경로 또는 절대 URL일 수 있어요.',
},
{
name: 'id',
type: 'string',
description:
'완성을 위한 고유 식별자예요. 제공하지 않으면 임의의 식별자가 생성돼요. 제공하면 동일한 id를 가진 useCompletion 훅이 컴포넌트 간에 상태를 공유해요. 여러 컴포넌트에서 동일한 채팅 스트림을 표시할 때 유용해요.',
},
{
name: 'initialInput',
type: 'string',
description: '초기 프롬프트 입력을 위한 선택적 문자열이에요.',
},
{
name: 'initialCompletion',
type: 'string',
description: '초기 완성 결과를 위한 선택적 문자열이에요.',
},
{
name: 'onFinish',
type: '(prompt: string, completion: string) => void',
description:
'완성 스트림이 종료될 때 호출되는 선택적 콜백 함수예요.',
},
{
name: 'onError',
type: '(error: Error) => void',
description:
'채팅 스트림에서 오류가 발생할 때 호출되는 선택적 콜백이에요.',
},
{
name: 'headers',
type: 'Record<string, string> | Headers',
description:
'API 엔드포인트에 전달할 선택적 헤더 객체예요.',
},
{
name: 'body',
type: 'BODY',
description:
'API 엔드포인트에 전달할 선택적 추가 본문 객체예요.',
},
{
name: 'credentials',
type: "'omit' | 'same-origin' | 'include'",
description:
'요청에 사용할 자격 증명 모드를 설정하는 선택적 리터럴이에요. 기본값은 same-origin이에요.',
},
{
name: 'streamProtocol',
type: "'text' | 'data'",
isOptional: true,
description:
'사용할 스트림 유형을 설정하는 선택적 리터럴이에요. 기본값은 data예요. text로 설정하면 스트림이 텍스트 스트림으로 처리돼요. 두 프로토콜 모두에서 useCompletion은 completion 필드를 통해서만 텍스트 콘텐츠를 노출하고, 서버에서 전송되는 비텍스트 부분(예: data-* 부분)은 무시돼요. 해당 부분에 접근해야 한다면 useChat을 사용해요.',
},
{
name: 'fetch',
type: 'FetchFunction',
isOptional: true,
description:
'선택 사항이에요. API 호출에 사용할 커스텀 fetch 함수예요. 기본값은 전역 fetch 함수예요.',
},
{
name: 'throttle',
type: 'number',
isOptional: true,
description:
'React 전용이에요. 완성 및 데이터 업데이트를 위한 커스텀 스로틀 대기 시간(밀리초)이에요. 지정하면 스트리밍 중 UI가 업데이트되는 빈도를 조절해요. 기본값은 undefined이며, 이 경우 스로틀링이 비활성화돼요.',
},
]}
/>
반환 값
<PropertiesTable
content={[
{
name: 'completion',
type: 'string',
description: '현재 텍스트 완성 결과예요.',
},
{
name: 'complete',
type: '(prompt: string, options?: { headers?: Record<string, string> | Headers, body?: BODY }) => Promise<string | null | undefined>',
description:
'제공된 프롬프트를 기반으로 텍스트 완성을 실행하는 함수예요. 완료되면 완성 결과를 반환해요.',
},
{
name: 'error',
type: 'undefined | Error',
description: '완성 과정에서 발생한 오류예요. 없으면 undefined예요.',
},
{
name: 'setCompletion',
type: '(completion: string) => void',
description: 'completion 상태를 업데이트하는 함수예요.',
},
{
name: 'stop',
type: '() => void',
description: '현재 API 요청을 중단하는 함수예요.',
},
{
name: 'input',
type: 'string',
description: '입력 필드의 현재 값이에요.',
},
{
name: 'setInput',
type: 'React.Dispatch<React.SetStateActiononChange 이벤트에 대한 핸들러로, 입력 값을 제어해요.',
},
{
name: 'handleSubmit',
type: '(event?: { preventDefault?: () => void }) => void',
description:
'입력 필드를 자동으로 재설정하고 사용자 메시지를 추가하는 폼 제출 핸들러예요.',
},
{
name: 'isLoading',
type: 'boolean',
description:
'현재 fetch 작업이 진행 중인지 여부를 나타내는 불리언 플래그예요.',
},
]}
/>
탐색
- useChat
- useCompletion
- useObject
- experimental_useRealtime
- convertToModelMessages
- pruneMessages
- createUIMessageStream
- createUIMessageStreamResponse
- pipeUIMessageStreamToResponse
- readUIMessageStream
- InferUITools
- InferUITool
- experimental_MCPAppRenderer
- DirectChatTransport