Ask me

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.
Import
import{ useXChat }from"@ant-design/x";
Sourcecomponents/use-x-chat
Docs
Edit this pageChangelog

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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
loading

When To Use

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

Examples

API

API

type useXChat<AgentMessage, ParsedMessage = AgentMessage> = (
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-

XChatConfigReturnType

PropertyDescriptionTypeVersion
messagesCurrent managed messages contentAgentMessages[]
parsedMessagesParsed messages by parser apiParsedMessages[]
onRequestCreate a message and trigger a request(message) => void
setMessagesModify messages directly without triggering requests(messages: { message, status }[]) => void
Basic

Basic usage.

codepen icon
External Link Icon
expand codeexpand code
Streaming

Update content with stream output.

codepen icon
External Link Icon
expand codeexpand code
Interrupt the output

Interrupt the ongoing streaming output.

codepen icon
External Link Icon
expand codeexpand code
Multiple Suggestion

Return multiple recommended contents by customizing the ability.

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