Message Draft

AI chats 9

About

A review card that shows a drafted email or Slack message with Send/Cancel actions and an undo grace period before it sends.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Message Draft to your project and fits it to your theme.

Code

How Message Draft is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import MessageDraft from "@/components/ui/message-draft";

export default function Default() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <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")}
      />
    </div>
  );
}