From 5327901471961d1facde9b5125232b2eb3216522 Mon Sep 17 00:00:00 2001 From: Pedro Ivo Hudson Date: Wed, 23 Sep 2026 14:41:33 -0300 Subject: [PATCH 01/15] feat(web): add AI section to homepage --- apps/web/src/app/page.tsx | 2 + apps/web/src/components/sections/ai.tsx | 146 ++++++++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 apps/web/src/components/sections/ai.tsx diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 12b99b2186..1a13a1a637 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,4 +1,5 @@ import { Footer } from '@/components/footer'; +import AISection from '@/components/sections/ai'; import { EditorHomepage } from '@/components/sections/editor'; import HeroSection from '@/components/sections/hero'; import IntegrationSection from '@/components/sections/integration'; @@ -13,6 +14,7 @@ const Home = () => (
+ diff --git a/apps/web/src/components/sections/ai.tsx b/apps/web/src/components/sections/ai.tsx new file mode 100644 index 0000000000..93eb1608f8 --- /dev/null +++ b/apps/web/src/components/sections/ai.tsx @@ -0,0 +1,146 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { Button } from '@/components/button'; +import { Code } from '@/components/code'; +import { Heading } from '@/components/heading'; +import { Text } from '@/components/text'; + +const AISection = () => { + return ( +
+
+ + Build with any AI tool + +
+ + Describe the email you want. Your agent builds it with React Email. + +
+
+
    + {items.map((item) => ( +
  • +
    + {item.icon} +
    + + {item.title} + +
    • + ))} +
+
+ + npx skills add resend/react-email + + +
+ +
+ ); +}; + +const Icons = { + claude: () => ( + + + + ), + codex: () => ( + + + + + + + + + + + + ), + cursor: () => ( + + + + + + + + ), +}; + +const items = [ + { title: 'Claude Code', icon: }, + { title: 'Codex', icon: }, + { title: 'Cursor', icon: }, +]; + +export default AISection; From d7c17541e204190c68257e61fff2275c51e06465 Mon Sep 17 00:00:00 2001 From: Pedro Ivo Hudson Date: Wed, 23 Sep 2026 14:46:34 -0300 Subject: [PATCH 02/15] feat(docs): add AI integration section to README for React Email usage --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 7a8b58e146..d03fa88116 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,16 @@ export default function Email() { }; ``` +## Using with AI + +Install the React Email skill to teach your coding agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) how to build emails with React Email: + +```sh +npx skills add resend/react-email +``` + +The docs are also available for LLMs at [react.email/docs/llms.txt](https://react.email/docs/llms.txt). + ## Components A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup. From 98e0c0604a70821ba7a7db5f9ec391e693fd4b5e Mon Sep 17 00:00:00 2001 From: Pedro Ivo Hudson Date: Wed, 23 Sep 2026 14:46:48 -0300 Subject: [PATCH 03/15] feat(web): update AI section with new icons for Copilot, v0, and Lovable --- apps/web/src/components/sections/ai.tsx | 68 ++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/sections/ai.tsx b/apps/web/src/components/sections/ai.tsx index 93eb1608f8..a71b5299ca 100644 --- a/apps/web/src/components/sections/ai.tsx +++ b/apps/web/src/components/sections/ai.tsx @@ -23,7 +23,7 @@ const AISection = () => {
-