API integration prompts for vibe coding are the difference between a UI shell and a working product. AI excels at generating fetch wrappers and form layouts — it struggles with auth headers, idempotent retries, webhook signatures, rate limits, and error shapes that real APIs return. This post delivers 20 copy-paste prompts you can drop into Cursor, Lovable export, or any coding agent when wiring Stripe, Supabase, OpenAI, REST backends, and GraphQL endpoints. Updated October 2026.
Foundation: how to vibe code a web app, starter stack 2026, and Supabase auth prompts. Chain complex integrations with prompt chains. Debug failures with debugging prompts.
Table of contents
Prompt principles for API integration
Every API prompt should specify:
- Runtime — server action, route handler, client component (prefer server for secrets)
- Auth — Bearer token, API key from env, user session cookie
- Error handling — typed errors, user-facing messages, retry rules
- Types — Zod schema or TypeScript interface for request/response
- Files — exact paths to create or modify
Never prompt “integrate Stripe” without scope. Never put secret keys in client components — AI does this constantly.
| Bad prompt | Better prompt |
|---|---|
| “Add OpenAI chat” | “Create POST /api/chat route handler; stream response; OPENAI_API_KEY server-only; Zod validate messages array” |
| “Connect to API” | “Create lib/api/client.ts with fetch wrapper; 401 throws AuthError; 429 retries once after 1s” |
| “Fix the API” | “POST /api/checkout returns 500; paste logs; fix idempotency key header per Stripe docs” |
20 copy-paste API integration prompts
Replace bracketed placeholders with your values. Run one prompt per commit.
1. Create lib/api/fetcher.ts: typed fetch wrapper with baseURL from env API_BASE_URL, JSON headers, throws ApiError with status and body on non-2xx, 10s timeout. Export get, post, patch, delete.
2. Create app/api/health/route.ts GET handler returning { status: "ok", timestamp: ISO string }. No auth. For uptime monitoring.
3. Add Supabase server client in lib/supabase/server.ts using @supabase/ssr createServerClient with cookies from next/headers. Match existing middleware pattern.
4. Create server action createProject in app/actions/projects.ts: Zod validate { name: string, description?: string }, insert to projects table with user_id from session, return { id } or field errors. Revalidate /dashboard.
5. Create GET app/api/projects/route.ts: authenticate via Supabase session, return user's projects ordered by created_at desc. 401 if no session. Type response as Project[].
6. Integrate Stripe Checkout: POST app/api/checkout/route.ts creates checkout session for price_id from body, mode subscription, success_url and cancel_url from env, customer_email from session. Return { url }. Server-only STRIPE_SECRET_KEY.
7. Add Stripe webhook app/api/webhooks/stripe/route.ts: verify signature with STRIPE_WEBHOOK_SECRET, handle checkout.session.completed and customer.subscription.deleted, update subscriptions table idempotently by event id.
8. Create OpenAI streaming chat POST app/api/chat/route.ts: validate messages with Zod, call gpt-4o-mini with stream true, return ReadableStream compatible with AI SDK or raw SSE. OPENAI_API_KEY server-only.
9. Add REST pagination hook usePaginatedFetch in hooks/usePaginatedFetch.ts: accepts endpoint, page param, returns { data, loading, error, nextPage, hasMore }. Uses SWR or useEffect pattern matching project conventions.
10. Create lib/api/retry.ts: exponential backoff wrapper, max 3 retries, retry on 429 and 503 only, jitter. Use in external API calls.
11. Add OAuth token refresh in lib/api/auth-token.ts: store access_token and refresh_token encrypted, refresh when expires_in threshold, used by server actions calling third-party API.
12. Create GraphQL client lib/graphql/client.ts with graphql-request, endpoint from env, Authorization header from server session. Export typed query helper.
13. Add file upload to Supabase Storage: server action uploadAvatar accepts FormData file, validate image/jpeg|png max 2MB, path avatars/{userId}/{uuid}, return public URL. RLS policy users upload own folder only.
14. Create webhook receiver POST app/api/webhooks/[provider]/route.ts: verify HMAC signature from header X-Signature using WEBHOOK_SECRET, parse body, queue processing, return 200 fast. Log failures.
15. Add rate limiting to app/api/public/route.ts using @upstash/ratelimit or in-memory Map: 10 req/min per IP, return 429 with Retry-After header.
16. Create lib/api/types/external.ts from OpenAPI spec at [URL]: generate or hand-write TypeScript interfaces for User, Order, OrderStatus. Use in fetcher responses.
17. Add TanStack Query provider and useQuery for GET /api/projects in components/ProjectList.tsx: skeleton loading, error toast, staleTime 60s. Match existing UI components.
18. Create server-side API route proxy app/api/proxy/notion/route.ts: forward to Notion API with NOTION_TOKEN server-only, hide token from client, validate allowed endpoints whitelist.
19. Add batch import script scripts/import-csv.ts: read CSV, validate rows with Zod, insert via Supabase service role in batches of 100, log failures to import-errors.json. Runnable with npx tsx.
20. Audit all API routes: list routes in app/api, confirm secrets only in server files, add integration test with MSW mocking 200 and 401 for /api/projects. Fix any client-side secret leaks.
Common integration patterns
Server-only secrets pattern
All keys in .env.local without NEXT_PUBLIC_ prefix. Access only in route handlers, server actions, and lib/ server modules. Prompt 20 audits leaks.
BFF (Backend-for-Frontend) pattern
Client never calls third-party API directly. Your /api/* routes proxy, validate, and shape responses. Simplifies CORS, hides keys, centralizes error handling.
Idempotent webhooks
Store processed event IDs in database before side effects. Stripe retries webhooks — duplicate processing creates duplicate subscriptions without idempotency.
Typed boundaries
Zod at every external boundary: request body, webhook payload, fetch response .json(). AI-generated any types are where production bugs hide.
Wire auth first via add auth Next.js before prompts 4–6. Deploy with Vercel guide — add env vars in dashboard before testing webhooks.
Mistakes AI makes on API integration
- Exposing API keys in client components or NEXT_PUBLIC_ env vars
- Missing await on server actions — silent failures
- Fetching in useEffect without abort/cleanup — race conditions
- No error UI — infinite loading spinners
- Hardcoded localhost URLs in production code
- Webhook routes without raw body for signature verification (Next.js parses JSON too early)
- Ignoring 401 — shows empty state instead of redirect to login
Review every integration PR with AI code review guide. Compare tools in best vibe coding tools 2026 — export to Cursor before complex API work if you started in Lovable.
Ordering prompts for greenfield apps
- Prompts 1, 3, 14 — foundation (fetcher, Supabase, health)
- Auth from dedicated guide
- Prompts 4, 5, 17 — core CRUD
- Prompts 6, 7 — payments if needed
- Prompts 8+ — AI features and externals
- Prompt 20 — security audit last
Encode this order in system prompt templates so agents do not skip ahead to OpenAI before auth exists.
Environment variable map for API integrations
Before running prompts 6–20, document env vars in .env.example:
| Variable | Server/Client | Used by prompt |
|---|---|---|
| STRIPE_SECRET_KEY | Server only | 6, 7 |
| STRIPE_WEBHOOK_SECRET | Server only | 7 |
| OPENAI_API_KEY | Server only | 8 |
| NEXT_PUBLIC_SUPABASE_URL | Public | 3, 4, 13 |
| SUPABASE_SERVICE_ROLE_KEY | Server only | 19 |
| WEBHOOK_SECRET | Server only | 14 |
Prompt: “Audit .env.example against all process.env references; add missing vars with comments; fail build if required server env missing at startup in instrumentation.ts.”
When your API has OpenAPI docs
Prompt 16 assumes a spec URL. Better chain:
- “Generate types from OpenAPI at [url] into lib/api/types/”
- “Create fetcher methods for each tag group”
- “Add route handlers only for endpoints frontend needs — not entire spec”
Resist generating 200 endpoints because the spec lists them — vibe coding is scope discipline.
GraphQL prompt addendum
For prompt 12, add: “Use codegen from schema if available; otherwise hand-write types for Query.GetProjects only. Do not expose GraphQL playground in production.”
API monitoring after integration
Prompt after integrations ship: “Add structured logging to all API route handlers: method, path, status, duration_ms. Log errors with stack server-side only. Optional: Sentry captureException in catch blocks.”
Pair with Vercel deploy log drains when traffic grows.
Stripe integration deep notes
Prompts 6–7 cover checkout and webhooks — add these gotchas to your prompt context:
- Use
stripe listen --forward-to localhost:3000/api/webhooks/stripefor local webhook testing - Store
stripe_customer_idon users table at first checkout — AI forgets linking - Handle
customer.subscription.updatedfor plan changes, not only created/deleted - Never trust client-side payment success — wait for webhook before unlocking features
Prompt: “Add idempotency: webhook handler checks processed_events table by stripe event id before side effects; insert event id in same transaction as subscription update.”
Supabase Realtime API prompt
Bonus prompt 21 (not in numbered list): “Subscribe to postgres_changes on messages table filtered by room_id in useChat hook; cleanup subscription on unmount; optimistic UI with rollback on insert failure.”
CORS and third-party API pitfalls
AI tries client-side fetch to APIs that block browser CORS — fix with BFF proxy (prompt 18 pattern). Rule: if API key required, route handler proxies. If public read API with CORS headers, client fetch OK.
API versioning in vibe-coded apps
When integrating mature APIs with /v1/ /v2/ paths, pin version in env EXTERNAL_API_VERSION=v2 and centralize in fetcher base URL. Prevents silent breaks when AI copies outdated Stack Overflow answers referencing deprecated endpoints.
Standardizing API error responses
AI returns inconsistent error JSON — sometimes string, sometimes object, sometimes HTML error page. Prompt early: “All API routes return { error: { code, message } } on failure; Zod validation errors map to 400 with field details; 500 never leak stack to client.” Client hooks parse one shape — fewer mystery toasts.
Cursor-based pagination prompt
Bonus for list APIs: “Replace offset pagination on GET /api/items with cursor-based using created_at + id; return { items, nextCursor }; client hook appends pages; stable under concurrent inserts.” Offset pagination AI generates breaks on large tables and live data.
Full-stack integration week plan
Day 1: prompts 1–3 + auth guide. Day 2: prompts 4–5, 17. Day 3: prompt 20 security audit. Day 4: prompts 6–7 if monetizing. Day 5: prompts 8 or external API as needed. One deploy per day via Vercel guide — smaller blast radius than big-bang integration Friday.
Keep a running docs/integrations.md listing each external API, owner prompt number, env vars required, and last tested date. Future you — or a hired developer — will not reverse-engineer which webhook secret belongs to which provider from scattered route files alone.
When an integration fails in production, paste the exact HTTP status, response body, and request headers (redact secrets) into your debugging prompt — generic “API broken” prompts waste tokens and generate wrong fixes.
FAQ
Can I paste OpenAPI spec instead of prompts?
Yes — “Generate TypeScript client and route handlers from this OpenAPI spec” works; still audit auth and secrets manually.
Which prompts for Lovable export?
Run in Cursor post-export. Lovable handles basic Supabase; prompts 6–8, 14–15 need local control.
How do I test webhooks locally?
Stripe CLI forward, ngrok for generic webhooks, or Vercel preview deploy with test secrets.
GraphQL or REST for vibe coding?
REST + server actions for most indie SaaS. GraphQL when consuming existing GraphQL API — prompt 12.
API integration prompts for vibe coding turn vague “connect the API” requests into shippable, reviewable diffs. Start with fetcher + Supabase server client, layer CRUD and payments, audit secrets last. Chain with prompt chains, debug with debugging prompts, and ship on Vercel.
