`useChat()`

Allows you to easily create a conversational user interface for your chatbot application. It enables the streaming of chat messages from your AI provider, manages the state for chat input, and updates the UI automatically as new messages are received.

Import

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

API Signature

Parameters

api?:

string = '/api/chat'

id?:

string

initialInput?:

string = ''

initialMessages?:

Messages[] = []

onToolCall?:

({toolCall: ToolCall}) => void | unknown| Promise<unknown>

onResponse?:

(response: Response) => void

onFinish?:

(message: Message, options: OnFinishOptions) => void

OnFinishOptions

usage:

CompletionTokenUsage

promptTokens:

number

completionTokens:

number

totalTokens:

number

finishReason:

onError?:

(error: Error) => void

generateId?:

() => string

headers?:

Record<string, string> | Headers

body?:

any

credentials?:

'omit' | 'same-origin' | 'include'

sendExtraMessageFields?:

boolean

maxSteps?:

number

streamProtocol?:

'text' | 'data'

fetch?:

FetchFunction

experimental_prepareRequestBody?:

(options: { messages: UIMessage[]; requestData?: JSONValue; requestBody?: object, id: string }) => unknown

experimental_throttle?:

number

Returns

messages:

UIMessage[]

UIMessage

id:

string

role:

'system' | 'user' | 'assistant' | 'data'

createdAt?:

Date

content:

string

annotations?:

Array<JSONValue>

parts:

Array<TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | StepStartUIPart>

TextUIPart

type:

"text"

text:

string

ReasoningUIPart

type:

"reasoning"

reasoning:

string

ToolInvocationUIPart

type:

"tool-invocation"

toolInvocation:

ToolInvocation

state:

'partial-call'

toolCallId:

string

toolName:

string

args:

any

ToolInvocation

state:

'call'

toolCallId:

string

toolName:

string

args:

any

ToolInvocation

state:

'result'

toolCallId:

string

toolName:

string

args:

any

result:

any

SourceUIPart

type:

"source"

source:

Source

sourceType:

'url'

id:

string

url:

string

title?:

string

StepStartUIPart

type:

"step-start"

experimental_attachments?:

Array<Attachment>

Attachment

name?:

string

contentType?:

string

url:

string

error:

Error | undefined

append:

(message: Message | CreateMessage, options?: ChatRequestOptions) => Promise<string | undefined>

ChatRequestOptions

headers:

Record<string, string> | Headers

body:

object

data:

JSONValue

experimental_attachments?:

FileList | Array<Attachment>

FileList

Attachment

name?:

string

contentType?:

string

url:

string

reload:

(options?: ChatRequestOptions) => Promise<string | undefined>

ChatRequestOptions

headers:

Record<string, string> | Headers

body:

object

data:

JSONValue

stop:

() => void

experimental_resume:

() => void

setMessages:

(messages: Message[] | ((messages: Message[]) => Message[]) => void

input:

string

setInput:

React.Dispatch<React.SetStateAction<string>>

handleInputChange:

(event: any) => void

handleSubmit:

(event?: { preventDefault?: () => void }, options?: ChatRequestOptions) => void

ChatRequestOptions

headers:

Record<string, string> | Headers

body:

object

data:

JSONValue

allowEmptySubmit?:

boolean

experimental_attachments?:

FileList | Array<Attachment>

FileList

Attachment

name?:

string

contentType?:

string

url:

string

status:

"submitted" | "streaming" | "ready" | "error"

id:

string

data:

JSONValue[]

setData:

(data: JSONValue[] | undefined | ((data: JSONValue[] | undefined) => JSONValue[] | undefined)) => void

addToolResult:

({toolCallId: string; result: any;}) => void