logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

useXChat

Work with agent hook for data management.
Importimport { useXChat } from "@ant-design/x";
Sourcecomponents/use-x-chat
Docs
Edit this pageChangelog

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

When To Use

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

Examples

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--
Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Streaming

Update content with stream output.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Multiple Suggestion

Return multiple recommended contents by customizing the ability.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Model Access

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

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