Skip to main content

Pexels

This guide explains how to integrate the Pexels API into your superun application. The integration uses an Edge Function to securely proxy all API requests, ensuring your API key is never exposed to the client.

Documentation

For more details on the Pexels API, refer to the official documentation:

Environment Variables

Calling the SupabaseEdgeFunctionSecretsCreate tool will open the secrets configuration panel. The plugin_secret_prefix must be SUPERUN. In this panel, you can:
  • Use shared keys — superun provides ready-to-use shared test keys. Check the option to get started quickly without applying for your own keys.
  • Enter your own keys — For production use, enter your own API keys in the input fields.
Required secrets:
  • PEXELS_ACCESS_KEY - Pexels API Key

Step 1: Create an Edge Function

Create a Supabase Edge Function to securely proxy Pexels API requests. This example demonstrates the /search endpoint:
// supabase/functions/pexels-search-photos/index.ts

serve(async (req) => {
  try {
    // Get the Pexels API key from environment variables
    const apiKey = Deno.env.get("SUPERUN_PEXELS_ACCESS_KEY");
    
    if (!apiKey) {
      return new Response(
        JSON.stringify({ error: "Pexels API key not configured" }),
        { status: 500, headers: { "Content-Type": "application/json" } }
      );
    }

    // Parse query parameters from the request
    const url = new URL(req.url);
    const query = url.searchParams.get("query");
    if (!query) {
      return new Response(
        JSON.stringify({ error: "query is empty" }),
        { status: 400, headers: { "Content-Type": "application/json" } }
      );
    }
    const page = url.searchParams.get("page") || "1";
    const perPage = url.searchParams.get("per_page") || "10";
    const color = url.searchParams.get("color");
    const orientation = url.searchParams.get("orientation");

    // Build query parameters
    const params = new URLSearchParams({
      query: query,
      page: page,
      per_page: perPage,
    });
    
    if (color) {
      params.append("color", color);
    }
    if (orientation) {
      params.append("orientation", orientation);
    }

    // Send request to Pexels API
    const pexelsUrl = `https://api.pexels.com/v1/search?${params.toString()}`;
    
    const response = await fetch(pexelsUrl, {
      headers: {
        "Authorization": apiKey,
      },
    });

    if (!response.ok) {
      throw new Error(`Pexels API error: ${response.status}`);
    }

    const data = await response.json();

    // Return the Pexels API response
    return new Response(
      JSON.stringify(data),
      {
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    );
  }
});

Step 2: Frontend Integration

Call the Edge Function directly from the frontend. The API key is securely stored on the server:

API Attribution

When using the Pexels API, you must provide appropriate attribution: