docs: update tool ui usage (#917)

assistant-ui · Sep 29, 2024 · 8f160c8 · 8f160c8
1 parent c94ac00
commit 8f160c8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/apps/docs/content/docs/advanced/ToolUI.mdx b/apps/docs/content/docs/advanced/ToolUI.mdx
@@ -21,8 +21,8 @@ type WebSearchResult = {
 
 const WebSearchToolUI = makeAssistantToolUI<WebSearchArgs, WebSearchResult>({
   toolName: "web_search",
-  render: ({ part, status }) => {
-    return <p>web_search({part.args.query})</p>;
+  render: ({ args, status }) => {
+    return <p>web_search({args.query})</p>;
   },
 });
 ```
@@ -61,8 +61,8 @@ type WebSearchResult = {
 
 const useWebSearchToolUI = makeAssistantToolUI<WebSearchArgs, WebSearchResult>({
   toolName: "web_search",
-  render: ({ part, status }) => {
-    return <p>web_search({part.args.query})</p>;
+  render: ({ args, status }) => {
+    return <p>web_search({args.query})</p>;
   },
 });
 ```
@@ -101,7 +101,7 @@ import { useCallback } from "react";
 const MyComponent = ({ product_id }) => {
   useAssistantToolUI({
     toolName: "current_product_info",
-    render: useCallback(({ part, status }) => {
+    render: useCallback(({ args, status }) => {
       // you can access component props here
       return <p>product_info({ product_id })</p>;
     }, [product_id]),
@@ -132,9 +132,9 @@ import { DatePicker } from "@/components/datepicker";
 
 const DatePickerToolUI = makeAssistantToolUI<{}, { date: string }>({
   toolName: "date_picker",
-  render: ({ part, status, addResult }) => {
-    if (part.result) {
-      return <p>You picked {part.result.date}</p>;
+  render: ({ result, status, addResult }) => {
+    if (result) {
+      return <p>You picked {result.date}</p>;
     }
 
     const handleSubmit = (date: Date) => {

diff --git a/examples/with-openai-assistants/app/page.tsx b/examples/with-openai-assistants/app/page.tsx
@@ -15,16 +15,16 @@ type WeatherResult = {
 
 const WeatherTool = makeAssistantToolUI<WeatherArgs, WeatherResult>({
   toolName: "get_weather",
-  render: ({ part, status }) => {
+  render: ({ args, result, status }) => {
     return (
       <p
         className={cn(
           "my-4 text-center font-mono text-sm font-bold text-blue-500 first:mt-0",
           status.type === "running" && "animate-pulse",
         )}
       >
-        get_weather({JSON.stringify(part.args)})
-        {!!part.result && <> =&gt; {JSON.stringify(part.result)}</>}
+        get_weather({JSON.stringify(args)})
+        {!!result && <> =&gt; {JSON.stringify(result)}</>}
       </p>
     );
   },