# makeAssistantToolUI
URL: /docs/copilots/make-assistant-tool-ui

Register custom UI components to render tool executions and their status.

***

title: makeAssistantToolUI
description: Register custom UI components to render tool executions and their status.
--------------------------------------------------------------------------------------

import { ParametersTable } from "@/components/docs/tables/ParametersTable";

The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.

## Usage

```tsx
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<TResult>) => 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

```tsx
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.