Integrating third-party APIs and SDKs in V0 apps

Why third-party SDK integration fails in V0

V0 generates code that imports SDKs directly in client components, which causes three problems: API keys are exposed in client-side bundles, browser-side SDK calls hit CORS restrictions, and V0's preview sandbox uses esm.sh for module resolution which cannot handle all npm packages. Many SDKs (Stripe, Twilio, SendGrid) are designed for server-side use only, but V0 does not always distinguish between server and client contexts. The correct approach in Next.js App Router is to initialize server-side SDKs in API routes, use environment variables from the Vars panel, and only import client-safe SDKs (like Stripe.js or Firebase client) in "use client" components.

• V0 initializes server-side SDKs in client components, exposing secret keys in the browser bundle
• esm.sh in V0's preview cannot resolve certain npm packages that lack ESM-compatible builds
• SDK initialization code runs during SSR and fails because it expects browser APIs like window or document
• V0 hardcodes API keys in source code instead of using environment variables from the Vars panel
• Missing "use client" directive on components that use browser-only SDK features

Error messages you might see

Before you start

• A V0 project that needs to integrate an external SDK or API service
• API credentials stored in the V0 Vars panel
• Understanding of the difference between server-side and client-side code in Next.js

How to fix it

// components/checkout.tsx — WRONG: server SDK in client
"use client"
import Stripe from "stripe"
const stripe = new Stripe("sk_live_xxx")  // Secret key exposed!
export default function Checkout() {
  async function createSession() {
    const session = await stripe.checkout.sessions.create({ ... })
  }
}

// app/api/checkout/route.ts — Server-side SDK
import Stripe from "stripe"
import { NextResponse } from "next/server"
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
export async function POST(request: Request) {
  const { priceId } = await request.json()
  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  })
  return NextResponse.json({ url: session.url })
}
// components/checkout.tsx — Client calls API route
"use client"
export default function Checkout() {
  async function handleCheckout() {
    const res = await fetch("/api/checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ priceId: "price_xxx" }),
    })
    const { url } = await res.json()
    window.location.href = url
  }
}

const stripe = new Stripe("sk_live_51abc123...")

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

// This crashes during SSR because Mapbox needs window
import mapboxgl from "mapbox-gl"
export default function Map() {
  // ReferenceError: window is not defined
}

// components/map-wrapper.tsx
"use client"
import { useEffect, useRef } from "react"
export default function MapWrapper() {
  const mapContainer = useRef<HTMLDivElement>(null)
  useEffect(() => {
    import("mapbox-gl").then((mapboxgl) => {
      mapboxgl.default.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN!
      new mapboxgl.default.Map({
        container: mapContainer.current!,
        style: "mapbox://styles/mapbox/streets-v12",
        center: [-74.5, 40],
        zoom: 9,
      })
    })
  }, [])
  return <div ref={mapContainer} className="w-full h-[400px]" />
}

// Fails in V0 preview (esm.sh issue)
import { createClient } from "@supabase/ssr"

// Use the main client in V0 preview
import { createClient } from "@supabase/supabase-js"
// After export, switch to @supabase/ssr for proper SSR support
// import { createClient } from "@supabase/ssr"

Complete code example

1import { NextResponse } from "next/server"
2import OpenAI from "openai"
3
4const openai = new OpenAI({
5  apiKey: process.env.OPENAI_API_KEY,
6})
7
8export async function POST(request: Request) {
9  try {
10    const { prompt } = await request.json()
11
12    if (!prompt || typeof prompt !== "string") {
13      return NextResponse.json(
14        { error: "Prompt is required" },
15        { status: 400 }
16      )
17    }
18
19    const completion = await openai.chat.completions.create({
20      model: "gpt-4o",
21      messages: [
22        { role: "system", content: "You are a helpful assistant." },
23        { role: "user", content: prompt },
24      ],
25      max_tokens: 500,
26    })
27
28    const message = completion.choices[0]?.message?.content || ""
29
30    return NextResponse.json({ message })
31  } catch (error) {
32    console.error("OpenAI API error:", error)
33    return NextResponse.json(
34      { error: "Failed to generate response" },
35      { status: 500 }
36    )
37  }
38}

Best practices to prevent this

• Initialize server-side SDKs (Stripe, OpenAI, Twilio) exclusively in Next.js API routes, never in client components
• Store all API credentials in the V0 Vars panel and access via process.env — never hardcode keys in source files
• Prefix client-accessible environment variables with NEXT_PUBLIC_ and keep secrets without the prefix
• Use dynamic imports or useEffect for browser-only SDKs that require window or document
• Check SDK compatibility with esm.sh before relying on it in V0 preview — test https://esm.sh/package-name
• Add error handling and input validation in every API route that wraps an SDK call
• Type your API route responses so client components know exactly what shape to expect
• Use V0's Connect panel for pre-built integrations (Neon, Supabase, Upstash) before building custom SDK wrappers

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue