Agent 接入案例：Vue 2 #

<template>
  <div :style="{ '--theme-color': themeColor }">
    <div class="messages">
      <div
        v-for="message in agent.messages"
        :key="message.id"
        :class="['message', message.role]"
      >
        <div v-if="message.role === 'user'">{{ message.content }}</div>

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

    <div>助手状态：{{ agent.assistantStatus }}</div>

    <input v-model="inputValue" placeholder="输入消息..." @keyup.enter="handleSend" />
    <button v-if="agent.status === 'loading'" @click="agent.stop()">停止</button>
    <button v-else @click="handleSend">发送</button>
  </div>
</template>

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

const UI_ONLY_TOOLS = ['launchRocket'];

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

  data() {
    return {
      inputValue: '',
      themeColor: '#1890ff',
    };
  },

  mounted() {
    this.agent.setTools(this.createTools());
    this.agent.on('toolExecuted', this.handleToolExecuted);
  },

  beforeDestroy() {
    this.agent.off('toolExecuted', this.handleToolExecuted);
  },

  methods: {
    async handleSend() {
      if (!this.inputValue.trim() || this.agent.status === 'loading') return;
      await this.agent.send({ input: this.inputValue });
      this.inputValue = '';
    },

    handleToolExecuted({ toolCallId, toolCallName, result }) {
      if (UI_ONLY_TOOLS.includes(toolCallName)) return;

      const toolMessage = {
        id: `tool-${Date.now()}`,
        role: 'tool',
        content: typeof result === 'string' ? result : JSON.stringify(result),
        toolCallId,
        extraInfo: {},
      };

      this.agent.setMessages([...this.agent.messages, toolMessage]);
      this.agent.send({}, { type: 'tools' });
    },

    createTools() {
      return [
        {
          name: 'setThemeColor',
          description: 'Set the page theme color. Use hex format like #1890ff.',
          type: 'frontend',
          parameters: {
            type: 'object',
            properties: {
              color: { type: 'string', description: 'Hex color' },
            },
            required: ['color'],
          },
          handler: async ({ color }) => {
            this.themeColor = color;
            return { success: true, color };
          },
        },
      ];
    },
  },
};
</script>