OpenAI
OpenAI
- Ant Design X
- Changelogv2.1.0
- Model Integration
- Agent Integration
- Basic Usage
- Advanced Usage
- Migration
- Other
Ant Design XThis guide introduces how to integrate OpenAI model services into applications built with Ant Design X. For details, see X SDK.
Using URL to integrate Model is a basic capability provided by X SDK. For details, see X SDK.
Usually, openai-node is used in the node environment. If you use it in the browser, you need to enable dangerouslyAllowBrowser.
Note:
dangerouslyAllowBrowserhas security risks. See the official openai-node documentation for details.
import { Bubble, BubbleListProps, Sender } from '@ant-design/x';import {AbstractXRequestClass,OpenAIChatProvider,SSEFields,useXChat,XModelMessage,XModelParams,XRequestOptions,} from '@ant-design/x-sdk';import { Flex } from 'antd';import OpenAI from 'openai';import React, { useState } from 'react';type OutputType = Partial<Record<SSEFields, any>>;type InputType = XModelParams;class OpenAiRequest<Input extends InputType = InputType,Output extends OutputType = OutputType,> extends AbstractXRequestClass<Input, Output> {client: any;stream: OpenAI | undefined;_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(): boolean {return this._isTimeout;}get isStreamTimeout(): boolean {return this._isStreamTimeout;}get isRequesting(): boolean {return this._isRequesting;}get manual(): boolean {return true;}async run(input: Input): Promise<void> {const { callbacks } = this.options;try {await this.client.responses.create({model: 'gpt-4o',input: input?.messages?.[0]?.content || '',stream: true,});// Please implement stream data update logic based on response} catch (error: any) {callbacks?.onError(error);}}abort(): void {// Please implement abort based on OpenAI}}const provider = new OpenAIChatProvider<XModelMessage, InputType, OutputType>({request: new OpenAiRequest('OPENAI', {}),});const Demo: React.FC = () => {const [content, setContent] = useState('');const { onRequest, messages, requesting, abort } = useXChat({provider,requestPlaceholder: () => {return {content: 'loading...',role: 'assistant',};},requestFallback: (_, { error }) => {if (error.name === 'AbortError') {return {content: 'Request is aborted',role: 'assistant',};}return {content: error?.toString(),role: 'assistant',};},});const items = messages.map(({ message, id }) => ({key: id,...message,}));const role: BubbleListProps['role'] = {assistant: {placement: 'start',},user: { placement: 'end' },};return (<Flexverticaljustify="space-between"style={{height: 400,padding: 16,}}><Bubble.List role={role} items={items} /><Sendervalue={content}onChange={setContent}loading={requesting}onCancel={abort}onSubmit={(val) => {onRequest({messages: [{ role: 'user', content: val }],});setContent('');}}/></Flex>);};export default Demo;
Use OpenAIChatProvider to integrate models with OpenAI data format, enabling message sending, data processing, and message termination.
When using SDKs (such as openai-node, @openrouter/ai-sdk-provider) to request models or agents, you need to use the built-in Provider to handle data and customize the Request. Please refer to this example. Note: This example only demonstrates the logic for integrating openai using X SDK as a reference, and does not process model data. You need to fill in the correct apiKey for data debugging.
