logoAnt Design X

设计研发组件X MarkdownX SDK演示国内镜像
  • 介绍
  • 数据流
    • useXChat会话数据
    • useXConversations会话管理
  • 数据提供
    • Chat Provider数据提供
    • OpenAIChatProvider
    • DeepSeekChatProvider
    • Custom Chat Provider自定义
  • 工具
    • XRequest请求
    • XStream流

Chat Provider
数据提供

Chat Provider 用于为 useXChat 提供统一的请求管理和数据格式转换,目前内置了 OpenAI 和 DeepSeek 两种模型服务商的 Chat Provider,你可以直接使用。

如果内置的 Chat Provider 不满足使用可以通过实现抽象类 AbstractChatProvider (仅包含三个抽象方法),可以将不同的模型提供商、或者 Agentic 服务数据转换为统一的 useXChat 可消费的格式,从而实现不同模型、Agent之间的无缝接入和切换。

使用示例

Chat Provider 实例化需要传入一个 XRequest 调用,并且需要设置参数 manual=true,以便 useXChat 可以控制请求的发起。

tsx
import { DefaultChatProvider, useXChat, XRequest, XRequestOptions } from '@ant-design/x-sdk';
interface ChatInput {
query: string;
}
const [provider] = React.useState(
new DefaultChatProvider<string, ChatInput, string>({
request: XRequest('https://api.example.com/chat', {
manual: true,
}),
}),
);
const { onRequest, messages, isRequesting } = useXChat({
provider,
requestPlaceholder: 'Waiting...',
requestFallback: 'Mock failed return. Please try again later.',
});

DefaultChatProvider

DefaultChatProvider 是一个默认的 Chat Provider,几乎没有对数据进行转换,直接将请求参数和响应数据返回给 useXChat。它兼容了普通请求和stream请求(你需要做流拼接)的数据格式,你可以直接使用。

Messages Data

Is Requesting:false
Data Length:0
Data Details:
[]

Data Operations

Send Request
基本

DefaultChatProvider 配合 useXChat 进行数据操作。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
This is a historical response message, please send a new message.
This is a historical message
配合组件

配合 X 组件,实现消息和历史消息的展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code