@ assistant- ui/ ext
Next.js 助教的整合: withAui() 配置包装和
用于编辑器 "use generative" 指令。 粘合一个工具 计划, (中文(简体) ),
仅限服务器 execute,以及 只有客户端 render 在一个文件中; 编译器
每个建构目标都发出不同的模块,所以每一边只加载它所需要的.
见 SPEC.md 高频 完全设计.
为什么
"use client" 整个模块,所以它不能保持一个工具的 zod schema 可读
在保留服务器时 render 在客户端。 还有后端 execute
持有不可到达浏览器捆绑的密件( DB 手柄, API 密钥) .
"use generative" 将每个财产都引导到正确的地方.
每个工具 必须 声明 execute,然后将默认导出包入
defineToolkit({ ... }) (两者都强制执行——否则编译器出错). 你个
不要声明工具的种类: 编译器 推断 它从 execute 财务报告和审定财务报表
写入 type 字段返回输出.
你如何写作 execute | 类型 | 运行在哪里 |
|---|---|---|
execute 带有 "use client" 指令 | frontend | 客户端 |
execute (陈述) | backend | 服务器( e)server-only 警卫) |
execute: humanTool() | human | - (UI提供结果) |
一个平地 execute 默认情况下只为服务器 —— 您只能在浏览器中运行一个
选择与 "use client"所以秘密不能因为疏忽而泄露.
撰写
"use generative";
import { z } from "zod";
import { defineToolkit } from "@assistant-ui/react";
import { db } from "@/db"; // server-only
import { Chart } from "@/ui/chart"; // client-only
export default defineToolkit({
weather: {
description: "Show the weather for a city.",
parameters: z.object({ city: z.string() }),
execute: async ({ city }) => db.weather.get(city), // backend → stays on the server
render: (props) => <Chart data={props} />, // stays on the client
},
});
服务器构建保存 parameters + 键 execute (警卫员) import "server-only"标记 type: "backend")和下降数 render 财务报告和审定财务报表 @/ui/chart。 。 。 .
客户端构建保留 parameters + 键 render (单位:千美元) "use client")和下降数
execute 财务报告和审定财务报表 @/dbA级 frontend 工具标记其 execute 与 "use client"数字 :
execute: async ({ city }) => {
"use client";
return navigator.geolocation /* … runs in the browser, kept client-side */;
},
连接到 Next.js
包装你的配置。 探测器由 "use generative" 指令 - 有 没有
文件名公约;没有指令的模块通过未触及.
// next.config.ts
import { withAui } from "@assistant-ui/next";
export default withAui({
/* your Next config */
});
withAui 将装载器应用到您的 TS/ TSX 。 限制文件数量
扫描,缩小光圈: withAui(config, { rules: ["*.generative.tsx"] })。 。 。 .
导入模块 赤线 从两边开始——装填器将其重写为外表 解决每层右建置( 没有查询, 没有每个文件配置) :
// a client component → resolves to the client build (schema + render)
import toolkit from "@/lib/chat.generative";
// a route handler (react-server layer) → resolves to the server build (schema + execute)
import toolkit from "@/lib/chat.generative";
使用 AI SDK 将服务器构建转换为 a ToolSet (见
AISDKToolkit 内 @assistant-ui/ai-sdk) (中文(简体) ).
验证于下16.2.6 (Turbopack). Turbopack 向装载器致敬
"use client",但每个资源路径编译一个输出——因此服务器构建 由它自己选择?generative-env=server查询而不是构建层. 清除.next在修改加载器后(Turbopacks缓存加载器输出).
许可证
麻省理工学院