Tool UIs

You can show a custom UI when a tool is called to let the user know what is happening.

Tool UI Components

import { makeAssistantToolUI } from "@assistant-ui/react";
 
type WebSearchArgs = {
  query: string;
};
 
type WebSearchResult = {
  title: string;
  description: string;
  url: string;
};
 
export const WebSearchToolUI = makeAssistantToolUI<WebSearchArgs, WebSearchResult>({
  toolName: "web_search",
  render: ({ args, status }) => {
    return <p>web_search({args.query})</p>;
  },
});

You can put this component anywhere in your app inside the <AssistantRuntimeProvider /> component.

import { WebSearchToolUI } from '@/tools/WebSearchToolUI';
 
const MyApp = () => {
  ...
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      ...
      <WebSearchToolUI />
      ...
    </AssistantRuntimeProvider>
  );
};

Tool UI Hooks

import { makeAssistantToolUI } from "@assistant-ui/react";
 
type WebSearchArgs = {
  query: string;
};
 
type WebSearchResult = {
  title: string;
  description: string;
  url: string;
};
 
export const useWebSearchToolUI = makeAssistantToolUI<WebSearchArgs, WebSearchResult>({
  toolName: "web_search",
  render: ({ args, status }) => {
    return <p>web_search({args.query})</p>;
  },
});

You can use this hook anywhere in your app inside the <AssistantRuntimeProvider /> component.

import { useWebSearchToolUI } from '@/tools/useWebSearchToolUI';
 
const MyComponent = () => {
  useWebSearchToolUI();
 
  ...
};
 
const MyApp = () => {
  ...
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      ...
      <MyComponent />
      ...
    </AssistantRuntimeProvider>
  );
};

If you need access to component props, you can use the useAssistantToolUI hook. If you are passing a component inline, you should use the useInlineRender hook to prevent the component from being re-mounted on every render.

import { useAssistantToolUI, useInlineRender } from "@assistant-ui/react";
 
const MyComponent = ({ product_id }) => {
  useAssistantToolUI({
    toolName: "current_product_info",
    render: useInlineRender(({ args, status }) => {
      // you can access component props here
      return <p>product_info({ product_id })</p>;
    }),
  });
 
  ...
};
 
const MyApp = () => {
  ...
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      ...
      <MyComponent product_id="123" />
      ...
    </AssistantRuntimeProvider>
  );
};

Function Calling for User Input

The following example shows a date_picker tool that the AI can call to collect a date from the user.

import { makeAssistantToolUI } from "@assistant-ui/react";
import { DatePicker } from "@/components/datepicker";
 
const DatePickerToolUI = makeAssistantToolUI<{}, { date: string }>({
  toolName: "date_picker",
  render: ({ result, status, addResult }) => {
    if (result) {
      return <p>You picked {result.date}</p>;
    }
 
    const handleSubmit = (date: Date) => {
      addResult({ date: date.toISOString() });
    };
 
    return <DatePicker onSubmit={handleSubmit} />;
  },
});

Tool UIs

Tool UI Components

Tool UI Hooks

Inline Tool UI Hooks

Function Calling for User Input

On this page