# makeAssistantTool
URL: /docs/copilots/make-assistant-tool

Create React components that provide reusable tools to the assistant.

`makeAssistantTool` creates a React component that provides a tool to the assistant. This is useful for defining reusable tools that can be composed into your application.

Usage \[#usage]

```tsx
import { makeAssistantTool, tool } from "@assistant-ui/react";
import { z } from "zod";

// Define the tool using the tool() helper
const submitForm = tool({
  parameters: z.object({
    email: z.string().email(),
    name: z.string(),
  }),
  execute: async ({ email, name }) => {
    // Implementation
    return { success: true };
  },
});

// Create a tool component
const SubmitFormTool = makeAssistantTool({
  ...submitForm,
  toolName: "submitForm",
});

// Use in your component
function Form() {
  return (
    <div>
      <form>{/* form fields */}</form>
      <SubmitFormTool />
    </div>
  );
}
```

API Reference \[#api-reference]

Parameters \[#parameters]

<ParametersTable
  type="AssistantToolProps<TArgs, TResult>"
  parameters={[
{
  name: "toolName",
  type: "string",
  description: "The unique identifier for the tool",
  required: true,
},
{
  name: "parameters",
  type: "StandardSchemaV1<TArgs> | JSONSchema7",
  description:
    "Schema defining the tool's parameters (typically a Zod schema)",
  required: true,
},
{
  name: "execute",
  type: "(args: TArgs, context: ToolExecutionContext) => TResult | Promise<TResult>",
  description:
    "Function that implements the tool's behavior (required for frontend tools)",
  required: true,
},
{
  name: "description",
  type: "string",
  description: "Optional description of the tool's purpose",
},
{
  name: "render",
  type: "ComponentType<ToolCallMessagePartProps<TArgs, TResult>>",
  description:
    "Optional custom UI component for rendering the tool execution. Receives the following props:",
  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 \[#returns]

Returns a React component that:

* Provides the tool to the assistant when mounted
* Automatically removes the tool when unmounted
* Renders nothing in the DOM (returns null)

Example with Multiple Tools \[#example-with-multiple-tools]

```tsx
import { makeAssistantTool, tool } from "@assistant-ui/react";
import { z } from "zod";

// Define tools
const validateEmail = tool({
  parameters: z.object({
    email: z.string(),
  }),
  execute: ({ email }) => {
    const isValid = email.includes("@");
    return { isValid, reason: isValid ? "Valid email" : "Missing @" };
  },
});

const sendEmail = tool({
  parameters: z.object({
    to: z.string().email(),
    subject: z.string(),
    body: z.string(),
  }),
  execute: async (params) => {
    // Tool logic
    return { sent: true };
  },
});

// Create tool components
const EmailValidator = makeAssistantTool({
  ...validateEmail,
  toolName: "validateEmail",
});
const EmailSender = makeAssistantTool({
  ...sendEmail,
  toolName: "sendEmail",
});

// Use together
function EmailForm() {
  return (
    <div>
      <form>{/* form fields */}</form>
      <EmailValidator />
      <EmailSender />
    </div>
  );
}
```

Best Practices \[#best-practices]

1. **Parameter Validation**

   * Always use Zod schemas to define parameters
   * Be specific about parameter types and constraints
   * Add helpful error messages to schema validations

2. **Error Handling**

   * Return meaningful error messages
   * Consider returning partial results when possible
   * Handle async errors appropriately

3. **Composition**
   * Break complex tools into smaller, focused ones
   * Consider tool dependencies and interactions
   * Use multiple tools together for complex functionality