Start here: create a Next.js-style API route file that calls your backend (e.g., Supabase REST) and a small in-app test page; add a .env.example and instruct you to add real secrets in Lovable's Secrets UI; then Preview to test and Publish or sync to GitHub if you need external builds. The minimal working flow is: create src/pages/api/items.ts, create src/pages/api-test.tsx, add .env.example, and use Lovable Secrets UI to set SUPABASE_URL and SUPABASE_KEY.

Step-by-step Lovable prompts to paste into the project chat

• Prompt A — Create the API route that talks to Supabase REST

// Please create a new file at src/pages/api/items.ts with the following content.
// This implements GET to list rows and POST to insert rows using Supabase REST.
// Use process.env.SUPABASE_URL and process.env.SUPABASE_KEY (these will be set via Lovable Secrets UI).

// src/pages/api/items.ts
import type { NextApiRequest, NextApiResponse } from 'next'

// // Read secrets from env
const SUPABASE_URL = process.env.SUPABASE_URL
const SUPABASE_KEY = process.env.SUPABASE_KEY

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (!SUPABASE_URL || !SUPABASE_KEY) {
    return res.status(500).json({ error: 'Missing SUPABASE_URL or SUPABASE_KEY environment variables' })
  }

  try {
    if (req.method === 'GET') {
      // // list items
      const r = await fetch(`${SUPABASE_URL}/rest/v1/items?select=*`, {
        headers: {
          apikey: SUPABASE_KEY,
          Authorization: `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json'
        }
      })
      const data = await r.json()
      return res.status(r.status).json(data)
    }

    if (req.method === 'POST') {
      // // insert item
      const payload = req.body
      const r = await fetch(`${SUPABASE_URL}/rest/v1/items`, {
        method: 'POST',
        headers: {
          apikey: SUPABASE_KEY,
          Authorization: `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json',
          Prefer: 'return=representation'
        },
        body: JSON.stringify(payload)
      })
      const data = await r.json()
      return res.status(r.status).json(data)
    }

    res.setHeader('Allow', ['GET', 'POST'])
    return res.status(405).end(`Method ${req.method} Not Allowed`)
  } catch (err) {
    return res.status(500).json({ error: String(err) })
  }
}

• Prompt B — Add an in-project test page to call the API from the browser (Preview friendly)

// Please create a new file at src/pages/api-test.tsx with this content.
// This page lets us exercise the /api/items endpoint inside Lovable Preview.

import React, { useState } from 'react'

export default function ApiTest() {
  const [items, setItems] = useState<any[]>([])
  const [name, setName] = useState('')

  async function load() {
    // // call our API route created above
    const r = await fetch('/api/items')
    const data = await r.json()
    setItems(data || [])
  }

  async function add() {
    await fetch('/api/items', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name })
    })
    setName('')
    await load()
  }

  return (
    <div style={{ padding: 20 }}>
      <h1>API Test</h1>
      <div>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="item name" />
        <button onClick={add}>Add</button>
        <button onClick={load}>Load</button>
      </div>
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  )
}

• Prompt C — Add .env.example and a README note (so Secrets UI is explicit)

// Please create a new file at .env.example with the following content.
// This file shows which secrets the API expects.

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-service-role-or-anon-key

// Please also add/update README.md with a short note below the project overview:
// "Set SUPABASE_URL and SUPABASE_KEY in the Lovable Secrets UI before Preview/Publish."

• Prompt D — Remind user to add secrets in Lovable Secrets UI and how to test

// After creating the files above, please display a short checklist to the developer user:
// - Open Lovable's Secrets UI and add two secrets: SUPABASE_URL and SUPABASE_KEY (set to your Supabase project URL and key).
// - Use Preview to open /api-test and click Load/Add to exercise the new API.
// - If you need to deploy outside Lovable and require a build/install step, use "Export to GitHub" from Lovable and run installs/builds locally or in your CI (outside Lovable, terminal required).

What to do in Lovable UI

