OpenAI

This guide describes how to connect OpenAI (or a service compatible with Chat Completions) in an Ant Design X Vue application. For a more complete description of Provider / useXChat, see X SDK, Chat Provider, OpenAIChatProvider. For custom protocols, see Custom Chat Provider.

Vue uses createOpenAIChatProvider (or new OpenAIChatProvider({ request })) to connect the model, and does not need the useXAgent of React.

Integrate with X SDK

Using URL + createOpenAIChatProvider to connect Chat Completions is the basic capability of X SDK. By default, an XRequest with manual: true will be created, then handed over to OpenAIChatProvider, and finally useXChat will be used to drive bubbles and sending.

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: '' },
});

The bare token will be written as Authorization: Bearer <token>. Values ​​already starting with Bearer, Basic or Tbox- are left intact. key is equivalent to dangerouslyApiKey. You can also use new OpenAIChatProvider({ request: XRequest(baseURL, { manual: true, ... }) }) to set your own request.

The document example uses mock fetch. The page will not carry the real key and will not access the external network.

Example

Example

createOpenAIChatProvider plus a local OpenAI SSE mock: send, stream, and cancel.

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

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

const input = ref('');
const provider = createOpenAIChatProvider<XModelMessage>({
  baseURL: 'https://api.openai.com/v1/chat/completions',
  model: 'gpt-4o-mini',
  key: 'docs-preview',
  fetch: createMockOpenAIFetch(),
});

const { onRequest, messages, isRequesting, abort } = useXChat<XModelMessage>({
  provider,
  requestPlaceholder: { role: 'assistant', content: '' },
  requestFallback: (_, { error }) => {
    if ((error as Error)?.name === 'AbortError') {
      return { role: 'assistant', content: 'Request is aborted' };
    }
    return { 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} />,
        },
      }}
    />
    <Sender
      value={input.value}
      loading={isRequesting.value}
      placeholder="Ask the local OpenAI 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>

Hide source

Use openai-node

Usually openai (openai-node) is used for Node environment. If you use it directly in the browser, you need to enable dangerouslyAllowBrowser.

Note: dangerouslyAllowBrowser has security risks. The official documentation of openai-node has detailed description. Do not enter the API Key into the front-end package, give priority to the back-end proxy.

When the SDK (such as openai-node, @openrouter/ai-sdk-provider) sends a request by itself, it needs to customize AbstractXRequestClass and then hand it over to OpenAIChatProvider for message conversion. The following is the Vue writing method with the same structure as the React guide (instructions: run / abort needs to be filled with streaming callbacks according to the real response).

import {
  AbstractXRequestClass,
  OpenAIChatProvider,
  type SSEFields,
  type XModelMessage,
  type XModelParams,
  type XRequestOptions,
} from 'ant-design-x-vue';
import OpenAI from 'openai';

type OutputType = Partial<Record<SSEFields, any>>;
type InputType = XModelParams;

class OpenAiRequest<
  Input extends InputType = InputType,
  Output extends OutputType = OutputType,
> extends AbstractXRequestClass<Input, Output> {
  client: OpenAI;
  _isTimeout = false;
  _isStreamTimeout = false;
  _isRequesting = false;

  constructor(baseURL: string, options: XRequestOptions<Input, Output>) {
    super(baseURL, options);
    this.client = new OpenAI({
      apiKey: 'OPENAI_API_KEY',
      dangerouslyAllowBrowser: true,
    });
  }

  get asyncHandler(): Promise<any> {
    return Promise.resolve();
  }

  get isTimeout() {
    return this._isTimeout;
  }

  get isStreamTimeout() {
    return this._isStreamTimeout;
  }

  get isRequesting() {
    return this._isRequesting;
  }

  get manual() {
    return true;
  }

  async run(input?: Input) {
    const { callbacks } = this.options;
    try {
      this._isRequesting = true;
      await this.client.responses.create({
        model: 'gpt-4o',
        input: input?.messages?.[0]?.content || '',
        stream: true,
      });
      // 请基于 response 实现流数据更新：回调 onUpdate / onSuccess
      // Please implement stream updates via onUpdate / onSuccess
    } catch (error: any) {
      callbacks?.onError(error);
    } finally {
      this._isRequesting = false;
    }
  }

  abort() {
    // 请基于 openai 实现 abort
    // Please implement abort based on OpenAI
  }
}

const provider = new OpenAIChatProvider<XModelMessage, InputType, OutputType>({
  request: new OpenAiRequest('OPENAI', {}),
});

// 在组件里：useXChat({ provider }) + Bubble.List / Sender

The following runnable example does not rely on the real openai package and key: use the same AbstractXRequestClass shell to mock the streaming chunk in the browser to demonstrate the connection method of "custom Request + OpenAIChatProvider". For real projects, just replace run / abort with openai-node (or other SDK).

Example

Example

Custom AbstractXRequestClass (local mock, no public network or real key). Use a real SDK behind a proxy in production.

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

import { computed, ref } from 'vue';
import {
  Bubble,
  OpenAIChatProvider,
  Sender,
  useXChat,
  type XModelMessage,
} from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { MockOpenAINodeRequest } from '../_shared/mock-openai-node-request';

const input = ref('');
const provider = new OpenAIChatProvider<XModelMessage>({
  request: new MockOpenAINodeRequest('OPENAI', {}, (text) =>
    `Local openai-node style mock for **${text.trim() || 'hello'}**.\n\nSwap MockOpenAINodeRequest for a real AbstractXRequestClass wrapping openai.`,
  ),
});

const { onRequest, messages, isRequesting, abort } = useXChat<XModelMessage>({
  provider,
  requestPlaceholder: { role: 'assistant', content: 'loading...' },
  requestFallback: (_, { error }) => {
    if ((error as Error)?.name === 'AbortError') {
      return { role: 'assistant', content: 'Request is aborted' };
    }
    return { role: 'assistant', content: String(error) };
  },
});

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} />,
        },
      }}
    />
    <Sender
      value={input.value}
      loading={isRequesting.value}
      placeholder="Custom AbstractXRequestClass (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 }] });
      }}
      onCancel={() => abort()}
    />
  </Flex>
));
</script>

Hide source