| From | sarah.mitchell@acme.co |
| To | marcus.chen@acme.co |
Hi Marcus, I've attached the revised proposal with the changes we discussed. The new timeline reflects the Q2 launch date, and I've adjusted the budget breakdown in section 3. Let me know if you have any questions. Best, Sarah
<MessageDraft id="message-draft-email" channel="email" subject="Updated proposal attached" from="sarah.mitchell@acme.co" to={["marcus.chen@acme.co"]} body={`Hi Marcus,I've attached the revised proposal with the changes we discussed. The new timeline reflects the Q2 launch date, and I've adjusted the budget breakdown in section 3.Let me know if you have any questions.Best,Sarah`} onSend={() => console.log("Message sent")} onCancel={() => console.log("Message cancelled")}/>Run this once from your project root.
npx shadcn@latest add @tool-ui/message-draftRender MessageDraft in your UI with tool-compatible props.
import { MessageDraft } from "@/components/tool-ui/message-draft"; export function Example() { return ( <MessageDraft id="message-draft-example" channel="email" subject="Q4 Planning Follow-up" to={["sarah.chen@company.com"]} body={`Hi Sarah,Thanks for joining the planning meeting today. I've attached the updated timeline.Best,Alex`}onSend={() => console.log("Sent")}onCancel={() => console.log("Cancelled")}/>);}Register this renderer so tool results display as MessageDraft.
"use client";import { type Toolkit } from "@assistant-ui/react";import { MessageDraft } from "@/components/tool-ui/message-draft";import { safeParseSerializableMessageDraft, SerializableMessageDraftSchema,} from "@/components/tool-ui/message-draft/schema";import { createArgsToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { draftMessage: { description: "Draft a message for the user to review before sending.", parameters: SerializableMessageDraftSchema, render: createArgsToolRenderer({ safeParse: safeParseSerializableMessageDraft, idPrefix: "message-draft", render: (parsedArgs, { result, addResult }) => result ? ( <MessageDraft {...parsedArgs} outcome={result} /> ) : ( <MessageDraft {...parsedArgs} onSend={async () => { // Perform actual send logic here await sendMessage(parsedArgs); await addResult?.("sent"); }} onCancel={() => addResult?.("cancelled")} /> ), }), },};These snippets use assistant-ui for end-to-end wiring, but the MessageDraft component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.
Review messages before the AI sends them on your behalf
Cancel within a configurable window after clicking Send
Email and Slack with channel-specific metadata display
Compact confirmation after send or cancel
The component supports multiple channel types, each with its own metadata fields.
Shows subject line, To/CC/BCC recipients, and message body.
Shows channel or DM target with the Slack icon.
After clicking Send, there's a grace period where the user can undo:
The grace period is configurable via undoGracePeriod (in milliseconds).
When outcome is set, the component renders a compact receipt showing the result. This is useful for displaying the outcome in conversation history.
Prop
Type
Prop
Type
Prop
Type
article with aria-labelledby for the draft contentTab to move between buttonsEnter or Space to activate focused buttonEscape triggers cancel while in review statearia-live="polite"role="status" for screen reader announcements