Scribe

Create beautiful, responsive email designs with AI — just describe what you need in plain English.

Try it live

---

Demo

scribe-demo.mp4

---

What is Scribe?

Scribe is an AI-powered email generator that turns natural language descriptions into styled email. No coding required — just chat with the AI and watch your email come to life.

Ideal for:

• Marketers building email campaigns
• Developers needing branded templates
• Businesses maintaining consistent email communications
• Anyone who needs professional emails fast

---

Features

✨ Chat-based Creation — Describe your email in plain English, Scribe builds it for you

📧 Multiple Email Types — Cold emails, newsletters, welcome series, announcements, follow-ups

🎨 Brand Management — Save your brand assets (logo, colors, tagline) and apply them instantly

👁️ Live Preview — See your email rendered in real-time across desktop, tablet, and mobile

🔄 Version Control — Every AI response creates a new version. Roll back anytime.

📤 Export Options — Download as React (.tsx) or standalone HTML

🧪 Test Emails — Send test emails directly to your inbox via Resend

---

Getting Started

Prerequisites

• Node.js 22+ and pnpm
• PostgreSQL database
• Cloudflare R2 account (for storage)
• Resend API key (for sending test emails)
• OpenAI API key (for AI generation)
• Google/GitHub OAuth apps (optional, for social login)

Installation

1. Clone and install dependencies

git clone https://github.com/your-username/scribe.git
cd scribe
pnpm install

2. Configure environment

cp apps/web/.env.example apps/web/.env

Create apps/web/.env with:

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/scribe
MAX_DB_CONNECTIONS=10
MIN_DB_CONNECTIONS=2
IDLE_TIMEOUT_IN_SECONDS=30
CONNECTION_TIMEOUT_IN_SECONDS=5

# CORS
CORS_ORIGIN=http://localhost:3001

# Redis (optional)
REDIS_URL=redis://localhost:6379

# Cloudflare R2 (storage)
CLOUDFLARE_ACCOUNT_ID=...
R2_API_ENDPOINT=https://...
R2_PUBLIC_URL=https://...
R2_ACCESS_KEY_ID=...
R2_ACCESS_KEY=...
R2_BUCKET_NAME=...
MAX_FILE_SIZE_IN_MB=5

# Resend
RESEND_API_KEY=re_...
RESEND_SENDER_EMAIL=[email protected]

# OAuth - Google
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
GOOGLE_REDIRECT_URI=http://localhost:3001/auth/callback/google

# OAuth - GitHub
GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...
GITHUB_REDIRECT_URI=http://localhost:3001/auth/callback/github

# OpenAI
OPENAI_API_KEY=sk-...

# Better Auth
BETTER_AUTH_SECRET=...
BETTER_AUTH_URL=http://localhost:3001

3. Set up the database

pnpm run db:start
pnpm run db:migrate

4. Start the development server

pnpm run dev

Open http://localhost:3001 in your browser.

---

Tech Stack

Built with modern, type-safe tools:

• Framework — TanStack Start
• Project Scaffolding — Better-T-Stack
• UI — shadcn/ui + TailwindCSS
• Database — PostgreSQL + Drizzle ORM
• Authentication — Better-Auth
• AI — OpenAI (using Vercel AI SDK)
• Email — React Email for template rendering
• Storage — AWS S3 / R2 for brand assets
• Delivery — Resend API for test emails
• Dev Tools — Biome, Turborepo, Husky

---

Project Structure

scribe/
├── apps/
│   └── web/                 # Main application
│       ├── public/
│       ├── src/
│       │   ├── components/
│       │   ├── functions/
│       │   ├── hooks/
│       │   ├── lib/
│       │   ├── middleware/
│       │   ├── routes/
│       │   └── types/
│       ├── components.json
│       ├── package.json
│       ├── tsconfig.json
│       └── vite.config.ts
├── packages/
│   ├── auth/                # Authentication configuration
│   ├── config/              # Shared configuration
│   ├── core/                # Core business logic (AI, email, validation)
│   └── db/                  # Database schema, migrations, and utilities
├── AGENTS.md
├── biome.json
├── LICENSE
├── package.json
├── pnpm-workspace.yaml
├── turbo.json
└── README.md

---

Available Scripts

Development

pnpm run dev              # Start development server for all packages
pnpm run dev:web          # Start development server for web app only

Building & Quality

pnpm run build            # Build all packages and applications
pnpm run typecheck        # Run TypeScript type checking
pnpm run lint             # Run Biome linter and auto-fix
pnpm run lint:fix         # Run Biome linter with unsafe fixes
pnpm run format           # Format code with Biome

Database

pnpm run db:start         # Start PostgreSQL database container
pnpm run db:stop          # Stop database container
pnpm run db:down          # Stop and remove database container
pnpm run db:migrate       # Run database migrations
pnpm run db:generate      # Generate Drizzle migrations
pnpm run db:studio        # Open Drizzle Studio for database inspection
pnpm run db:watch         # Watch database for changes

---

License

MIT