makeAssistantTool

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

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);
 
// Use in your component
function Form() {
  return (
    <div>
      <form>{/* form fields */}</form>
      <SubmitFormTool />
    </div>
  );
}

API Reference

Parameters

tool: A tool definition created using the tool() helper function
- parameters: Zod schema defining the tool's parameters
- execute: Function that implements the tool's behavior

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

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) => {
    // Implementation
    return { sent: true };
  },
});
 
// Create tool components
const EmailValidator = makeAssistantTool(validateEmail);
const EmailSender = makeAssistantTool(sendEmail);
 
// Use together
function EmailForm() {
  return (
    <div>
      <form>{/* form fields */}</form>
      <EmailValidator />
      <EmailSender />
    </div>
  );
}

Best Practices

Parameter Validation
- Always use Zod schemas to define parameters
- Be specific about parameter types and constraints
- Add helpful error messages to schema validations
Error Handling
- Return meaningful error messages
- Consider returning partial results when possible
- Handle async errors appropriately
Composition
- Break complex tools into smaller, focused ones
- Consider tool dependencies and interactions
- Use multiple tools together for complex functionality