logoAnt Design X

useXChat

Work with agent hook for data management.
Importimport { useXChat } from "@ant-design/x";

When To Use

Use Agent to manage conversation data and produce data for page rendering.

Examples

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Update content with stream output.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hello, what can I do for you?

Return multiple recommended contents by customizing the ability.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Access to cloud service platform,can send messages, process data, abort stream.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

tsx
type useXChat<
AgentMessage,
ParsedMessage = AgentMessage,
Input = RequestParams<AgentMessage>,
Output = SSEOutput,
> = (config: XChatConfig<AgentMessage, ParsedMessage>) => XChatConfigReturnType;

XChatConfig

PropertyDescriptionTypeDefaultVersion
agentagent parameter is required when using the onRequest method in an agent generated by useXAgent.XAgent--
defaultMessagesdefault messages{ status, message }[]--
parserConvert AgentMessage to ParsedMessage for consumption. If not set, AgentMessage will be consumed directly. Supports converting one AgentMessage to multiple ParsedMessages(message: AgentMessage) => BubbleMessage | BubbleMessage[]--
requestFallbackFallback when request fails, not provided will not be displayedAgentMessage | () => AgentMessage--
requestPlaceholderShow the placeholder information when requesting, not provided will not be displayedAgentMessage | () => AgentMessage--
transformMessageThe messages can be converted when updating data, and will also be updated to messages(info: {originMessage?: AgentMessage,chunk: Output,chunks: Output[],status: MessageStatus}) => AgentMessage--

XChatConfigReturnType

PropertyDescriptionTypeDefaultVersion
messagesCurrent managed messages contentAgentMessages[]--
parsedMessagesParsed messages by parser apiParsedMessages[]--
onRequestCreate a message and trigger a request, If there is no data with key as message, the entire data will be processed as a message(requestParams: AgentMessage | RequestParams) => void--
setMessagesModify messages directly without triggering requests(messages: { message, status }[]) => void--

RequestParams

Extends XRequestParams.

PropertyDescriptionTypeDefaultVersion
messageCurrent message contentAgentMessage--