logoassistant-ui

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.

render:

ComponentType<ToolCallContentPartProps<TArgs, TResult>>

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

ToolCallContentPartProps<TArgs, TResult>

type?:

"tool-call"

The content 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?:

ToolCallContentPartStatus

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.