pagelathe

pagelathe

AI landing-page builder for technical founders. Bring your key, describe your product, and ship a fast, on-brand static Astro landing page in minutes — then let pagelathe measure it and tell you how to reorder sections to convert better.

Every AI site builder spits out a generic React app. pagelathe is built for developer tools: code-snippet heroes, multi-language API examples, GitHub/self-host CTAs, honest pricing, and anti-fluff copy — emitted as a static Astro project you fully own that scores ~100 on Lighthouse by default.

Install

npm install -g pagelathe

Prerequisites: Node ≥20.11 for the pagelathe CLI; Node ≥22 to run or build the generated Astro site (the pnpm dev / pnpm build steps below).

Quick start

pagelathe config set-key --provider gemini   # paste your Gemini key (AIza…)
pagelathe config use gemini                  # make Gemini your default provider
mkdir my-landing && cd my-landing            # generate scaffolds the project for you
pagelathe generate -d "A TypeScript SDK for sending transactional email"
pnpm install && pnpm dev                     # http://localhost:4321

Prefer OpenRouter or OpenAI? Drop the first two lines (OpenRouter is the default) or swap gemini for openai. See Providers & API keys for all three.

A run streams a live token counter as it works and prints a prompt / completion / total summary at the end, so you always know what it cost:

$ pagelathe generate -d "A TypeScript SDK for sending transactional email"
  Classifying product…
  ↳ 1,318 tokens used so far
  Archetype: sdk
  Planning sections…
  ↳ 4,011 tokens used so far
  Writing hero…
  ↳ 6,729 tokens used so far
  Writing features…
  ↳ 9,540 tokens used so far
  Writing codeDemo…
  ↳ 12,716 tokens used so far
  Writing pricing…
  ↳ 15,402 tokens used so far
  Writing footer…
  ↳ 17,884 tokens used so far

✓ Generated 5 sections → src/content/landing/index.yaml
  17,884 tokens used (prompt 12,090 / completion 5,794)
  Next: pnpm install && pnpm dev

generate classifies your product, plans the sections, and fills on-brand copy and code — all bounded by each section's schema, so output is always valid. In an empty folder it scaffolds a runnable Astro project first (no separate pagelathe init needed); in an existing project it just updates the content. Edit the generated src/content/landing/index.yaml or any src/components/sections/* to make it yours. Scaffolded projects build standalone — no monorepo required.

Example prompts

generate is tuned for developer tools — SDKs, CLIs, APIs, and dev platforms. Not sure how to phrase yours? Borrow one of these and make it specific:

pagelathe generate -d "A TypeScript SDK for sending transactional email"
pagelathe generate -d "A CLI that turns OpenAPI specs into typed API clients"
pagelathe generate -d "An open-source feature-flag service for React and Node"
pagelathe generate -d "A self-hostable error-tracking platform for backend teams"
pagelathe generate -d "An edge-deployed image-optimization API with a generous free tier"

The more concrete the description — who it's for, the one job it does, what's free — the sharper the generated copy and code samples.

What you get

generate writes a standalone Astro project you fully own — no monorepo, no lock-in:

