@qzsy/assistant-ui

assistant-ui 最新 base-nova 模板 + Shuangyuan AI SDK 适配层 — 安装包、配置 API Key，直接得到与 assistant-ui 官网 一致的深色聊天界面。

内置官方 registry 组件（thread / thread-list / threadlist-sidebar），Runtime 通过 ExternalStoreRuntime 对接 @qzsy/sdk（Thread / SSE 续流 / EndUser）。

安装

npm install @qzsy/sdk @qzsy/assistant-ui

一行初始化（推荐）

// App.tsx
import { ShuangyuanAssistant } from "@qzsy/assistant-ui";
import "@qzsy/assistant-ui/styles.css";

export default function App() {
  return (
    <div style={{ height: "100vh" }}>
      <ShuangyuanAssistant />
    </div>
  );
}

# .env（Vite）
VITE_SY_API_KEY=sy_你的项目Key
VITE_SY_BASE_URL=http://localhost:8081
VITE_SY_AGENT=default
VITE_SY_END_USER_ID=demo-user

createShuangyuanAssistant 工厂

适合自定义布局或多页面复用：

"use client";

import { createShuangyuanAssistant } from "@qzsy/assistant-ui";
import "@qzsy/assistant-ui/styles.css";

const sy = createShuangyuanAssistant({
  apiKey: process.env.NEXT_PUBLIC_SY_API_KEY!,
  baseUrl: process.env.NEXT_PUBLIC_SY_BASE_URL,
});

export default function ChatPage() {
  return <sy.App />; // 或 <sy.Provider>{children}</sy.Provider>
}

配置项

| Prop / 环境变量 | 说明 | |----------------|------| | apiKey / VITE_SY_API_KEY | 项目 API Key（sy_...）必填 | | baseUrl | SDK 后端地址，默认 http://localhost:8081 | | agent | Agent slug，默认 default | | endUserId | 终端用户隔离 ID |

导出

| 导出 | 用途 | |------|------| | ShuangyuanAssistant | 开箱即用整页（深色 sidebar + Thread） | | createShuangyuanAssistant() | 返回 { App, Provider, config } | | useShuangyuanRuntime() | 自定义布局时挂 Runtime | | createToolFallbackRouter() | 按 tool 名称注册自定义 Tool UI | | @qzsy/assistant-ui/styles.css | Tailwind + base-nova 主题样式 |

能力

• Thread 列表 / 新建 / 切换 / 搜索
• SSE 流式回复
• localStorage 续流（刷新无感恢复）
• EndUser 隔离
• 首条消息自动创建 Thread

本地示例

cd examples/basic-chat && npm install && npm run dev
# → http://localhost:5174

维护 UI 组件

包内 UI 来自官方 registry（npx assistant-ui add），位于 packages/assistant-ui/src/components/。升级时在该目录执行：

cd packages/assistant-ui
npx assistant-ui add thread thread-list threadlist-sidebar --overwrite
npm run build