@bdky/aaas-pilot-kit-react-widget

@bdky/aaas-pilot-kit-react-widget

百度数字员工 AaaS Pilot Kit 的 React UI 组件库，开箱即用的数字员工 UI 组件，5 分钟搭建完整交互界面

安装

npm

npm install @bdky/aaas-pilot-kit-react-widget

yarn

yarn add @bdky/aaas-pilot-kit-react-widget

快速开始

import {
    PilotKit,
    Layout,
    ConversationList,
    Input,
    ControlPanel
} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';
import {type IOptions} from '@bdky/aaas-pilot-kit';

const options: IOptions = {
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    agentConfig: {
        token: 'xxxx',
        robotId: 'xxxx'
    }
};

function App() {
    return (
        <PilotKit options={options}>
            <Layout>
                <ConversationList />
                <Input />
                <ControlPanel />
            </Layout>
        </PilotKit>
    );
}

组件列表

组件	说明
PilotKit	主容器组件，包含 Provider 和数字人渲染区域
Layout	布局组件，支持横向/纵向自适应
ConversationList	对话列表组件，自动滚动到底部
Conversation	单条对话组件，支持流式渲染
Input	输入框组件，支持文本输入和语音输入切换
ControlPanel	控制面板，包含静音、挂断等按钮
Subtitle	字幕组件，实时显示 AI 回复
RecommendedQuestions	推荐问题组件
StartupScreen	启动屏幕，用于手动激活
LoadingOverlay	加载遮罩层
StatusOverlay	状态遮罩层
DebugPanel	调试面板（开发环境）

Hooks

Hook	说明
usePilotKitContext	获取 PilotKit 上下文
useLayout	获取布局上下文
useIsMobile	检测是否为移动端
useIsTablet	检测是否为平板
useIsDesktop	检测是否为桌面端
useResponsive	响应式断点 Hook

样式导入

// 方式 1: 直接导入 CSS
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

// 方式 2: 导入 CSS 变量（用于自定义主题）
import {styles} from '@bdky/aaas-pilot-kit-react-widget';

参考资料

• 核心库文档：@bdky/aaas-pilot-kit
• React 封装库：@bdky/aaas-pilot-kit-react

技术支持

如遇问题请联系：[e-mail]、[e-mail]