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#

<ParametersTable
type="AssistantToolUIProps<TArgs, TResult>"
parameters={[
{
name: "toolName",
type: "string",
description:
"The name of the tool. This must match the name of the tool defined in the assistant.",
},
{
name: "render",
type: "ComponentType<ToolCallMessagePartProps<TArgs, TResult>>",
description:
"A React component that renders the tool UI. Receives the following props:",
required: true,
children: [
{
type: "ToolCallMessagePartProps<TArgs, TResult>",
parameters: [
{
name: "type",
type: '"tool-call"',
description: "The message part type",
},
{
name: "toolCallId",
type: "string",
description: "Unique identifier for this tool call",
},
{
name: "toolName",
type: "string",
description: "The name of the tool being called",
},
{
name: "args",
type: "TArgs",
description: "The arguments passed to the tool",
},
{
name: "argsText",
type: "string",
description: "String representation of the arguments",
},
{
name: "result",
type: "TResult | undefined",
description: "The result of the tool execution (if complete)",
},
{
name: "isError",
type: "boolean | undefined",
description: "Whether the result is an error",
},
{
name: "status",
type: "ToolCallMessagePartStatus",
description:
'The execution status object with a type property: "running", "complete", "incomplete", or "requires-action"',
},
{
name: "addResult",
type: "(result: TResult | ToolResponse) => void",
description:
"Function to add a result (useful for human-in-the-loop tools)",
},
{
name: "artifact",
type: "unknown",
description:
"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() {
  const runtime = /* your runtime setup */;
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* ...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.