@ assistant-ui/ vite (英语)

助理的 Vite 插件 "use generative" 指令——一个文件 聚合一个工具的策略, 它只使用服务器 execute,且仅限客户端 render。使用简单的Vite应用程序和 TanStack 启动。 。 。 .

使用量

// vite.config.ts
import { defineConfig } from "vite";
import { aui } from "@assistant-ui/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [aui(), tanstackStart(), viteReact()],
});

aui() 套装 enforce: "pre"因此它运行之前 @vitejs/plugin-react 减少联署材料X——列入 plugins 数组无关紧要.

如何运作

Vite 创建您的应用程序一次 环境插件的 transform 分支 打开 this.environment.config.consumer数字 :

• 客户端 环境 – 客户端构建:保留 render 和任何 "use client" 前端 execute后端 execute。 。 。 .
• 服务器 环境( TanStack Start ) ssr,其中聊天路线和 服务器函数活 ) — 服务器构建: 保留后端 execute,滴数 render。 。 。 .

不需要外观或方向调整(不同于Next.js/Turbopack加载器)—— Environment API直接给插件一个可靠的每个构建信号.

与 Next.js 集成不同的是,服务器构建是 没有 注入 import "server-only": 警卫依靠 react-server 出口条件, 一个 TanStack 启动 ssr 建筑不设. 分裂已经是结构性的—— 客户端构建中从不包含 execute 躯体.

撰写

从 @assistant-ui/react数字 :

"use generative";
import { defineToolkit, humanTool } from "@assistant-ui/react";
import { z } from "zod";

export default defineToolkit({
  get_weather: {
    parameters: z.object({ city: z.string() }),
    execute: async ({ city }) => fetchWeather(city), // server-only
    render: ({ result }) => <Weather {...result} />, // client-only
  },
});

将汇编的工具包注册到 Tools({ toolkit }) 客户端和您的 服务器工具在服务器上的运行器——两者都导入同一份文件.