@ssv-lab | @ssv-lab

概念

前端 SSV-AI-SDK，通过抽象业务形态，统一处理交互状态，数据流转与存储，统一流式协议解析，异步任务查询。主要目的就是快速支持业务搭建 AI 类的业务能力，达到可开箱即用的能力。

核心概念为以下几个点：

快速搭建 AI 业务，开发只需要关心数据状态。
支持跨端框架使用，可以在 React/Vue/小程序等多端复用。
充足的开放能力，可适配各类 LLM 协议返回。
内置标准流式协议解析，异步任务轮询模式。

image.2.png

快速使用

安装

通过 npm 进行安装，参照以下的命令

注意该 npm 包为 Coding Npm 的私有源，请先确定已经正确配置了 Coding Npm

ReactVue3Vue2微信小程序

bash

npm install @tencent/ssv-ai-sdk-react --save

bash

npm install @tencent/ssv-ai-sdk-vue --save

bash

npm install @tencent/ssv-ai-sdk-vue2 --save

bash

npm install @tencent/ssv-ai-sdk-miniprogram --save

接入使用 Chat 框架

ReactVue2Vue3微信小程序

jsx

import React from 'react';
import { useChat } from '@tencent/ssv-ai-sdk-react';
import { HunyuanPlugin } from '@tencent/ssv-ai-sdk-plugin-hunyuan';

function ChatComponent() {
  const {
    input,
    setInput,
    messages,
    assistantStatus,
    status,
    error,
    chat,
    stop,
  } = useChat({
    api: {
      chatEndpoint: 'your-sse-endpoint'
    },
    mode: 'stream',
    plugins: [new HunyuanPlugin()]
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'loading' || !input.trim()) return;
    await chat({ prompt: input });
  };

  return (
    <div className="chat-container">
      {/* 消息列表 */}
      <div className="messages">
        {messages.map((message) => (
          <div key={message.id} className={`message ${message.role}`}>
            {message.role}: {message.content}
          </div>
        ))}
      </div>

      {/* AI 状态显示 */}
      <div className="status">
        AI 状态: {assistantStatus}
      </div>

      {/* 输入表单 */}
      <form onSubmit={handleSubmit} className="input-form">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入消息..."
          disabled={status === 'loading'}
        />
        {status === 'loading' ? (
          <button type="button" onClick={stop}>停止</button>
        ) : (
          <button type="submit">发送</button>
        )}
      </form>
    </div>
  );
}

export default ChatComponent;

vue

<template>
  <div class="chat-container">
    <!-- 消息列表 -->
    <div class="messages">
      <div
        v-for="message in chat.messages"
        :key="message.id"
        :class="['message', message.role]"
      >
        {{ message.role }}: {{ message.content }}
      </div>
    </div>

    <!-- AI 状态显示 -->
    <div class="status">AI 状态: {{ chat.assistantStatus }}</div>

    <!-- 输入表单 -->
    <form @submit.prevent="handleSubmit" class="input-form">
      <input
        :value="chat.input"
        @input="(e) => ai.setInput(e.target.value)"
        placeholder="输入消息..."
        :disabled="chat.status === 'loading'"
      />
      <button v-if="chat.status === 'loading'" type="button" @click="ai.stop">
        停止
      </button>
      <button v-else type="submit">发送</button>
    </form>
  </div>
</template>

<script>
import { ChatMixin } from '@tencent/ssv-ai-sdk-vue2';
import { HunyuanPlugin } from '@tencent/ssv-ai-sdk-plugin-hunyuan';

export default {
  mixins: [
    ChatMixin({
      api: {
        chatEndpoint: 'your-sse-endpoint',
      },
      mode: 'stream',
      plugins: [new HunyuanPlugin()],
    }),
  ],

  methods: {
    async handleSubmit() {
      if (this.chat.status === 'loading' || !this.chat.input.trim()) return;
      await this.ai.chat({ prompt: this.chat.input });
    },
  },
};
</script>

vue

<script setup>
import { useChat } from '@tencent/ssv-ai-sdk-vue';
import { HunyuanPlugin } from '@tencent/ssv-ai-sdk-plugin-hunyuan';

const {
  messages,
  assistantStatus,
  status,
  chat,
  stop,
  input,
  handleInput,
} = useChat({
  api: {
    chatEndpoint: 'your-sse-endpoint',
  },
  mode: 'stream',
  plugins: [new HunyuanPlugin()],
});

// 发送消息
const handleSubmit = async () => {
  if (status.value === 'loading' || !input.value.trim()) return;
  await chat({ prompt: input.value });
};
</script>

<template>
  <div class="chat-container">
    <!-- 消息列表 -->
    <div class="messages">
      <div
        v-for="message in messages"
        :key="message.id"
        :class="['message', message.role]"
      >
        {{ message.role }}: {{ message.content }}
      </div>
    </div>

    <!-- AI 状态显示 -->
    <div class="status">
      AI 状态: {{ assistantStatus }}
    </div>

    <!-- 输入表单 -->
    <form @submit.prevent="handleSubmit" class="input-form">
      <input
        :value="input"
        @input="handleInput($event.target.value)"
        placeholder="输入消息..."
        :disabled="status === 'loading'"
      />
      <button v-if="status === 'loading'" type="button" @click="stop">
        停止
      </button>
      <button v-else type="submit">发送</button>
    </form>
  </div>
</template>

// WXML 模板示例:
/*
<view class="chat-container">
  <!-- 消息列表 -->
  <view class="messages">
    <block wx:for="{{chat.messages}}" wx:key="id">
      <view class="message {{item.role}}">
        {{item.role}}: {{item.content}}
      </view>
    </block>
  </view>
  
  <!-- AI 状态显示 -->
  <view class="status">
    AI 状态: {{chat.assistantStatus}}
  </view>
  
  <!-- 输入表单 -->
  <form bindsubmit="handleSubmit" class="input-form">
    <input 
      value="{{chat.input}}" 
      bindinput="handleInputChange"
      placeholder="输入消息..."
      disabled="{{chat.status === 'loading'}}"
    />
    <button wx:if="{{chat.status === 'loading'}}" bindtap="ai.stop">
      停止
    </button>
    <button wx:else form-type="submit">发送</button>
  </form>
</view>
*/


import { ChatBehavior } from '@tencent/ssv-ai-sdk-miniprogram';
import { HunyuanPlugin } from '@tencent/ssv-ai-sdk-plugin-hunyuan';

Component({
  behaviors: [
    ChatBehavior({
      api: {
        chatEndpoint: 'your-sse-endpoint'
      },
      mode: 'stream',
      plugins: [new HunyuanPlugin()]
    }),
  ],

  methods: {
    async handleSubmit() {
      if (this.data.chat.status === 'loading' || !this.data.chat.input.trim()) return;
      await this.ai.chat({ prompt: this.data.chat.input });
    },

    handleInputChange(e) {
      this.ai.setInput(e.detail.value);
    },
  },
});

概念 #

快速使用 #

安装 #

接入使用 Chat 框架 #

概念

快速使用

安装

接入使用 Chat 框架