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?: string

The name of the tool. This must match the name of the tool defined in the assistant.

renderrequired: ComponentType<ToolCallMessagePartProps<TArgs, TResult>>

A React component that renders the tool UI. Receives the following props:

ToolCallMessagePartProps<TArgs, TResult>

type?: "tool-call"

The message part type

toolCallId?: string

Unique identifier for this tool call

toolName?: string

The name of the tool being called

args?: TArgs

The arguments passed to the tool

argsText?: string

String representation of the arguments

result?: TResult | undefined

The result of the tool execution (if complete)

isError?: boolean | undefined

Whether the result is an error

status?: ToolCallMessagePartStatus

The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"

addResult?: (result: TResult | ToolResponse<TResult>) => void

Function to add a result (useful for human-in-the-loop tools)

artifact?: unknown

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.