makeAssistantToolUI

`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

AssistantToolUIProps<TArgs, TResult>

toolName?:

string

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

render?:

function

A function that renders the tool UI. It receives an object with the following properties: `args` (any): The arguments passed to the tool. `result` (any): The result of the tool execution. `status` ("requires_action" | "in_progress" | "complete" | "error"): The status of the tool execution.

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 === "requires_action") return <p>Getting weather for {args.location}...</p>;
    if (status === "in_progress") return <p>Loading...</p>;
    if (status === "error") return <p>Error getting weather.</p>;
    if (status === "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.

makeAssistantToolUI

`makeAssistantToolUI`

Usage

API