makeAssistantToolUI
The makeAssistantToolUI utility is used to register a tool UI component with the Assistant.
Usage
import { makeAssistantToolUI } from "@assistant-ui/react";
const MyToolUI = makeAssistantToolUI({
toolName: "myTool",
render: ({ args, result, status }) => {
// render your tool UI here
},
});API
Parameters
AssistantToolUIProps<TArgs, TResult>
toolName?:
The name of the tool. This must match the name of the tool defined in the assistant.
render:
A React component that renders the tool UI. Receives the following props:
ToolCallMessagePartProps<TArgs, TResult>
type?:
The message part type
toolCallId?:
Unique identifier for this tool call
toolName?:
The name of the tool being called
args?:
The arguments passed to the tool
argsText?:
String representation of the arguments
result?:
The result of the tool execution (if complete)
isError?:
Whether the result is an error
status?:
The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"
addResult?:
Function to add a result (useful for human-in-the-loop tools)
artifact?:
Optional artifact data associated with the tool call
Returns
A React functional component that should be included in your component tree. This component doesn't render anything itself, but it registers the tool UI with the Assistant.
Example
import { makeAssistantToolUI } from "@assistant-ui/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
const GetWeatherUI = makeAssistantToolUI({
toolName: "get_weather",
render: ({ args, result, status }) => {
if (status.type === "requires_action")
return <p>Getting weather for {args.location}...</p>;
if (status.type === "running") return <p>Loading...</p>;
if (status.type === "incomplete" && status.reason === "error")
return <p>Error getting weather.</p>;
if (status.type === "complete")
return <p>The weather is {result.weather}.</p>;
return null;
},
});
function App() {
return (
<AssistantRuntimeProvider>
{/* ...your other components */}
<GetWeatherUI />
</AssistantRuntimeProvider>
);
}This example shows how to create a simple UI for a get_weather tool. The UI will display different messages depending on the status of the tool execution.