@assistant-ui/vue

给助手的装订 在Vue 和 Nuxt 中流出 AI 聊天的提供者、 可调合器和未风格的原始设备,运行时间与运行时间相同 @assistant-ui/react。 。 。 .

安装

需要 Vue 3.5 或更新.

npm install @assistant-ui/vue @assistant-ui/ai-sdk ai react

@assistant-ui/ai-sdk 连接 AI SDK 软件它在共享运行时间运行AI SDK的聊天状态,所以它需要 react 安装, 即使 React 却一无所获.

使用量

<!-- app/components/Assistant.client.vue -->
<script setup lang="ts">
import {
  AuiConfig,
  AuiProvider,
  ComposerPrimitiveInput,
  ComposerPrimitiveSend,
  MessagePrimitiveParts,
  ThreadPrimitiveMessages,
  ThreadPrimitiveViewport,
} from "@assistant-ui/vue";
import { AISDKChat } from "@assistant-ui/ai-sdk";

const config = AuiConfig({ threads: AISDKChat() });
</script>

<template>
  <AuiProvider :config="config">
    <ThreadPrimitiveViewport class="h-dvh overflow-y-auto">
      <ThreadPrimitiveMessages>
        <MessagePrimitiveParts />
      </ThreadPrimitiveMessages>
    </ThreadPrimitiveViewport>
    <ComposerPrimitiveInput placeholder="Message..." />
    <ComposerPrimitiveSend>Send</ComposerPrimitiveSend>
  </AuiProvider>
</template>

AISDKChat() 员额 /api/chat,返回的路径 streamText(...).toUIMessageStreamResponse()。仅将提供者客户端挂载为 .client.vue 在 Nuxt 中的组件: Vue 的服务器渲染器从不处理效果范围,所以在服务器上提供的提供者会保留每个请求一次运行时间.

样式化的组件(线程、消息、推理、工具呼叫、线程列表)从助理用户注册处安装 快速启动 穿过它们.

API 密码

• AuiProvider 拥有从一个 AuiConfig· ; AuiIf 在状态选择器返回时使其槽变为真实.
• useAui() 返回一个稳定的客户端,其范围访问器会解决提供者当前客户端的问题. useAuiState(selector) 返回选定切片更改时的更新. useAuiEvent(event, callback) 订阅当前效果范围的寿命 .
• 原始覆盖线条( E)ThreadPrimitiveRoot, (中文(简体) ), Messages, (中文(简体) ), Viewport, (中文(简体) ), ViewportFooter, (中文(简体) ), ScrollToBottom, (中文(简体) ), Suggestions),信息(MessagePrimitiveRoot, (中文(简体) ), Parts, (中文(简体) ), Attachments),作曲家(ComposerPrimitiveInput, (中文(简体) ), Send, (中文(简体) ), Cancel, (中文(简体) ), Attachments, (中文(简体) ), AddAttachment, (中文(简体) ), AttachmentDropzone),附件,分支拾取器,动作栏,建议,出错,思维链,以及线程列表,每个线程列表以全名导出,例如: ThreadPrimitiveMessages。 。 。 .
• 通过已注册的 Vue 组件提供工具调用 Tools({ toolkit }) 或者说 aui.tools.setToolUI,获得单笔 tool 道具类型 ToolUIProps; 与 React app 共享的工具包中的回放渲染器不会在Vue中渲染出.

没有AI SDK

运行一个不需要反应的运行时间, 例如安装在 RuntimeAdapter 从 @assistant-ui/core/store,别名 react 改为 @assistant-ui/tap/standalone-shim 因此共享运行时代码解析而不安装 React :

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      "react/compiler-runtime": "@assistant-ui/tap/standalone-shim/compiler-runtime",
      react: "@assistant-ui/tap/standalone-shim",
    },
  },
});

文档

• 开始
• 快速启动
• 运行时间
• 服务器渲染
• 工具用户界面

其他平台

• 有反应的 Web : @assistant-ui/react
• 原生反应 : @assistant-ui/react-native
• 终端 : @assistant-ui/react-ink