逆向工程 Claude 的生成式 UI - 然后为终端构建它

pi install npm:pi-generative-ui

{
  "i_have_seen_read_me": true,
  "title": "snake_case_identifier",
  "loading_messages": ["第一条加载消息", "第二条加载消息"],
  "widget_code": "...样式...\n...html 内容...\n..."
}

{
  "modules": ["interactive", "chart"]
}

LLM 生成 show_widget 工具调用
            │
            ▼
   ┌───────────────────┐
   │ message_update    │──── 流式：拦截部分工具调用 JSON
   │    事件           │     提取 widget_code，提前打开 Glimpse 窗口
   └────────┬──────────┘     随着 token 到达，提供部分 HTML
            │
            ▼
   ┌───────────────────┐
   │  tool_call        │──── 完成：最终 widget_code 可用
   │    事件           │
   └────────┬──────────┘
            │
            ▼
   ┌───────────────────┐
   │   execute()       │──── 重用流式窗口或打开新窗口
   │                   │     等待用户交互或窗口关闭
   └────────┬──────────┘     将交互数据作为工具结果返回
            │
            ▼
   ┌───────────────────┐
   │  renderCall       │──── TUI："show_widget compound interest 800×600"
   │  renderResult     │──── TUI："✓ compound interest 800×600"
   └───────────────────┘

pi.registerTool({
  name: "visualize_read_me",
  label: "阅读指南",
  description: "返回 show_widget 的设计指南...",
  promptGuidelines: [
    "在第一次调用 show_widget 之前调用一次 visualize_read_me。",
    "不要向用户提及 read_me 调用。",
  ],
  parameters: Type.Object({
    modules: Type.Array(StringEnum(AVAILABLE_MODULES)),
  }),
  async execute(_toolCallId, params) {
    return {
      content: [{ type: "text", text: getGuidelines(params.modules) }],
      details: { modules: params.modules },
    };
  },
});

pi.registerTool({
  name: "show_widget",
  label: "显示小部件",
  description: "在原生 macOS 窗口中显示视觉内容...",
  parameters: Type.Object({
    i_have_seen_read_me: Type.Boolean(),
    title: Type.String(),
    widget_code: Type.String(),
    width: Type.Optional(Type.Number()),
    height: Type.Optional(Type.Number()),
    floating: Type.Optional(Type.Boolean()),
  }),
  async execute(_toolCallId, params, signal) {
    const { open } = await import(GLIMPSE_PATH);
    const win = open(wrapHTML(params.widget_code), {
      width: params.width ?? 800,
      height: params.height ?? 600,
      title: params.title.replace(/_/g, " "),
    });

    return new Promise((resolve) => {
      win.on("message", (data) => {
        resolve({ content: [{ type: "text", text: `用户数据: ${JSON.stringify(data)}` }] });
      });
      win.on("closed", () => {
        resolve({ content: [{ type: "text", text: "窗口已关闭。" }] });
      });
    });
  },
});

renderCall(args, theme) {
  const title = args.title.replace(/_/g, " ");
  return new Text(
    theme.fg("toolTitle", theme.bold("show_widget ")) +
    theme.fg("accent", title) +
    theme.fg("dim", ` ${args.width}×${args.height}`),
    0, 0
  );
},

renderResult(result, { isPartial, expanded }, theme) {
  if (isPartial) return new Text(theme.fg("warning", "⟳ 小部件渲染中..."), 0, 0);
  const details = result.details;
  let text = theme.fg("success", "✓ ") + theme.fg("accent", details.title);
  if (expanded && details.messageData) {
    text += "\n" + theme.fg("dim", `  数据: ${JSON.stringify(details.messageData)}`);
  }
  return new Text(text, 0, 0);
},

type AssistantMessageEvent =
  | { type: "toolcall_start"; contentIndex: number; partial: AssistantMessage }
  | { type: "toolcall_delta"; contentIndex: number; delta: string; partial: AssistantMessage }
  | { type: "toolcall_end";   contentIndex: number; toolCall: ToolCall; partial: AssistantMessage }

block.partialJson += event.delta.partial_json;
block.arguments = parseStreamingJson(block.partialJson);

pi.on("message_update", async (event) => {
  const raw = event.assistantMessageEvent;
  if (raw.type === "toolcall_delta" && streaming) {
    const block = raw.partial.content[raw.contentIndex];
    const html = block.arguments?.widget_code;
    if (html && html.length > 20) {
      streaming.window.setHTML(wrapHTML(html));
    }
  }
});

// 外壳 HTML 加载一次 - 包含一个 <div id="root"> 和一个脚本
// 该脚本定义了 window._setContent(html) 来更新 root 的 innerHTML
function shellHTML() {
  return `...
    <div id="root"></div>
    // _setContent: 将 root.innerHTML 设置为提供的 html
  ...`;
}

// 在每个 delta 上，评估 JS 以更新内容
streaming.window.send(`window._setContent('${escapeJS(html)}')`);

window._setContent = function(html) {
  var root = document.getElementById('root');