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,
toolName: "submitForm",
});
// Use in your component
function Form() {
return (
<div>
<form>{/* form fields */}</form>
<SubmitFormTool />
</div>
);
}API Reference
Parameters
AssistantToolProps<TArgs, TResult>
toolName:
The unique identifier for the tool
parameters:
Schema defining the tool's parameters (typically a Zod schema)
execute:
Function that implements the tool's behavior (required for frontend tools)
description?:
Optional description of the tool's purpose
render?:
Optional custom UI component for rendering the tool execution. Receives the following props:
ToolCallMessagePartProps<TArgs, TResult>
type?:
The message part type
toolCallId?:
Unique identifier for this tool call
toolName?:
The name of the tool being called
args?:
The arguments passed to the tool
argsText?:
String representation of the arguments
result?:
The result of the tool execution (if complete)
isError?:
Whether the result is an error
status?:
The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"
addResult?:
Function to add a result (useful for human-in-the-loop tools)
artifact?:
Optional artifact data associated with the tool call
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) => {
// 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
-
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