AI-SDK Companion UI Components

Description

@polyv/live-watch-ai-ui is a Polyv live streaming AI UI component library, based on Vue 2.x, providing ready-to-use component sets. It includes the following features:

• AI Chat Assistant: Complete AI conversation interface supporting streaming responses, message lists, and voice input
• Smart Outline: AI-powered analysis of playback videos with mind map display
• Subtitle Transcript: AI-generated subtitle content with timeline click-to-jump support
• Interactive Quiz: Display of interactive questions in playback videos
• Digital Human Support: AI digital human video preview and playback

For custom modifications, you can use Polyv's companion UI open-source project for secondary development.

Installation

npm install @polyv/live-watch-ai-ui
# 或
yarn add @polyv/live-watch-ai-ui
# 或
pnpm add @polyv/live-watch-ai-ui

Peer Dependencies

The following peer dependencies need to be installed:

npm install vue@^2.7.16 @polyv/live-watch-ai-sdk

Quick Start

1. Global Configuration Injection

Inject global configuration in the root component of your application:

import Vue from 'vue';
import { useAIGlobalProvider } from '@polyv/live-watch-ai-ui';
import { PolyvWatchAICore } from '@polyv/live-watch-ai-sdk';

// 初始化 SDK
const aiCore = new PolyvWatchAICore({
  lang: 'zh_CN',
  domainInfo: {
    polyvWatchApiDomain: 'https://watch-api.polyv.cn',
  },
  getViewerToken: async () => ({ viewerToken: 'your-token' }),
  getChatToken: async () => ({ chatToken: 'your-token' }),
  getChannelInfo: async () => ({ channelId: 'your-channel-id' }),
  getUserInfo: async () => ({ userId: 'user-123', nick: '用户', pic: '' }),
});

// 全局注入
useAIGlobalProvider({
  globalLang: 'zh_CN', // 语言
  theme: 'dark', // 主题：'dark' | 'light'
  isMobile: () => /mobile/i.test(navigator.userAgent), // 移动端检测
  getWatchAICore: () => aiCore, // SDK 实例
});

2. Using the AI Chat Assistant

<template>
  <ai-assistant-chat
    :channel-id="channelId"
    :show-digital-human="true"
  />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { AiAssistantChat } from '@polyv/live-watch-ai-ui';

@Component({
  components: { AiAssistantChat },
})
export default class YourComponent extends Vue {
  channelId = 'your-channel-id';
}
</script>

3. Using the AI Aggregated Feature Panel

<template>
  <ai-aggregate-feature-panel
    :channel-id="channelId"
    :show-outline="true"
    :show-subtitle="true"
    :show-question="true"
    :current-time="currentTime"
    @seek-video="onSeekVideo"
  />
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { AiAggregateFeaturePanel } from '@polyv/live-watch-ai-ui';

@Component({
  components: { AiAggregateFeaturePanel },
})
export default class YourComponent extends Vue {
  @Prop({ type: String, required: true }) channelId!: string;
  @Prop({ type: Number, default: 0 }) currentTime!: number;

  onSeekVideo(time: number) {
    // 跳转视频到指定时间
    console.log('跳转视频到:', time, '秒');
  }
}
</script>

More Features

For more features and changelogs, please refer to Polyv's AI-SDK companion UI open-source project