Email Draft

AI chats

About

An agent-written email for review – switch recipient and tone, edit inline, remove the attachment, send or discard with undo. Follows your shadcn theme, light and dark. From affectUI (affectui.com).

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

Code

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

Usage.tsx

import { EmailDraft, type DraftContact, type DraftTone } from "@/components/ui/email-draft";

// A renewal reminder an agent drafted – everything the card shows comes in through props
const contacts: DraftContact[] = [
  { name: "Jonas Weber", email: "[email protected]" },
  { name: "Lena Hart", email: "[email protected]" },
  { name: "Finance team", email: "[email protected]" },
];

const firstName = (c: DraftContact) => c.name.trim().split(/\s+/)[0] ?? "";

const tones: DraftTone[] = [
  {
    id: "friendly",
    label: "Friendly",
    body: (c) =>
      `Hi ${firstName(c)}, a heads-up that your Growth plan renews on October 9 for $8,900 a year. If you'd like to add seats or switch to monthly billing, you can review the quote here:`,
  },
  {
    id: "short",
    label: "Short",
    body: (c) => `Hi ${firstName(c)}, your Growth plan renews on October 9 ($8,900/year). Quote for changes:`,
  },
  {
    id: "formal",
    label: "Formal",
    body: (c) =>
      `Dear ${c.name}, this is a reminder that your Growth subscription is scheduled to renew on October 9 at $8,900 per year. Should you wish to adjust seats or billing, please review the attached quote:`,
  },
];

export default function Demo() {
  return (
    <div className="ed-demo">
      <style>{demoCss}</style>
      <EmailDraft
        reference="SUB-1182"
        account="Northwind Logistics"
        amount="$8,900"
        status="Renews in 5 days"
        agent="Renewal agent"
        contacts={contacts}
        attachment="Renewal-quote.pdf"
        tones={tones}
        link={{ label: "Review quote", href: "#" }}
      />
    </div>
  );
}

const demoCss = `
/* Centered in the preview on the theme's background */
.ed-demo {
  display: grid;
  grid-template-columns: minmax(0, 520px);
  place-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 32px 16px;
  box-sizing: border-box;
  background: var(--color-background, #ffffff);
}
`;