Ant Design X

type useXChat<
  ChatMessage extends SimpleType = object,
  ParsedMessage extends SimpleType = ChatMessage,
  Input = RequestParams<ChatMessage>,
  Output = SSEOutput,
> = (config: XChatConfig<ChatMessage, ParsedMessage, Input, Output>) => XChatConfigReturnType;

Property	Description	Type	Default	Version
ChatMessage	Message data type, defines the structure of chat messages	object	object	-
ParsedMessage	Parsed message type, message format for component consumption	ChatMessage	ChatMessage	-
Input	Request parameter type, defines the structure of request parameters	RequestParams<ChatMessage>	RequestParams<ChatMessage>	-
Output	Response data type, defines the format of received response data	SSEOutput	SSEOutput	-

XChatConfig

Property	Description	Type	Default	Version
provider	Data provider used to convert data and requests of different structures into formats that useXChat can consume. The platform includes built-in `DefaultChatProvider` and `OpenAIChatProvider`, and you can also implement your own Provider by inheriting `AbstractChatProvider`. See: Chat Provider Documentation	AbstractChatProvider<ChatMessage, Input, Output>	-	-
conversationKey	Session unique identifier (globally unique), used to distinguish different sessions	string	Symbol('ConversationKey')	-
defaultMessages	Default display messages	DefaultMessagesType[] \| (info: { conversationKey?: string }) => DefaultMessagesType[] \| (info: { conversationKey?: string }) => Promise<DefaultMessagesType[]>	-	-
parser	Converts ChatMessage into ParsedMessage for consumption. When not set, ChatMessage is consumed directly. Supports converting one ChatMessage into multiple ParsedMessages	(message: ChatMessage) => BubbleMessage \| BubbleMessage[]	-	-
requestFallback	Fallback message for failed requests. When not provided, no message will be displayed	ChatMessage \| (requestParams: Partial<Input>,info: { error: Error;errorInfo: any; messages: ChatMessage[], message: ChatMessage }) => ChatMessage\|Promise<ChatMessage>	-	-
requestPlaceholder	Placeholder message during requests. When not provided, no message will be displayed	ChatMessage \| (requestParams: Partial<Input>, info: { messages: Message[] }) => ChatMessage \| Promise<Message>	-	-

DefaultMessagesType

ts

type DefaultMessagesType = {
  id: string | number;
  message: ChatMessage;
  status: MessageStatus;
};

XChatConfigReturnType

Property	Description	Type	Default	Version
abort	Cancel request	() => void	-	-
isRequesting	Whether a request is in progress	boolean	-	-
isDefaultMessagesRequesting	Whether the default message list is requesting	boolean	false	2.2.0
messages	Current managed message list content	MessageInfo<ChatMessage>[]	-	-
parsedMessages	Content translated through `parser`	MessageInfo<ParsedMessages>[]	-	-
onReload	Regenerate, will send request to backend and update the message with new returned data	(id: string \| number, requestParams: Partial<Input>, opts: { extra: AnyObject }) => void	-	-
onRequest	Add a Message and trigger request	(requestParams: Partial<Input>, opts: { extra: AnyObject }) => void	-	-
setMessages	Directly modify messages without triggering requests	(messages: Partial<MessageInfo<ChatMessage>>[]) => void	-	-
setMessage	Directly modify a single message without triggering requests	(id: string \| number, info: Partial<MessageInfo<ChatMessage>>) => void	-	-
removeMessage	Deleting a single message will not trigger a request	(id: string \| number) => void	-	-

MessageInfo

ts

interface MessageInfo<ChatMessage> {
  id: number | string;
  message: ChatMessage;
  status: MessageStatus;
  extra?: AnyObject;
}

MessageStatus

ts

type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';

When to Use

Manage conversation data through Agent and produce data for page rendering.

Code Examples

API

useXChat

tsx

type useXChat<
  ChatMessage extends SimpleType = object,
  ParsedMessage extends SimpleType = ChatMessage,
  Input = RequestParams<ChatMessage>,
  Output = SSEOutput,
> = (config: XChatConfig<ChatMessage, ParsedMessage, Input, Output>) => XChatConfigReturnType;

Property	Description	Type	Default	Version
ChatMessage	Message data type, defines the structure of chat messages	object	object	-
ParsedMessage	Parsed message type, message format for component consumption	ChatMessage	ChatMessage	-
Input	Request parameter type, defines the structure of request parameters	RequestParams<ChatMessage>	RequestParams<ChatMessage>	-
Output	Response data type, defines the format of received response data	SSEOutput	SSEOutput	-

XChatConfig

