logoAnt Design X

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

XRequest

Importimport { XRequest } from "@ant-design/x";
Sourcecomponents/x-request
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

  • Initiate a fetch request to LLMs that comply with OpenAI standards.

Examples

API

XRequestOptions

PropertyDescriptionTypeDefaultVersion
baseURLBase URL for the API requeststring--
modelModel name, e.g., 'gpt-3.5-turbo'string--
dangerouslyApiKey🔥 dangerouslyApiKey presents security risks. Detailed documentation on this can be found in Explanationstring--
fetchOptional custom fetch function for making requestsfetch--

XRequestFunction

ts
type XRequestFunction<Input = Record<PropertyKey, any>, Output = Record<string, string>> = (
params: XRequestParams & Input,
callbacks: XRequestCallbacks<Output>,
transformStream?: XStreamOptions<Output>['transformStream'],
) => Promise<void>;

XRequestParams

PropertyDescriptionTypeDefaultVersion
modelThe model to be used for generating responses.string--
messagesAn array of message objects, each containing a role and content.Record<PropertyKey, any>[]--
streamIndicates whether to use streaming for the response.booleanfalse-

XRequestCallbacks

PropertyDescriptionTypeDefaultVersion
onSuccessCallback for successful(chunks: Output[]) => void--
onErrorCallback for error handling(error: Error) => void--
onUpdateCallback for message updates(chunk: Output) => void--
onStreamCallback for stream controller(abortController: AbortController) => void--
transformStreamOptional transform function for processing stream dataXStreamOptions<Output>['transformStream']--
Basic

This example illustrates how to use XRequest to initiate a fetch request to LLMs that comply with OpenAI standards. Please copy the code and replace BASE_URL, PATH, MODEL, and API_KEY with actual values in the DEV environment to use it.

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 Transformer

Configure a custom transformStream for XRequest. The following example demonstrates how to handle application/x-ndjson data format.

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
Model Access

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Request Log
Status-
Update Times0
Request Log
Status-
Update Times0
Mock Custom Protocol - Log

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

model: gpt-3.5-turbo

dangerouslyApiKey: Bearer sk-your-dangerouslyApiKey

Request Log
Status-
Update Times0
Request Logrequest undefined
Status-
Update Times0