logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Data Flow
    • useXChatConversation Data
    • useXConversationsConversation Management
    • Chat ProviderData Provider
  • Utilities
    • XRequestRequest
    • XStreamStream

useXChat
Conversation Data

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;

XChatConfig

PropertyDescriptionTypeDefaultVersion
providerData 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 DocumentationAbstractChatProvider<ChatMessage, Input, Output>--
defaultMessagesDefault display messages{ message: ChatMessage, status: MessageStatus }[]--
parserConverts ChatMessage into ParsedMessage for consumption. When not set, ChatMessage is consumed directly. Supports converting one ChatMessage into multiple ParsedMessages(message: ChatMessage) => BubbleMessage | BubbleMessage[]--
requestFallbackFallback message for failed requests. When not provided, no message will be displayedChatMessage | () => ChatMessage--
requestPlaceholderPlaceholder message during requests. When not provided, no message will be displayedChatMessage | () => ChatMessage--

XChatConfigReturnType

PropertyDescriptionTypeDefaultVersion
abortCancel request() => void--
isRequestingWhether a request is in progressboolean--
messagesCurrent managed message list contentMessageInfo<ChatMessage>[]--
parsedMessagesContent translated through parserMessageInfo<ParsedMessages>[]--
onReloadRegenerate, will send request to backend and update the message with new returned data(id: string | number, requestParams: Partial<Input>, opts: { extra: AnyObject }) => void--
onRequestAdd a Message and trigger request(requestParams: Partial<Input>, opts: { extra: AnyObject }) => void--
setMessagesDirectly modify messages without triggering requests(messages: Partial<MessageInfo<ChatMessage>>[]) => void--
setMessageDirectly modify a single message without triggering requests(id: string | number, info: Partial<MessageInfo<ChatMessage>>) => 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';
Model Integration

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Thinking Model Integration

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Historical Messages Setup

You can use defaultMessages to set historical messages.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
System Prompt Setup

You can use defaultMessages to set system prompts.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Request

Custom request configuration (not recommended, please use the default built-in request).

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Request with openai-node

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Current status: No messages yet, please enter a question and send
Current status: No messages yet, please enter a question and send
Current status:Q&A completed
Hello!
Current status:Q&A completed
Current system prompt: You are a helpful chatbot
Hello!