logoAnt Design X

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

useXAgent

Used for model scheduling with Agent hooks.
Importimport { useXAgent } from "@ant-design/x";
Sourcecomponents/use-x-agent
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

Connect with the backend model to provide an abstract data flow.

Examples

API

tsx
type useXAgent<Message> = (config: XAgentConfigPreset | XAgentConfigCustom<Message>) => [Agent];

XAgentConfigPreset

Use preset protocol for request, protocol is not implemented yet.

PropertyDescriptionTypeDefaultVersion
baseURLRequest for server addressstring-
keyRequest keystring-
modelPreset protocol modelstring-
dangerouslyApiKey🔥 dangerouslyApiKey presents security risks. Detailed documentation on this can be found in Explanationstring--

XAgentConfigCustom

Custom request protocol.

PropertyDescriptionTypeDefaultVersion
requestConfig custom request, support streaming updateRequestFn

RequestFn

For more properties, see XStreamOptions.

tsx
interface RequestFnInfo<Message> extends AnyObject {
messages?: Message[];
message?: Message;
}
type RequestFn<Message, Input, Output> = (
info: RequestFnInfo<Message, Input>,
callbacks: {
onUpdate: (chunk: Output) => void;
onSuccess: (chunks: Output[]) => void;
onError: (error: Error) => void;
onStream?: (abortController: AbortController) => void;
},
transformStream?: XStreamOptions<Message>['transformStream'],
) => void;

Agent

PropertyDescriptionTypeVersion
requestCall the configured request of useXAgent,moreRequestFn
isRequestingCheck if it is requesting() => boolean
Preset Request

We will use XRequest as the default request, and only need to configure baseURL and model.

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

Customize the menu RequestParams, can send request to intelligent agents, etc.

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

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, transform stream, abort stream.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Control XRequestOptions

Control change XRequestOptions,dynamically modify configuration items such as baseURL, model, and API key.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Agent Request Log
Status-
Update Times0
Agent Request Log
Status-
Update Times0
    Agent Request Logrequest
    Status-
    Update Times0

    baseURL: https://api.example.com/chat/v1

    model: gpt-3.5-turbo

    dangerouslyApiKey: Bearer sk-your-dangerouslyApiKey

    Agent Request Log
    Status-
    Update Times0