logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Ant Design X of React
  • Changelog
    v1.4.0
  • Basic Usage
    • Usage with create-react-app
    • Usage with Vite
    • Usage with Next.js
    • Usage with Umi
    • Usage with Rsbuild
  • Model Integration
    • OpenAI
      Updated
    • Qwen
      Updated
    • Others
  • Other
    • Contributing
    • dangerouslyApiKey Explanation
    • FAQ

OpenAI

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

This guide will explain how to integrate OpenAI's model service into an application built using Ant Design X.

Using OpenAI API

This is equivalent to integrating with a model inference service compatible with OpenAI. For reference, see Model Integration - Qwen.

Using openai-node

Typically, openai-node is used in a Node environment. If used in a browser environment, the dangerouslyAllowBrowser option must be enabled.

Note: dangerouslyAllowBrowser poses a security risk. For more details, refer to the official documentation.

tsx
import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';
import OpenAI from 'openai';
import React from 'react';


const client = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'],
  dangerouslyAllowBrowser: true,
});


const Demo: React.FC = () => {
  const [agent] = useXAgent({
    request: async (info, callbacks) => {
      const { messages, message } = info;


      const { onSuccess, onUpdate, onError } = callbacks;


      // current message
      console.log('message', message);


      // history messages
      console.log('messages', messages);


      let content: string = '';


      try {
        const stream = await client.chat.completions.create({
          model: 'gpt-4o',
          // if chat context is needed, modify the array
          messages: [{ role: 'user', content: message }],
          // stream mode
          stream: true,
        });


        for await (const chunk of stream) {
          content += chunk.choices[0]?.delta?.content || '';


          onUpdate(content);
        }


        onSuccess(content);
      } catch (error) {
        // handle error
        // onError();
      }
    },
  });


  const {
    // use to send message
    onRequest,
    // use to render messages
    messages,
  } = useXChat({ agent });


  const items = messages.map(({ message, id }) => ({
    // key is required, used to identify the message
    key: id,
    content: message,
  }));


  return (
    <div>
      <Bubble.List items={items} />
      <Sender onSubmit={onRequest} />
    </div>
  );
};


export default Demo;