assistant-ui 工具 UI 教程：服务端审批、权限与历史恢复

npx assistant-ui@latest create

import { tool } from "ai";
import { z } from "zod";

export const demoTools = {
  resolve_ticket: tool({
    description: "请求模拟关闭一个虚构工单；不会写入真实业务系统。",
    inputSchema: z.object({ ticketId: z.string().min(1).max(80) }),
    execute: async ({ ticketId }) => ({ ticketId, simulated: true }),
  }),
};

export const approvalPolicy = {
  resolve_ticket: () => "user-approval" as const,
};

"use client";

import { useRef, useState } from "react";
import {
  defineToolkit,
  useAuiState,
  type ToolApprovalResponse,
} from "@assistant-ui/react";

export const approvalUi = defineToolkit({
  resolve_ticket: {
    type: "backend",
    render: ({ args, approval, respondToApproval, result, isError, status }) => {
      const [busy, setBusy] = useState(false);
      const [error, setError] = useState<string | null>(null);
      const lock = useRef(false);
      const canAnswer = useAuiState((s) => s.thread.capabilities.answerToolCall);

      const decide = async (answer: ToolApprovalResponse) => {
        if (lock.current || !canAnswer) return;
        lock.current = true;
        setBusy(true);
        setError(null);
        try {
          await respondToApproval(answer);
        } catch (failure) {
          setError(failure instanceof Error ? failure.message : "提交决定失败");
        } finally {
          lock.current = false;
          setBusy(false);
        }
      };

      if (approval?.approved === false) return <p>已拒绝，未继续模拟操作。</p>;
      if (isError || status.type === "incomplete") {
        return <p role="alert">工具未成功完成，请先核对服务端记录。</p>;
      }
      if (result !== undefined) {
        return <pre>{JSON.stringify(result, null, 2)}</pre>;
      }
      if (approval?.approved === true) return <p>已批准，等待服务端结果。</p>;
      if (!approval) return <p>正在等待工具状态。</p>;

      return (
        <section aria-label="模拟操作确认">
          <p>候选操作：模拟关闭工单 {String(args.ticketId)}</p>
          <p>本例不会修改真实工单。</p>
          <button
            disabled={busy || !canAnswer}
            onClick={() => void decide({ approved: true })}
          >
            批准模拟操作
          </button>
          <button
            disabled={busy || !canAnswer}
            onClick={() => void decide({ approved: false, reason: "用户拒绝" })}
          >
            拒绝
          </button>
          {!canAnswer && <p>此记录为只读，不能回应审批。</p>}
          {error && <p role="alert">{error}</p>}
        </section>
      );
    },
  },
});

"use client";

import type { ReactNode } from "react";
import { useChat } from "@ai-sdk/react";
import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
import { useAISDKRuntime } from "@assistant-ui/ai-sdk";
import { approvalUi } from "./ticket-toolkit";

export function ChatRuntime({ children }: { children: ReactNode }) {
  const chat = useChat({
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
  });
  const runtime = useAISDKRuntime(chat);
  const config = AuiConfig({ tools: Tools({ toolkit: approvalUi }) });

  return (
    <AssistantRuntimeProvider runtime={runtime} config={config}>
      {children}
    </AssistantRuntimeProvider>
  );
}