• Set the secrets in the project's Secrets UI: add SUPABASE_URL and SUPABASE_KEY with real values.
• Click Preview, open the /api-test page, and exercise the API endpoints.
• Publish from Lovable or use GitHub sync/export if you must run custom builds or add native CLI steps (that part is outside Lovable and requires terminal/CI).

Be explicit, narrow, and file-level: tell Lovable exactly which files to create or update, the request/response contract, auth and secret names, expected errors and status codes, and whether you want tests, docs, or an OpenAPI file. Use Lovable’s Secrets UI for keys and Preview to validate behavior; if installing packages or running migrations is needed, ask Lovable to update package files and mark the work as “outside Lovable (terminal required)” for GitHub export.

Best practices (concise)

• Specify exact file changes — create/update full paths (e.g., src/pages/api/users.ts or src/api/users/index.ts).
• Define the API contract — verbs, routes, request JSON shape, response JSON shape, status codes, and error formats.
• State auth & secrets — name secrets (e.g., DATABASE_URL), ask Lovable to reference process.env.SECRET_NAME, and set the secret in Lovable Secrets UI.
• Request types and validation — ask for TypeScript types + Zod (or runtime validation) and include file paths for types (e.g., src/types/api.ts).
• Ask for tests and docs — unit/handler tests and an OpenAPI or README snippet in api/openapi.yaml or docs/api.md.
• Note external steps — if npm/yarn install, migrations, or a local server are required, tell Lovable to update package.json and mark the step as outside Lovable (terminal required) with GitHub export/sync.
• Use Preview early — run Lovable Preview to inspect generated code and API simulation before Publish.

Copy-paste Lovable prompts (pick & paste into Lovable chat)

• Create a REST users endpoint with types, validation, and DB client

  Update or create these files and include tests and docs. Use process.env.DATABASE_URL (set via Lovable Secrets UI as DATABASE_URL).

  // Create src/lib/db.ts
  // create a single exported DB client that reads process.env.DATABASE_URL
  
  // Create src/types/api.ts
  // add TypeScript types: UserCreateRequest, UserResponse, ErrorResponse
  
  // Create src/pages/api/users.ts
  // Implement GET (list users) and POST (create user) handlers.
  // Use Zod to validate POST body and return 400 on validation errors.
  // Use the DB client from src/lib/db.ts.
  // Export default the handler.
  
  // Create tests/tests-api-users.test.ts
  // Add basic tests that import the handler and assert status codes for GET and POST.
  
  // Create api/openapi.yaml
  // Document the GET and POST /api/users contract.
  

• Reference a secret and note next steps to set it

  Update code to reference SECRET and tell me what to set in Lovable UI.

  // Update src/lib/db.ts to use process.env.DATABASE_URL
  // Add a comment at the top: // NOTE: set DATABASE_URL in Lovable Secrets UI
  // In your reply, open the Lovable Secrets UI and create a secret named DATABASE_URL with the DB connection string.
  

• Add runtime validation and types, and update package.json

  Add dependencies and explain external install step.

  // Update package.json: add "zod" to dependencies and "supertest" to devDependencies
  // Update src/pages/api/users.ts to use zod for validation (import { z } from 'zod')
  // Add tests/tests-api-users.test.ts using supertest and the Next.js API handler wrapper.
  
  // In your final message, mark "outside Lovable (terminal required)": run npm install and run tests locally or via CI after GitHub export/sync.
  

• Ask for an error-handling pattern and logging

  Standardize error responses and where logs should go.

  // Update src/lib/errors.ts
  // Add a standardized ErrorResponse type and helper function sendError(res, status, message)
  // Update src/pages/api/users.ts to use sendError for all non-2xx responses
  // Add console.error calls where DB or unexpected errors occur and comment: // Consider integrating with external logger set via Lovable Secrets
  

Practical notes

• Preview is your friend — open Preview to check generated endpoints and static analysis before Publish.
• Secrets must be set in Lovable UI — Lovable can reference process.env.NAME, but you must add the secret through the Secrets panel.
• For package installs, migrations, or runtime commands — ask Lovable to update files and then mark the workflow as "outside Lovable (terminal required)" and use GitHub export/sync to run the commands locally or in CI.