Able

An app template Claude Code sets up for you

Paste one prompt.
Get a real app, deployed.

Able is a TypeScript app skeleton plus a playbook that Claude Code follows from start to finish. You end up with production, a preview stack for every pull request, sign-in and live data, all working and checked. You can do the whole thing from your phone.

Paste into a Claude Code session

Read https://github.com/lightbody/able/blob/main/PLAYBOOK.md and follow it to set up a new app for me. Ask me what it's called first.

Works in the terminal or at claude.ai/code, including on a phone or tablet.

Ready on day one

The boring parts are already done, so you start on features.

🚀

Production, deployed

A push to main tests and deploys the backend to Fly.io and the frontend to Cloudflare Pages. Database migrations run on boot.

🌱

A full stack for every PR

Each pull request gets its own Neon database branch, its own backend app and its own frontend preview, linked from one PR comment. All of it is torn down when the PR closes.

⚡

Live data, no polling

Reads are Neon Realtime live SQL queries that stream straight to the browser. Writes come back on the same stream, so every tab stays in sync, and you don't run a WebSocket server.

🔐

Sign-in that just works

WorkOS AuthKit handles sign-in. Every backend route except /health checks the bearer token, and prod and every preview share one user pool.

🧩

TypeScript end to end

React + Vite, Fastify and Postgres in one npm workspaces monorepo, with a shared package that both sides import with no build step on the frontend.

✅

Tests and CI included

Backend integration tests run against real Postgres. Type checks and builds run on every PR. Deploy jobs wait until the app's deploy config has been filled in.

How it works

You click a few buttons. Claude does the rest.

  1. 1

    Name it

    Claude asks for the app's name and a one-line description, then picks a region where Neon Realtime and Fly sit next to each other.

  2. 2

    Create accounts and tokens

    Claude walks you through GitHub, Neon, Fly, Cloudflare and WorkOS one step at a time, with direct links. The steps work on a phone, one clipboard item at a time, and tokens go into secure cards, never the chat.

  3. 3

    Claude provisions everything

    It creates the database, enables Realtime, sets up hosting, wires up CI and renames the skeleton to your app. It checks every step with a read-only call before moving on.

  4. 4

    Both environments, verified

    Production and a preview are checked with a full sign-in and a live-data round trip. You can add a custom domain at the end.

Under the hood

A small, clear shape that grows with you.

The browser asks the backend to seal a named view. The backend encrypts that view's SQL, which is good for 60 seconds. The browser then subscribes to it over a WebSocket directly to Neon. Writes are plain REST calls, and the client waits for its own write to come back on the live query, so it knows the write has synced.

Add tables, add views, add routes. The pattern stays the same.

Browser React + Vite on Cloudflare Pages
REST writes
+ seal requests
live query
WebSocket
Backend Fastify on Fly.io
Neon Realtime Live SQL API
SQL
Postgres Neon: one branch per environment

Secure by construction

Built so the easy way is also the safe way.

The client can't change the query

The browser only ever names a view. The backend builds that view's SQL from the signed-in user and seals it, so the client can't read or change the SQL or its parameters.

Narrow tokens for CI

GitHub holds exactly three tokens, each scoped as narrowly as its service allows. Database URLs and Realtime secrets are pulled from Neon on every deploy and are never copied by hand.

Setup keys stay out of your repo

The broader keys Claude uses to set things up live only in your Claude Code environment. You can revoke them any time and deploys keep working.

The stack

Proven, well-documented pieces.

  • React 18+ Vite + TypeScript
  • FastifyNode + pg
  • Neon Postgresbranch per preview
  • Neon Realtimelive SQL queries
  • WorkOS AuthKitsign-in
  • Fly.iobackend hosting
  • Cloudflare Pagesfrontend hosting
  • GitHub ActionsCI + previews

Your next app is one prompt away.

Open Claude Code, paste the prompt, and tell it what to call your app.

Read the playbook