原生 TypeScript

使用 @convai/web-sdk 与原生 TypeScript 应用（无需 React 或任何框架）的完整指南。直接使用 ConvaiClient 类，连接事件，并构建你自己的 UI。

安装与快速开始（原生 TypeScript）

安装

npm install @convai/web-sdk

从原生入口导入：

import { ConvaiClient } from '@convai/web-sdk/vanilla';

---

快速入门

原生 API 仅暴露一个类， ConvaiClient，它负责处理连接、音频、视频和消息。

基础示例

import { ConvaiClient } from '@convai/web-sdk/vanilla';

async function main() {
  const client = new ConvaiClient();

  client.on('stateChange', (state) => {
    console.log('智能体状态：', state.agentState);
  });

  client.on('message', (message) => {
    console.log('消息：', message.content);
  });

  await client.connect({
    apiKey: '你的-api-key',
    characterId: 'your-character-id',
    endUserId: 'user-uuid', // 可选：启用记忆和分析
  });

  client.sendUserTextMessage('你好！');
}

main().catch(console.error);

---

可选的视频支持

await client.connect({
  apiKey: '你的-api-key',
  characterId: 'your-character-id',
  enableVideo: true,
  startWithVideoOn: false
});

---

关于 endUserId

• 提供它以启用 记忆, 会话连续性，以及 分析.
• 如果你想要无状态会话，请省略。

---

使用原生 Widget（可选）

如果你想在原生 TypeScript/JavaScript 中使用现成的 UI，可以使用这个 widget 辅助工具：

import {
  ConvaiClient,
  createConvaiWidget,
} from "@convai/web-sdk/vanilla";

const client = new ConvaiClient({
  apiKey: "your-api-key",
  characterId: "your-character-id",
});

const widget = createConvaiWidget(document.body, {
  convaiClient: client,
  showVideo: true,
  showScreenShare: true,
});

// 之后，在清理时：
widget.destroy();

原生 widget 的行为与 React widget 类似：

• 在用户首次交互时自动连接
• 管理音频采集和播放
• 如果已启用，可显示视频和屏幕共享控件