npm i @tencentcloud/call-uikit-react

// 1. 引入 TUICallKit
import { TUICallKit } from '@tencentcloud/call-uikit-react';

// 2. 如果您是 PC 端展示，请添加 style。初始化 TUICallKit 位置，如果是 H5 展示，则不需要
const callStyle: React.CSSProperties = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  zIndex: '999',
  transform: 'translate(-50%, -50%)',
};

// 3. 请在 UIKitProvider 中使用 TUICallKit 组件
return (
  <div style={{display: 'flex', height: '100vh'}}>
    <UIKitProvider language={"en-US"}>
      <TUICallKit style={callStyle} /> 
      <div style={{maxWidth: '400px'}}>
         <Profile />
         <ConversationList />
      </div>
      <Chat>
        <ChatHeader enableCall={true}/> 
        <MessageList />
        <MessageInput />
      </Chat>
      <ChatSetting />
    </UIKitProvider>
  </div>
);

 npm run start