Integrating Third-Party APIs and SDKs in Lovable

// DANGEROUS: Secret key hardcoded in frontend component
const openai = new OpenAI({
  apiKey: "sk-abc123secretkey"
});
// ALSO DANGEROUS: Secret key in a VITE_ variable
const apiKey = import.meta.env.VITE_OPENAI_API_KEY;

// SAFE: Publishable key in VITE_ variable (for client-side SDKs only)
const stripePublishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
// SAFE: Secret key stored in Cloud tab → Secrets
// Name: OPENAI_API_KEY
// Value: sk-abc123secretkey
// This key is only accessible from Edge Functions

// No SDK installed — you need to tell Lovable which package to use

// Prompt example for npm package SDK:
// "Install the @stripe/stripe-js and @stripe/react-stripe-js
//  npm packages. Initialize the Stripe provider in @src/App.tsx
//  using the VITE_STRIPE_PUBLISHABLE_KEY environment variable.
//  Wrap the Router component with the Stripe Elements provider."
// Prompt example for script tag SDK:
// "Add the Google Maps JavaScript API script to index.html.
//  Use the VITE_GOOGLE_MAPS_KEY environment variable for the
//  API key. Create a reusable GoogleMap component in
//  @src/components/GoogleMap.tsx that displays an interactive map."

// Frontend code calling OpenAI directly — UNSAFE, exposes secret key
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${import.meta.env.VITE_OPENAI_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ model: "gpt-4", messages: [{ role: "user", content: prompt }] })
});

// Edge Function: supabase/functions/call-openai/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
serve(async (req) => {
  try {
    const { prompt } = await req.json();
    const apiKey = Deno.env.get("OPENAI_API_KEY");
    if (!apiKey) throw new Error("OPENAI_API_KEY secret not set");
    const response = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${apiKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [{ role: "user", content: prompt }],
      }),
    });
    const data = await response.json();
    return new Response(JSON.stringify(data), {
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    console.error("OpenAI API error:", error.message);
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }
});

// Calling third-party API directly from frontend — CORS error or exposed key
const result = await fetch("https://api.openai.com/v1/...", { ... });

import { useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
function AIChat() {
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);
  const askAI = async (prompt: string) => {
    setLoading(true);
    try {
      const { data, error } = await supabase.functions.invoke("call-openai", {
        body: { prompt },
      });
      if (error) throw error;
      setResponse(data.choices[0].message.content);
    } catch (err) {
      console.error("AI request failed:", err);
      setResponse("Sorry, something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  };
  return (
    <div>
      <Button onClick={() => askAI("Hello!")} disabled={loading}>
        {loading ? "Thinking..." : "Ask AI"}
      </Button>
      {response && <p className="mt-4">{response}</p>}
    </div>
  );
}