Chat Provider

Provider 交给 useXChat，负责组请求参数和把 chunk 收成消息。构造时的 request 必须 manual: true，否则抛出 request must be manual。

createOpenAIChatProvider

这是 1.x useXAgent({ baseURL, model, dangerouslyApiKey | key }) 在 2.0 里的入口。React 2.0 删掉了 useXAgent，直接 new OpenAIChatProvider。Vue 保留那个预设形状，避免调用方再手写 header。

import { createOpenAIChatProvider, useXChat } from 'ant-design-x-vue';

const provider = createOpenAIChatProvider({
  baseURL: 'https://api.openai.com/v1/chat/completions',
  model: 'gpt-4o-mini',
  dangerouslyApiKey: 'YOUR_KEY',
});

const { onRequest, messages, isRequesting, abort } = useXChat({
  provider,
  requestPlaceholder: { role: 'assistant', content: '' },
});

裸 token 写成 Bearer <token>。已经以 Bearer 、Basic 或 Tbox- 开头的值不变。key 与 dangerouslyApiKey 等价。可选 fetch 用来换成 mock 或代理，文档示例用它，避免在页面里放真实密钥。

内置 Provider

类	行为
DefaultChatProvider	几乎不改请求和响应。`transformMessage` 直接把 chunk 当消息
OpenAIChatProvider	解析 Chat Completions 的 `choices[].delta.content` / `message.content`，遇到 `[DONE]` 结束
DeepSeekChatProvider	与 OpenAI 相同，并额外读取 `reasoning_content`

自定义协议时继承 AbstractChatProvider，实现：

transformParams(requestParams, options)
transformLocalMessage(requestParams)
transformMessage({ originMessage, chunk, chunks, status, responseHeaders })

React 的百宝箱示例就是这样接的。浏览器文档里没有 Node 版 Tbox SDK，见百宝箱样板间。

本地预设与示例

文档示例一律用 mock fetch，不放真实密钥。

OpenAI 预设

createOpenAIChatProvider 加一个 mock fetch。输入一句话就会按 OpenAI SSE 把回复流回来。

DefaultChatProvider

自定义 JSON fetch，几乎不改请求和响应形状。

OpenAIChatProvider

与上面预设同一条本地链路，展示气泡 + Sender。

DeepSeekChatProvider

额外读取 reasoning_content，Think 组件展示思考过程（本地 mock）。

<script setup lang="tsx">
defineOptions({ name: 'AXSdkXChatDeepSeekV2' });

import { computed, ref } from 'vue';
import {
  Bubble,
  Sender,
  Think,
  DeepSeekChatProvider,
  useXChat,
  XRequest,
  type XModelMessage,
  type XModelParams,
} from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { createMockDeepSeekFetch } from '../../_shared/mock-chat';

const input = ref('');
const provider = new DeepSeekChatProvider<XModelMessage, XModelParams>({
  request: XRequest('https://mock.local/v1/chat/completions', {
    manual: true,
    fetch: createMockDeepSeekFetch() as never,
    params: { stream: true, model: 'mock-deepseek' },
  }),
});

const { onRequest, messages, isRequesting, abort } = useXChat<XModelMessage>({
  provider,
  requestPlaceholder: { role: 'assistant', content: '' },
  requestFallback: { role: 'assistant', content: 'Mock request failed.' },
});

const items = computed(() =>
  messages.value.map((info) => ({
    key: info.id,
    role: info.message?.role === 'user' ? 'user' : 'ai',
    content: typeof info.message?.content === 'string' ? info.message.content : '',
    loading: info.status === 'loading' && !info.message?.content,
  })),
);

defineRender(() => (
  <Flex vertical gap={12} style={{ height: 420 }}>
    <Bubble.List
      style={{ height: 300 }}
      items={items.value}
      roles={{
        user: { placement: 'end' },
        ai: {
          placement: 'start',
          contentRender: (content: string) => (
            <XMarkdown content={content} components={{ think: Think }} />
          ),
        },
      }}
    />
    <Sender
      value={input.value}
      loading={isRequesting.value}
      placeholder="Ask the local DeepSeek mock"
      onUpdate:value={(v: string) => { input.value = v; }}
      onSubmit={() => {
        const query = input.value.trim();
        if (!query) return;
        input.value = '';
        onRequest({ messages: [{ role: 'user', content: query }], stream: true });
      }}
      onCancel={() => abort()}
    />
  </Flex>
));
</script>

Chat Provider ​

createOpenAIChatProvider ​

内置 Provider ​

本地预设与示例 ​

OpenAI 预设 ​

DefaultChatProvider ​

OpenAIChatProvider ​

DeepSeekChatProvider ​