Ant Design X 对接阿里云百炼DashScope API-优快云博客

最近我在使用阿里云百炼平台开发智能体，打算基于 Ant Design X 库 搭建一个简易的对话 Demo。antd/x 内置了 DeepSeek、OpenAI 的兼容方案，同属阿里产品，竟然没有内置 DashScope 的适配。

调用阿里云百炼的大模型可以用 OpenAI 兼容模式，但智能体只有 DashScope API。看网上也没有相关内容，问了 AI 也没能解决问题（可能这个库比较新，AI 没学过）。

本文以调用智能体流式增量输出为例，仅列出做适配的核心代码，页面渲染、会话管理等还请自行查阅文档。

1. 自定义 ChatProvider，适配 DashScope API

实现抽象类 AbstractChatProvider 的三大核心方法

transformParams：实现请求参数的结构化整合，兼容全局配置与单次请求参数
transformLocalMessage：转换为本地消息，用于消息渲染
transformMessage：流式响应数据的增量解析与格式转换

class DashScopeProvider extends AbstractChatProvider {
  /**
   * 转换onRequest传入的参数，将Provider实例化时request配置中的params进行合并
   * @param requestParams 请求参数
   * @param options 请求配置，从Provider实例化时request配置中来
   */
  transformParams(requestParams, options) {
    return {
      ...(options?.params || {}),
      ...requestParams,
      input: {messages: this.getMessages()}  // 携带所有消息
    }
  }

  /**
   * 将onRequest传入的参数转换为本地（用户发送）的ChatMessage，用于消息渲染
   * @param requestParams onRequest传入的参数
   */
  transformLocalMessage(requestParams) {
    return requestParams.input?.messages || [];
  }

  /**
   * 处理流式增量输出，自动更新到messages
   * @param info
   */
  transformMessage(info = {}) {
    const {originMessage, chunk} = info;

    if (!chunk || !chunk?.data) {
      return {
        content: originMessage?.content || '',
        role: 'assistant',
      }
    }

    const chunkJson = JSON.parse(chunk.data);
    // 提取流式增量文本
    const chunkContent = chunkJson?.output?.text || '';
    const content = originMessage?.content || '';

    // 返回转换后的消息
    return {
      content: content + chunkContent,
      role: 'assistant',
    };
  }
}

2. DashScope 服务配置初始化

实例化自定义 Provider，具体配置项查阅 DashScope API 自行修改。下面以智能体应用调用为例，代码如下：

// 初始化 Provider：配置请求参数
const [provider] = React.useState(
    new DashScopeProvider({
      request: XRequest(BASE_URL, {  // URL可通过反向代理访问，避免暴露APP ID
        manual: true,
        headers: {
          'Authorization': `Bearer ${DASHSCOPE_TOKEN}`,  // 认证token，不要暴露在生产环境
          'X-DashScope-SSE': 'enable',
          'Content-Type': 'application/json'
        },
        params: {
          // "model": "qwen-plus",  // 如果是调用模型而不是智能体，在此指定模型
          parameters: {'incremental_output': 'true'},  // 增量输出
        }
      }),
    })
);

3. 在 useXChat 中使用自定义 Provider

将上述初始化的 Provider 传入 useXChat ，通过返回的方法实现聊天交互逻辑，useXChat其他返回值参考antd/x文档：

const {onRequest, messages, isRequesting, abort} = useXChat({
  provider,
  requestFallback: (_, {error}) => {
    if (error.name === 'AbortError') {
      return {content: '请求已取消', role: 'assistant'};
    }
    return {content: '请求失败，请重试！', role: 'assistant'};
  },
  requestPlaceholder: () => ({content: '正在思考...', role: 'assistant'}),
});

4. 发起大模型请求

经过上述的代码配置，请求会自动带上历史消息，直接传入要发送的新消息即可，如下调用useXChat 返回的 onRequest 方法：

onRequest({
  input: {
    messages: [{role: 'user', content: nextContent.trim()}]
  }
})