assistant-ui 0.0.99 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assistant-ui",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "description": "CLI for assistant-ui",
   "keywords": [
     "cli",

package/plugin/skills/assistant-ui/SKILL.md

@@ -124,33 +124,46 @@ const result = streamText({
 
 ### Frontend tool UI:
 
-```tsx
-"use client";
+Create a toolkit with a renderer for the tool. The tool executes on the backend, so the entry uses `externalTool()` and only attaches UI:
 
-import { makeAssistantToolUI } from "@assistant-ui/react";
-
-export const WeatherToolUI = makeAssistantToolUI({
-  toolName: "get_weather",
-  render: ({ args, result }) => {
-    return (
-      <div>
-        <p>Weather for {args?.location}</p>
-        {result && <p>{result.temperature}F, {result.condition}</p>}
-      </div>
-    );
+```tsx
+// app/toolkit.tsx
+"use generative";
+
+import { defineToolkit, externalTool } from "@assistant-ui/react";
+
+export default defineToolkit({
+  get_weather: {
+    execute: externalTool(),
+    render: ({ args, result }) => {
+      return (
+        <div>
+          <p>Weather for {args?.location}</p>
+          {result && <p>{result.temperature}F, {result.condition}</p>}
+        </div>
+      );
+    },
   },
 });
 ```
 
-Register the tool UI in your assistant component:
+Register the toolkit in your assistant component:
 
 ```tsx
-<AssistantRuntimeProvider runtime={runtime}>
-  <WeatherToolUI />
+import { AssistantRuntimeProvider, Tools, useAui } from "@assistant-ui/react";
+import toolkit from "@/app/toolkit";
+
+const aui = useAui({
+  tools: Tools({ toolkit }),
+});
+
+<AssistantRuntimeProvider aui={aui} runtime={runtime}>
   <Thread />
 </AssistantRuntimeProvider>
 ```
 
+Do not use `makeAssistantToolUI`, `useAssistantToolUI`, `makeAssistantTool`, or `useAssistantTool`; they are deprecated in favor of toolkits.
+
 ## Key Packages
 
 | Package | Purpose |