Site icon Efficient Coder

Chef: The AI App Builder That Actually Understands Backend

高效码农

“

In one sentence: describe what you want in plain English, and Chef hands you a running web app—complete with database, login, file uploads, real-time UI and background jobs—ready to share with the world.

1. Six Quick Questions Everyone Asks

Question Straight-to-the-point answer
What is Chef? An open-source, AI-powered scaffold that sits on top of Convex’s reactive database and spits out full-stack code.
I only know a little front-end—can I use it? Yes. Database, auth, storage and cron jobs are baked in; zero manual wiring.
Is the generated code readable? Very. Folders like app/, convex/, chef-agent/ look like a normal Vite + Node project—open, edit, extend.
Does it cost anything to run locally? No. Local tokens do not count against your Convex usage quota.
Do I need to rent a server? No. One-click deploy to Vercel; database stays on Convex Cloud (managed).
How is it related to Bolt.diy? Chef forked Bolt.diy’s stable branch and replaced the backend layer with Convex plus a rewritten AI loop.

2. Why “Backend-Aware” Matters

Most no-code tools stop at the React shell. When you need users, files and workflows, you’re back to wiring Firebase, Supabase or AWS—exactly the plumbing Chef generates for you:

  1. Convex gives you reactive queries, transactions, file blobs and scheduled functions out of the box.
  2. The AI loop knows those APIs exist, so it emits:
    • query/getTasks.ts
    • mutation/createTask.ts
    • action/cleanupOldFiles.ts
    • React hooks that subscribe to data live.

End result:
“A todo list with sign-up, file attachments and real-time collaboration” becomes a deployable URL, not a demo shell.

3. Folder Tour—Where to Look First

chef/
├─ app/                 // Vite + React pages, components, routes
├─ convex/              // Database schema + functions + cron
├─ chef-agent/          // System prompt, tool defs, model calls
├─ template/            // Seed repo every new app starts from
└─ test-kitchen/        // Evaluation harness for maintainers

Reading order

  1. convex/schema.ts → data model in one glance.
  2. app/routes/_index.tsx → how the front page loads data.
  3. chef-agent/prompts.ts → official system prompt (surprisingly terse).

4. Local Install in Five Copy-Paste Steps

(Windows, macOS, Linux identical.)

Step Command Notes
1. Clone git clone https://github.com/get-convex/chef.git && cd chef ~100 MB, mostly dependencies
2. Node nvm install && nvm use Dev on Node 20, prod runs 22
3. Packages npm install -g pnpm && pnpm i Project enforces pnpm
4. Connect DB npx convex dev --once Pick team, create project
5. Dev servers Terminal A: pnpm run dev
Terminal B: npx convex dev		 Visit http://127.0.0.1:5173 (not localhost)

Typical gotchas

  • White screen → .env.local lacks VITE_CONVEX_URL=placeholder.
  • Login loop → Redirect URI set to localhost instead of 127.0.0.1.

5. From Prompt to Personal Logic—A 3-Minute Example

Suppose Chef generated an order-tracking app, but you need three statuses instead of two:

  1. Edit convex/schema.ts:
    status: v.union(v.literal("pending"),v.literal("shipped"),v.literal("received"))
  2. Add mutation_shipOrder in convex/orders.ts:
    db.patch(id,{status:"shipped",shippedAt:Date.now()})
  3. Update the drop-down in app/components/OrderCard.tsx.

That’s it—live updates propagate automatically because useQuery subscribes to the reactive index.

6. Ship to Production in under Three Minutes

Chef keeps two permanent branches:

Your own apps deploy to Vercel:

  1. Push the repo to GitHub.
  2. Import in Vercel; build command pnpm run build.
  3. Add env vars:
    • CONVEX_URL (copy from dashboard)
    • Model API keys (any one of Anthropic, OpenAI, Google, xAI)
  4. Deploy → live URL in ~30 s.

Rollback

  • Code bug: click Rollback in Vercel.
  • DB schema issue: npx convex migrate to revert.

7. Login & Teams—How the Auth Puzzle Fits

Chef uses WorkOS for social sign-in (Google, GitHub, Microsoft).

Key points:

  • Logging in only gets you into Chef.
  • Creating an app asks you to pick a Convex team.
  • Each app spawns its own Convex project → billing & data stay isolated.

Switch teams locally by swapping the OAuth client/secret in .env.local; no data is lost.

8. Picking a Model—Four Providers, Ten-Second Swap

Settings panel accepts any of:

Provider Strength Input cost (per 1 M tokens)
Anthropic Claude 3.5 Sonnet Clean code blocks, long context ~$3
OpenAI GPT-4o Reliable function calls ~$5
Google Gemini 1.5 1 M context, multimodal ~$3.5
xAI Grok Beta, generous free tier Free for now

Keys stay in the browser; Chef sends them only to the provider you chose. Switching models does not require regenerating projects.

9. Debugging Cheat-Sheet

Built-in globals in the browser console:

Command Purpose
chefSetLogLevel("debug") Print SQL & Convex calls
chefWebContainer Access the WebContainer instance (ls, cat)
chefMessages Raw AI conversation array
chefAssertAdmin() Unlock admin features if you’re listed in the Convex team

10. Error Decoder

Symptom Cause Fix
VITE_CONVEX_URL is not defined Missing placeholder Add VITE_CONVEX_URL=placeholder to .env.local
Blank page after login Redirect URI = localhost Use http://127.0.0.1:5173
File upload 413 Single file > 5 MB Convex blob limit; compress or chunk
Build fails “Convex functions not found” Forgot npx convex dev Run it in a second terminal

11. When Not to Use Chef

  • You self-host everything (Kubernetes, private cloud). Chef expects Convex Cloud.
  • You already run large micro-services in Java/Go. Merging a generated monolith is extra work.
  • You work fully offline (air-gapped). Chef needs Convex control-plane access.

For everything else—school projects, SaaS prototypes, internal tools—Chef cuts days into hours.

12. Taking It Further—From “It Runs” to “It Sells”

  1. Tests
    Fork test-kitchen/, write user-path assertions, run before each prompt tweak.

  2. Monitoring
    Convex already pipes errors to Sentry; add SENTRY_DSN to .env for front-end crashes.

  3. Billing
    Add Stripe webhook in convex/functions/stripe.ts, use Convex scheduler to create monthly invoices—about 10 lines of code.

13. FAQ (Conversation Style)

Q: Do I own the generated code?
A: Yes, MIT license. Push it to a private repo, sell it, modify—no restrictions.

Q: Can I eject from Convex later?
A: You can, but you’ll rewrite queries/auth/files. Better to think of Convex as your Postgres + Redis + Cron + WebSocket cluster.

Q: Is my data safe on Convex Cloud?
A: Convex encrypts at rest, offers daily backups, and is SOC 2 Type II audited—see their security page.

Q: What if the AI produces broken code?
A: Hit Regenerate, or edit manually and reload; hot-reload keeps your database, so fixes are instant.

Q: How big can one app grow?
A: Convex scales to 10 k writes/s and PB-level storage; Chef’s template is used in production by multiple YC startups.

14. Key Takeaways (TL;DR)

  • Chef = AI scaffolder + Convex backend + Vercel deploy.
  • Describe features, get database, auth, file, real-time, cron in one repo.
  • Local dev is free; production cost = Vercel + Convex metered usage.
  • Generated code is plain TypeScript—no lock-in, fully editable.
  • Ten-minute install, three-minute deploy, rolling rollback ready.

Give Chef one afternoon, and you’ll watch a sentence of plain English turn into a URL you can text to your first user—no backend degree required.

Exit mobile version