Stack:

• Convex
• Replicate
• Next.js
• Tailwind CSS

Install packages:

npm install

Continuously deploy to the Convex backend (this will create a (free) Convex account if you don't have one):

npx convex dev

Get a Replicate API key (free to try) and add it to your environment variables in the Convex Dashboard

In another terminal, run the frontend:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Editing files in convex/ will auto-update your "Dev" deployment in Convex.

To learn more about Convex, check out the following resources:

• Docs has details on the platform and APIs.
• Stack has tips and best practices.

The easiest way to deploy your Next.js frontend is to use the Vercel Platform from the creators of Next.js, or Netlify.

See the Convex docs on production deployments for details on deploying a production backend.

Check out our Next.js deployment documentation for more details.