space.vars.dashboard\_url.
* 要连接的角色 ID。
### 安装该包
React 绑定包含在 `@convai/web-sdk` 中，并从 `@convai/web-sdk/react` 子路径导入。没有单独的 React 包。
{% tabs %}
{% tab title="npm" %}
```bash
npm install @convai/web-sdk @convai/web-widget
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm add @convai/web-sdk @convai/web-widget
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn add @convai/web-sdk @convai/web-widget
```
{% endtab %}
{% endtabs %}
### 添加小部件
`useConvaiClient` 为该组件创建一个客户端并存储配置。 `ConvaiWidget` 渲染对话界面，并在有人首次选择其按钮时使用该已存储的配置进行连接，因此浏览器只会在用户操作之后请求麦克风权限。
{% code title="src/App.tsx" %}
```tsx
import { useConvaiClient } from '@convai/web-sdk/react';
import { ConvaiWidget } from '@convai/web-widget/react';
export default function App() {
const convaiClient = useConvaiClient({
apiKey: 'YOUR_API_KEY',
characterId: 'YOUR_CHARACTER_ID',
endUserId: 'user-123',
});
return | useConvaiClient hook 参考 该 hook 返回的所有内容，包括其仅限 React 的状态。 | useConvaiClient Hook 参考 |
| ConvaiWidget 组件参考 属性、默认值，以及小部件会代您执行的操作。 | ConvaiWidget 组件参考 |
| 在 React 中添加口型同步 在渲染循环中根据 blendshape 流驱动 3D 面部。 | 在 React 中添加口型同步 |
| 在 React 中构建自定义 UI 用您自己的消息和控件替换该小部件。 | 在 React 中构建自定义 UI |
| 在 React 中添加音频可视化器 使用 Web Audio API 绘制角色的声音级别。 | 在 React 中添加音频可视化器 |