tool-ui

To render custom UI components for Mastra tool outputs, you add a React component under your elements directory and register it with its toolId in the UI registry. This maps tool results to type-safe visualizations across streaming and history.

Tool results show as raw text when the UI registry lacks the toolId mapping or the type guard fails. Register the React component and its data validator in the registry so Mastra can render the custom card UI in both streaming and history views.

Yes, Mastra supports streaming custom tool cards. By using a registry-driven approach, you map tool IDs to React components and type guards, enabling dynamic rendering of tool-specific visualizations during chat streaming.

The best way to debug custom tool UI rendering is using a registry-driven setup. Map tool IDs to their React components and data validators, then quickly verify rendering behavior across streaming and history contexts during development.

Yes, a type guard is required for output data. The UI registry uses this validator alongside the React component and toolId entry to ensure correct, type-safe rendering of tool outputs in both streaming and history contexts.

Yes, you can use a single registry-driven UI to map multiple tools. Register each toolId with its corresponding React component and type guard to render distinct, type-safe custom cards for different tools in Mastra chat.