Property	Description	Type	Default	Version
provider	Data provider used to convert data and requests of different structures into formats that useXChat can consume. The platform includes built-in `DefaultChatProvider` and `OpenAIChatProvider`, and you can also implement your own Provider by inheriting `AbstractChatProvider`. See: Chat Provider Documentation	AbstractChatProvider<ChatMessage, Input, Output>	-	-
conversationKey	Session unique identifier (globally unique), used to distinguish different sessions	string	Symbol('ConversationKey')	-
defaultMessages	Default display messages	DefaultMessagesType[] \| (info: { conversationKey?: string }) => DefaultMessagesType[] \| (info: { conversationKey?: string }) => Promise<DefaultMessagesType[]>	-	-
parser	Converts ChatMessage into ParsedMessage for consumption. When not set, ChatMessage is consumed directly. Supports converting one ChatMessage into multiple ParsedMessages	(message: ChatMessage) => BubbleMessage \| BubbleMessage[]	-	-
requestFallback	Fallback message for failed requests. When not provided, no message will be displayed	ChatMessage \| (requestParams: Partial<Input>,info: { error: Error;errorInfo: any; messages: ChatMessage[], message: ChatMessage }) => ChatMessage\|Promise<ChatMessage>	-	-
requestPlaceholder	Placeholder message during requests. When not provided, no message will be displayed	ChatMessage \| (requestParams: Partial<Input>, info: { messages: Message[] }) => ChatMessage \| Promise<Message>	-	-

DefaultMessagesType

ts

type DefaultMessagesType = {
  id: string | number;
  message: ChatMessage;
  status: MessageStatus;
};

XChatConfigReturnType

Property	Description	Type	Default	Version
abort	Cancel request	() => void	-	-
isRequesting	Whether a request is in progress	boolean	-	-
isDefaultMessagesRequesting	Whether the default message list is requesting	boolean	false	2.2.0
messages	Current managed message list content	MessageInfo<ChatMessage>[]	-	-
parsedMessages	Content translated through `parser`	MessageInfo<ParsedMessages>[]	-	-
onReload	Regenerate, will send request to backend and update the message with new returned data	(id: string \| number, requestParams: Partial<Input>, opts: { extra: AnyObject }) => void	-	-
onRequest	Add a Message and trigger request	(requestParams: Partial<Input>, opts: { extra: AnyObject }) => void	-	-
setMessages	Directly modify messages without triggering requests	(messages: Partial<MessageInfo<ChatMessage>>[]) => void	-	-
setMessage	Directly modify a single message without triggering requests	(id: string \| number, info: Partial<MessageInfo<ChatMessage>>) => void	-	-
removeMessage	Deleting a single message will not trigger a request	(id: string \| number) => void	-	-

MessageInfo

ts

interface MessageInfo<ChatMessage> {
  id: number | string;
  message: ChatMessage;
  status: MessageStatus;
  extra?: AnyObject;
}

MessageStatus

ts

type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';

OpenAI Model Integration

Use OpenAIChatProvider to integrate models with OpenAI data format, enabling message sending, data processing, and message termination.

Thinking Model Integration

Use DeepSeekChatProvider to integrate thinking models, enabling message sending, data processing, and message termination.

Historical Messages Setup

You can use defaultMessages to set historical messages.

Request Remote Historical Messages

Set defaultMessages as an asynchronous method to load historical messages during initialization.

System Prompt Setup

You can use defaultMessages to set system prompts.

Custom XRequest.fetch

Custom XRequest.fetch.

Custom request

When using SDKs (such as openai-node, @openrouter/ai-sdk-provider) to request models or agents, you need to use the built-in Provider to handle data and customize the Request. Please refer to this example. Note: This example only demonstrates the logic for integrating openai using X SDK as a reference, and does not process model data. You need to fill in the correct apiKey for data debugging.

OpenAI Model Integration

Use OpenAIChatProvider to integrate models with OpenAI data format, enabling message sending, data processing, and message termination.

Thinking Model Integration

Use DeepSeekChatProvider to integrate thinking models, enabling message sending, data processing, and message termination.

Historical Messages Setup

You can use defaultMessages to set historical messages.

Request Remote Historical Messages

Set defaultMessages as an asynchronous method to load historical messages during initialization.

System Prompt Setup

You can use defaultMessages to set system prompts.

Custom XRequest.fetch

Custom XRequest.fetch.

Custom request

When using SDKs (such as openai-node, @openrouter/ai-sdk-provider) to request models or agents, you need to use the built-in Provider to handle data and customize the Request. Please refer to this example. Note: This example only demonstrates the logic for integrating openai using X SDK as a reference, and does not process model data. You need to fill in the correct apiKey for data debugging.

Current status: No messages yet, please enter a question and send

Current status:No messages yet, please enter a question and send

Current status: No messages yet, please enter a question and send

Current system prompt: None

useXChatConversation Data

useXChatConversation Data

When to Use

Code Examples

API

useXChat

XChatConfig

DefaultMessagesType

XChatConfigReturnType

MessageInfo

MessageStatus

When to Use

Code Examples

API

useXChat

XChatConfig

DefaultMessagesType

XChatConfigReturnType

MessageInfo

MessageStatus

useXChat
Conversation Data

useXChat
Conversation Data