Stream 接入案例：Vue 3 #

<script setup>
import { ref } from 'vue';
import { useStream } from '@tencent/ssv-ai-sdk-vue';
import { AGUIPlugin } from '@tencent/ssv-ai-sdk-plugin-agui';

const input = ref('');

const {
  parts,
  status,
  assistantStatus,
  error,
  generate,
  stop,
} = useStream({
  api: {
    streamEndpoint: {
      url: 'https://your-api.com/stream',
    },
  },
  mode: 'stream',
  plugins: [new AGUIPlugin()],
});

async function handleGenerate() {
  if (!input.value.trim() || status.value === 'loading') return;

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

  input.value = '';
}
</script>

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

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

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

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