Stream 接入案例：Vue 2

Vue 2 使用 StreamMixin 接入单次流式生成能力。状态和方法都挂在 this.stream 上。

vue

<template>
  <div>
    <textarea v-model="inputValue" placeholder="输入内容..." />

    <div>状态：{{ stream.assistantStatus }}</div>
    <div v-if="stream.error" class="error">{{ stream.error.message }}</div>

    <button v-if="stream.status === 'loading'" @click="stream.stop()">停止</button>
    <button v-else :disabled="!inputValue.trim()" @click="handleGenerate">生成</button>

    <div class="result">
      <template v-for="(part, index) in stream.parts">
        <div v-if="part.type === 'reasoning'" :key="part.id || index" class="reasoning">
          {{ part.reason }}
        </div>
        <p v-else-if="part.type === 'text'" :key="part.id || index">
          {{ part.text }}
        </p>
        <div v-else-if="part.type === 'tool_call'" :key="part.id" class="tool-call">
          工具：{{ part.name }}，状态：{{ part.status }}
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { StreamMixin } from '@tencent/ssv-ai-sdk-vue2';
import { AGUIPlugin } from '@tencent/ssv-ai-sdk-plugin-agui';

export default {
  mixins: [
    StreamMixin({
      api: {
        streamEndpoint: {
          url: 'https://your-api.com/stream',
        },
      },
      mode: 'stream',
      plugins: [new AGUIPlugin()],
    }),
  ],

  data() {
    return {
      inputValue: '',
    };
  },

  methods: {
    async handleGenerate() {
      if (!this.inputValue.trim() || this.stream.status === 'loading') return;

      const ts = Date.now();
      await this.stream.generate({
        input: this.inputValue,
        metadata: {
          threadId: `thread-${ts}`,
          runId: `run-${ts}`,
        },
      });

      this.inputValue = '';
    },
  },
};
</script>

状态 / 方法速查

// 状态
this.stream.parts
this.stream.status
this.stream.assistantStatus
this.stream.error

// 方法
this.stream.generate(params)
this.stream.stop()
this.stream.setOptions(options)
this.stream.on(event, handler)
this.stream.off(event, handler)

Stream 接入案例：Vue 2 #

状态 / 方法速查 #

Stream 接入案例：Vue 2

状态 / 方法速查