Buffered Output for Bespoke UI.

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 See this http://keepachangelog.com link for information on how we want this document formatted.
 
+## v1.4.1
+
+### Added
+
+New buffered output support for non-LLM tools. This allows a tool to add string data as part of the `ask()` response. However, this data is not submitted to tool outputs, hence is not seen by the parent. Useful for bespoke UI where an LLM assistant is formatting data for display.
+
+See Bespoke UI Assistant test for a full example.
+
 ## v1.4.0
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "experts",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "An opinionated panel of experts implementation using OpenAI's Assistants API",
   "type": "module",
   "main": "./src/index.js",

src/experts/assistant.js

@@ -17,6 +17,7 @@ class Assistant {
   #stream;
   #streamEmitter;
   #expertsOutputs = [];
+  #bufferedOutputs = [];
   #asyncListeners = {};
 
   static async create(options = {}) {
@@ -103,8 +104,13 @@ class Assistant {
     this.#expertsOutputs.push(output);
   }
 
+  addBufferedOutput(output) {
+    this.#bufferedOutputs.push(output);
+  }
+
   addAssistantTool(toolClass) {
     const assistantTool = new toolClass();
+    assistantTool.parent = this;
     this.experts.push(assistantTool);
     if (assistantTool.isParentsTools) {
       for (const tool of assistantTool.parentsTools) {
@@ -141,10 +147,14 @@ class Assistant {
           break;
         case "tools":
           newOutput = this.#expertsOutputs.join("\n\n");
+          break;
         default:
           break;
       }
     }
+    if (this.#bufferedOutputs.length > 0) {
+      newOutput = newOutput + "\n\n" + this.#bufferedOutputs.join("\n\n");
+    }
     return newOutput;
   }
 
@@ -185,6 +195,9 @@ class Assistant {
     if (this.#expertsOutputs.length > 0) {
       this.#expertsOutputs.length = 0;
     }
+    if (this.#bufferedOutputs.length > 0) {
+      this.#bufferedOutputs.length = 0;
+    }
   }
 
   // Private (Tool Outputs)

src/experts/tool.js

@@ -17,6 +17,7 @@ class Tool extends Assistant {
     this.hasThread = options.hasThread !== undefined ? options.hasThread : true;
     this.outputs = options.outputs || "default";
     this.parentsTools = options.parentsTools || [];
+    this.parent = undefined;
   }
 
   get toolName() {

test/fixtures.js

@@ -12,3 +12,4 @@ export {
   AccountsAssistant,
   AccountsTool,
 } from "./fixtures/accountsAssistant.js";
+export { HtmlAssistant } from "./fixtures/htmlAssistant.js";

test/fixtures/accountsAssistant.js

@@ -1,3 +1,4 @@
+import { helperName } from "../helpers.js";
 import { Tool } from "../../src/experts/tool.js";
 import { Assistant } from "../../src/experts/assistant.js";
 

test/fixtures/htmlAssistant.js

@@ -0,0 +1,117 @@
+import { Tool } from "../../src/experts/tool.js";
+import { Assistant } from "../../src/experts/assistant.js";
+import { helperName } from "../helpers.js";
+
+class MockDataTool extends Tool {
+  constructor() {
+    super({
+      llm: false,
+      parentsTools: [
+        {
+          type: "function",
+          function: {
+            name: "data_tool",
+            description: "Returns data based on the message",
+            parameters: {
+              type: "object",
+              properties: { message: { type: "string" } },
+              required: ["message"],
+            },
+          },
+        },
+      ],
+    });
+    this.toolCallCount = 0;
+  }
+
+  async ask(message) {
+    const data = {
+      cows: [
+        {
+          name: "Bessie",
+          age: 3,
+          milk_production: "27 liters/day",
+        },
+        {
+          name: "Gertie",
+          age: 5.5,
+          milk_production: "24 liters/day",
+        },
+      ],
+    };
+    this.toolCallCount++;
+    return JSON.stringify(data);
+  }
+}
+
+class HtmlTool extends Tool {
+  constructor() {
+    super({
+      llm: false,
+      parentsTools: [
+        {
+          type: "function",
+          function: {
+            name: "html_tool",
+            description: "Format one or more items into HTML components.",
+            parameters: {
+              type: "object",
+              properties: {
+                items: {
+                  type: "array",
+                  description: "Array of items to render as HTML.",
+                  items: {
+                    type: "object",
+                    properties: {
+                      heading: {
+                        type: "string",
+                        description: "Data for the header tag.",
+                      },
+                      content: {
+                        type: "string",
+                        description: "Basic HTML content.",
+                      },
+                    },
+                    required: ["heading", "content"],
+                  },
+                },
+              },
+              required: ["items"],
+            },
+          },
+        },
+      ],
+    });
+    this.toolCallCount = 0;
+  }
+
+  async ask(message) {
+    const data = JSON.parse(message);
+    data.items.forEach((item) => {
+      const renderedTemplate = `<div class="my-Component"><h2>${item.heading}</h2><p>${item.content}</p></div>`;
+      this.parent.addBufferedOutput(renderedTemplate);
+    });
+    this.toolCallCount++;
+    return "Success. Added HTML to hidden buffered output only see by the use.";
+  }
+}
+
+class HtmlAssistant extends Assistant {
+  constructor() {
+    super({
+      name: helperName("HtmlAssistant"),
+      instructions: `
+## Rules
+
+1. For each user message, use the 'data_tool' first.
+2. The use the 'html_tool' to format the submitted outputs of the 'data_tool'.
+3. HTML output is hidden to you but assume the user can see it appended to your message.
+    `,
+      temperature: 0.1,
+    });
+    this.addAssistantTool(MockDataTool);
+    this.addAssistantTool(HtmlTool);
+  }
+}
+
+export { HtmlAssistant };

test/uat/bespokeUIAssistant.test.js

@@ -0,0 +1,18 @@
+import { helperThreadID } from "../helpers.js";
+import { HtmlAssistant } from "../fixtures.js";
+
+test("can find an expert that has many tools", async () => {
+  const assistant = await HtmlAssistant.create();
+  const dataTool = assistant.experts[0];
+  const htmlTool = assistant.experts[1];
+  expect(dataTool.toolCallCount).toBe(0);
+  expect(htmlTool.toolCallCount).toBe(0);
+  // Exercise.
+  const threadID = await helperThreadID();
+  const output = await assistant.ask("Show me cow data.", threadID);
+  // Ensure each tool was called once.
+  expect(dataTool.toolCallCount).toBe(1);
+  expect(htmlTool.toolCallCount).toBe(1);
+  // Ensure the output has HTML.
+  expect(output).toMatch(/class="my-Component"/);
+}, 20000);