my-landing/
├─ src/
│  ├─ content/landing/index.yaml      # copy, section order, which sections appear
│  └─ components/sections/*.astro     # the section components — yours to edit
├─ astro.config.mjs
└─ package.json

pnpm install
pnpm dev      # live preview at http://localhost:4321
pnpm build    # static site → dist/  (deploy to Vercel, Netlify, GitHub Pages, S3 — anywhere)

Every generated page ships light and dark mode out of the box. It defaults to the visitor's system preference (prefers-color-scheme) and adds a persisted toggle (bottom-right) that switches instantly — with an inline script that applies the saved choice before first paint, so there's no flash of the wrong theme. Section colors come from a small set of semantic CSS tokens in src/styles/global.css (--color-bg, --color-fg, --color-muted, --color-border, --color-surface, --color-primary), so you can re-skin both themes in one place, and code snippets follow the active theme via Shiki dual themes.

Commands

Command	What it does
pagelathe config set-key [key]	Store an API key for a provider (-p <provider>, prompts if omitted)
pagelathe config use <provider>	Set the active provider: openrouter, gemini, or openai
pagelathe config set-model <id>	Set the default model for a provider (-p <provider>)
pagelathe config show	Show providers, keys (masked), and default models
pagelathe init [dir]	Scaffold a new pagelathe landing project (-f, --force)
pagelathe generate	Generate an on-brand landing page from a product description
pagelathe add <section>	Add a section: vendor its component (if needed) + append it to the page
pagelathe list	List the project's sections and their content children
pagelathe show [sectionId]	Pretty-print the generated content (whole page or one section)
pagelathe remove <sectionId>	Remove a section from the page
pagelathe edit <id> -i "…"	Revise one section from a prompt (LLM, schema-bounded)
pagelathe --version	Print the installed version

generate options

• -d, --description <text> — product description (skips the interactive prompt)
• -p, --provider <name> — openrouter (default), gemini, or openai — overrides the active provider for this run
• -m, --model <id> — model id (defaults to the active provider's configured model)
• --max-tokens <n> — pause and ask before a run exceeds this many tokens (default 100000; 0 disables). Non-interactive runs stop safely at the cap and write nothing.

Every generate run prints a live token count while it works and a final prompt / completion / total summary, so you always know what it cost — and --max-tokens keeps a runaway run in check.

Run any command with --help for full usage.

Tweak your page

Iterate with prompts and commands after the first generate:

# Re-prompt: regenerate from a sharper description (overwrites index.yaml + section content)
pagelathe generate -d "A TypeScript SDK for sending transactional email — lead with the 3-line install"
pagelathe generate                         # run with no -d to be prompted interactively

# Different voice: regenerate with another provider (uses that provider's default model)
pagelathe generate --provider gemini -d "A TypeScript SDK for sending transactional email"

# Add a section: vendors the component (if absent) and appends it to the page
pagelathe add codeDemo

Inspect & manage sections

pagelathe list                 # every section, in order, with its content children
pagelathe show                 # pretty-print the whole page's copy + props
pagelathe show hero-1          # …or just one section
pagelathe add pricing --before footer-1   # insert a pricing section (default props)
pagelathe edit pricing-1 -i "3 tiers: free, pro, enterprise"   # then fill it
pagelathe remove pricing-1     # remove a section by id

list and show are read-only and need no API key. add inserts a section with placeholder defaults (offline) — run edit to fill it on-brand. remove won't delete the last section, and leaves the vendored component file in place.

For surgical, prompt-free edits, change the generated files directly — output stays valid because every section is schema-bounded:

• src/content/landing/index.yaml — copy, section order, and which sections appear
• src/components/sections/*.astro — markup and styling

Or revise a single section with a prompt — surgical, schema-bounded, the rest of the page untouched:

pagelathe edit hero-1 -i "make the headline punchier and lead with the 3-line install"
pagelathe edit hero-1 -i "tighten the subhead; mention the free tier"
pagelathe edit hero-1                       # no -i: prompt for the instruction

edit re-fills only that section through the model, bounded by the section's schema, then prints a before→after diff and the tokens used. Schema defaults are stripped for the edit so the model must echo every field it was given — preventing silent resets. (To add or remove sections, use generate or hand-edit index.yaml.)

Re-running generate regenerates the whole page and overwrites index.yaml, so commit any hand-edits you want to keep first.

Providers & API keys

pagelathe is local-first and bring-your-own-key. It talks to three providers directly — use whichever you have a key for:

Provider	Key looks like	Env var	Get a key
OpenRouter (default)	sk-or-…	OPENROUTER_API_KEY	openrouter.ai
Gemini (Google AI Studio)	AIza…	GEMINI_API_KEY	aistudio.google.com
OpenAI	sk-…	OPENAI_API_KEY	platform.openai.com

# Use Gemini directly with your Google AI Studio key
pagelathe config set-key --provider gemini   # paste AIza…  (or export GEMINI_API_KEY)
pagelathe config use gemini                  # make Gemini the active provider
pagelathe generate -d "A TypeScript SDK for sending transactional email"

# …or override per run without changing your default
pagelathe generate --provider openai -m gpt-5.5 -d "A TypeScript SDK for sending transactional email"

Default models are anthropic/claude-3.7-sonnet (OpenRouter), gemini-3.5-flash (Gemini), and gpt-5.5 (OpenAI). Change one with pagelathe config set-model <id> -p <provider>, and run pagelathe config show to see every provider's key status and default model at a glance.

Every key is stored only on your machine — at ~/.pagelathe/config.json (mode 0600) or via the matching environment variable — and each key is sent only to that provider's official API (OpenRouter, Google, or OpenAI). Keys are never logged, printed in full, or transmitted anywhere else. See SECURITY.md.

Status

Early and moving fast. Generation (pagelathe generate) is live; the observational optimize loop (measure → suggest section reorderings from real analytics) is on the roadmap.

Contributing

pagelathe is free and open source (MIT), built in the open at github.com/gasci/pagelathe. It's early and moving fast, so contributions land quickly and genuinely shape where the project goes.

The highest-leverage way to help is authoring a landing-page section — a self-contained Astro component plus its schema. Every section you add becomes a building block the generator can reach for, so your work ships to everyone who runs pagelathe generate. Also very welcome: new model providers, bug reports with a repro, docs, and honest feedback on the generated sites.

• Star the repo to follow along and help others find it
• Add a section — start with CONTRIBUTING.md
• Browse open issues for bugs to fix or features to build

New to open source? This is a friendly place to start — open an issue to say hi and we'll help you land your first PR.

Links

• Source, docs & full design on GitHub
• Report an issue
• Contributing guide

License

MIT. "pagelathe" is a project trademark — see TRADEMARK.md.