Vibe Coding

Guide Claude Code, Codex, and other coding agents to build and deploy a Vite + React app with a Gencow backend

Use this guide when you want Claude Code, Codex, or another coding agent to build a fullstack Gencow app in one pass. The most important part is to lock the stack, the source of truth, and the deployment command before the agent starts editing files.

Prompt to Paste

Build the frontend with Vite + React and the backend with Gencow (use docs.gencow.com as the source of truth), then build and deploy it.

Korean:

Vite + React 프론트엔드와 Gencow 백엔드(docs.gencow.com 기준)로 앱을 만들고, 빌드 후 배포까지 진행해.

Replace the app idea with your product details:

Build a fullstack [app idea] app.
Use Vite + React for the frontend.
Use Gencow for the backend and follow docs.gencow.com.
Create backend code in gencow/, connect the frontend with @gencow/react,
run the app locally, fix build errors, then deploy with:
npx gencow@latest deploy --static dist/

Agent Checklist

Ask the agent to complete these steps before it finishes:

  1. Create or inspect the project with npx gencow@latest.
  2. Keep backend files in gencow/ and frontend files in src/.
  3. Define tables in gencow/schema.ts, procedures in gencow/*.ts, and register them in gencow/index.ts.
  4. Use @gencow/react and the generated gencow/api client from the React frontend.
  5. Run npx gencow@latest dev and fix local errors.
  6. Run the frontend build.
  7. Deploy fullstack with npx gencow@latest deploy --static dist/.

CLI Fallback

If you want to run the same flow manually:

npx gencow@latest init my-app
cd my-app
bun install
npx gencow@latest dev
bun run build
npx gencow@latest deploy --static dist/

For fullstack apps, prefer deploy --static dist/ over static dist/. The fullstack command deploys the backend first and then uploads the built frontend files.

Guardrails for AI Agents

  • Use docs.gencow.com as the source of truth instead of guessing APIs.
  • Use npx gencow@latest to avoid stale global CLI installs.
  • Do not put backend procedures in the React app. Keep backend code under gencow/.
  • Do not edit generated files unless the docs explicitly say to do so. Re-run the relevant Gencow command instead.
  • Use ownerRls() for user-owned data so CRUD procedures stay auth-safe by default.
  • Set cloud environment variables with npx gencow@latest env set KEY=VALUE.
  • If the app calls backend procedures from the frontend, do not finish with a static-only deploy.
Project StructureSchema