import "./styles.css"; import { Badge, Button, Empty, Input, InputArea, PoweredByCloudflare, Surface, Switch, Tabs, Text } from "@cloudflare/kumo"; import { ArrowClockwiseIcon, CheckCircleIcon, EnvelopeSimpleIcon, MoonIcon, PaperPlaneTiltIcon, ShieldCheckIcon, SunIcon, TrayIcon, WarningCircleIcon } from "@phosphor-icons/react"; import { useAgent } from "agents/react"; import { useEffect, useState } from "react"; import { createRoot } from "react-dom/client"; import type { EmailRecord, EmailServiceAgent, EmailServiceState } from "./server"; type TabKey = "inbox" | "outbox"; interface ExampleConfig { mailboxAddress: string; mailboxId: string; } interface SimulateResponse { success?: boolean; error?: string; routedTo?: string; } function isExampleConfig(value: unknown): value is ExampleConfig { return ( typeof value === "object" && value !== null && "mailboxAddress" in value && typeof value.mailboxAddress === "string" && "mailboxId" in value && typeof value.mailboxId === "string" ); } function isSimulateResponse(value: unknown): value is SimulateResponse { return typeof value === "object" && value !== null; } function ConnectionIndicator({ readyState }: { readyState: number }) { const status = readyState === WebSocket.OPEN ? { dot: "bg-green-500", label: "Connected", text: "text-kumo-success" } : readyState === WebSocket.CONNECTING ? { dot: "bg-yellow-500", label: "Connecting...", text: "text-kumo-warning" } : { dot: "bg-red-500", label: "Disconnected", text: "text-kumo-danger" }; return ( {status.label} ); } function ModeToggle() { const [mode, setMode] = useState( () => localStorage.getItem("theme") || "light" ); useEffect(() => { document.documentElement.setAttribute("data-mode", mode); document.documentElement.style.colorScheme = mode; localStorage.setItem("theme", mode); }, [mode]); return ( ); } function DetailPanel({ record, mailboxAddress }: { record: EmailRecord | null; mailboxAddress: string; }) { if (!record) { return ( ); } const methodLabel = record.method === "email-service" ? "Email Service binding" : "replyToEmail"; const body = record.text || record.html || "(No content)"; return (

{record.subject} {methodLabel} {record.secureReply && Verified reply} {record.simulated && ( Local simulation )}

From: {record.from}

To: {record.to}

Mailbox: {mailboxAddress}

Date: {new Date(record.timestamp).toLocaleString()}

{record.messageId && (

Message ID: {record.messageId}

)}

{body}

{Object.keys(record.headers).length > 0 && (

Headers ({Object.keys(record.headers).length})

{Object.entries(record.headers).map(([key, value]) => (

{key}: {value}

))}

)} ); } function App() { const [config, setConfig] = useState({ mailboxAddress: "mailbox-7f3a@example.com", mailboxId: "mailbox-7f3a" }); const [statusMessage, setStatusMessage] = useState(null); const [activeTab, setActiveTab] = useState("inbox"); const [selectedRecordId, setSelectedRecordId] = useState(null); const [composeTo, setComposeTo] = useState("recipient@example.com"); const [composeSubject, setComposeSubject] = useState( "Welcome to our support desk" ); const [composeBody, setComposeBody] = useState( "Thanks for trying the Email Service agent example. Reply to this message and route the mailbox to the Worker to continue the thread." ); const [simulateFrom, setSimulateFrom] = useState("customer@example.com"); const [simulateSubject, setSimulateSubject] = useState( "Question about my invoice" ); const [simulateBody, setSimulateBody] = useState( "Can you confirm whether my annual plan renews next month?" ); const [sending, setSending] = useState(false); const [simulating, setSimulating] = useState(false); const [clearing, setClearing] = useState(false); const [toggling, setToggling] = useState(false); useEffect(() => { let cancelled = false; void (async () => { const response = await fetch("/api/example-config"); if (!response.ok || cancelled) { return; } const nextConfig = await response.json(); if (!cancelled && isExampleConfig(nextConfig)) { setConfig(nextConfig); } })(); return () => { cancelled = true; }; }, []); const agent = useAgent({ agent: "email-service-agent", name: config.mailboxId }); const state = agent.state ?? ({ inbox: [], outbox: [], totalReceived: 0, totalSent: 0, autoReplyEnabled: true } satisfies EmailServiceState); const isConnected = agent.readyState === WebSocket.OPEN; const records = activeTab === "inbox" ? state.inbox : state.outbox; const selectedRecord = records.find((record) => record.id === selectedRecordId) ?? null; async function handleSendEmail(event: React.FormEvent) { event.preventDefault(); setSending(true); setStatusMessage(null); try { const result = await agent.call("sendTransactionalEmail", [ { to: composeTo, subject: composeSubject, body: composeBody } ]); if (result.ok) { setStatusMessage( `Email accepted by Email Service: ${result.messageId}` ); } else { setStatusMessage(result.error); } } catch (error) { setStatusMessage(error instanceof Error ? error.message : String(error)); } finally { setSending(false); } } async function handleSimulateInbound( event: React.FormEvent ) { event.preventDefault(); setSimulating(true); setStatusMessage(null); try { const response = await fetch("/api/simulate-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ from: simulateFrom, subject: simulateSubject, body: simulateBody }) }); const payload = await response.json(); const result = isSimulateResponse(payload) ? payload : {}; if (!response.ok) { setStatusMessage(result.error || "Failed to simulate inbound email."); return; } setActiveTab("inbox"); setStatusMessage(`Simulated email routed to ${result.routedTo}.`); } finally { setSimulating(false); } } async function handleToggleAutoReply() { setToggling(true); setStatusMessage(null); try { const enabled = await agent.call("toggleAutoReply"); setStatusMessage( enabled ? "Automatic replies are enabled." : "Automatic replies are disabled." ); } catch (error) { setStatusMessage(error instanceof Error ? error.message : String(error)); } finally { setToggling(false); } } async function handleClearActivity() { setClearing(true); setStatusMessage(null); try { await agent.call("clearActivity"); setSelectedRecordId(null); setStatusMessage("Inbox and outbox cleared."); } catch (error) { setStatusMessage(error instanceof Error ? error.message : String(error)); } finally { setClearing(false); } } return (

Email Service Agent A full-stack example that sends transactional email with the new Email Service binding, receives routed mail inside an agent, and keeps the mailbox state synced to a React UI.

One Worker, both directions Outbound email goes through `this.sendEmail()`. Inbound email goes through `routeAgentEmail()`, gets parsed with `postal-mime`, and can optionally use signed replies with `replyToEmail()`.

{statusMessage && (

{statusMessage.toLowerCase().includes("failed") || statusMessage.toLowerCase().includes("error") ? ( ) : ( )} {statusMessage}

)} {state.lastError && state.lastError !== statusMessage && (

{state.lastError}

)}

Send outbound email

To setComposeTo(event.target.value)} placeholder="recipient@example.com" type="email" />

Subject setComposeSubject(event.target.value) } placeholder="Welcome to our support desk" />

Body

Sends from {config.mailboxAddress}

Simulate inbound email

From setSimulateFrom(event.target.value)} placeholder="customer@example.com" type="email" />

Subject setSimulateSubject(event.target.value) } placeholder="Question about my invoice" />

Body

Uses the same resolver chain as a real routed email.

Mailbox settings

Configure EMAIL_FROM in `wrangler.jsonc` to a verified sender address. The example uses that same address as the routed mailbox.

Optional: add EMAIL_SECRET with `wrangler secret put EMAIL_SECRET` if you want `replyToEmail()` to sign follow-up replies.

When you deploy the Worker, route{" "} {config.mailboxAddress} to it from Cloudflare Email Service.

Mailbox

{config.mailboxAddress}

Instance

{config.mailboxId}

Received

{state.totalReceived}

Sent

{state.totalSent}

{ setActiveTab(value as TabKey); setSelectedRecordId(null); }} tabs={[ { value: "inbox", label: ( Inbox ({state.inbox.length}) ) }, { value: "outbox", label: ( Outbox ( {state.outbox.length}) ) } ]} className="m-2" />

{records.length > 0 ? ( records .slice() .reverse() .map((record) => ( setSelectedRecordId(record.id)} /> )) ) : (

)}

{(state.inbox.length > 0 || state.outbox.length > 0) && (

)}

); } const rootElement = document.getElementById("root"); if (!rootElement) { throw new Error("Root element not found"); } createRoot(rootElement).render();