Container component that automatically displays pending tool approval dialogs.

Integrates with the useToolApproval hook from @hexos/react-core to monitor pending approval requests and render approval dialogs. Only shows one approval at a time, queuing additional requests until the current one is resolved.

The component handles the complete approval workflow: rendering the dialog, submitting the user’s decision (approve/reject), and managing loading and error states.

Custom dialog rendering is supported via the renderDialog prop for white-label customization while preserving the approval state management.

Related components: useToolApproval, ToolApprovalDialog

Example

Basic usage

function App() {
return (
<AgentUIProvider>
<ChatWindow config={config} />
<ToolApprovalContainer />
</AgentUIProvider>
);
}

Example

Custom dialog rendering

<ToolApprovalContainer
renderDialog={({ request, onApprove, onReject, isSubmitting }) => (
<MyCustomDialog
toolName={request.toolName}
args={request.args}
onApprove={onApprove}
onReject={onReject}
loading={isSubmitting}
/>
)}
/>

function ToolApprovalContainer(props: ToolApprovalContainerProps): React.ReactElement | null

Parameters

props