Authentication

All Parallèle API endpoints require authentication via API keys.

API Keys

API keys are workspace-scoped credentials that grant read access to your content.

Generating an API Key

Log in to Parallèle
Navigate to Settings > API
Click Generate API Key
Copy and store the key securely

API keys are shown only once. If you lose a key, you'll need to generate a new one.

Key Format

Parallèle API keys follow this format:

prl_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

The prl_ prefix helps identify Parallèle keys in your codebase.

Using API Keys

Include the API key in the x-api-key header:

curl https://parallele.ai/api/public/content?locale=en \
  -H "x-api-key: prl_your_api_key"

In your code:

const res = await fetch("https://parallele.ai/api/public/content?locale=en", {
  headers: {
    "x-api-key": process.env.PARALLELE_API_KEY!,
  },
});

Security Best Practices

Environment Variables

Never hardcode API keys in your source code:

// ❌ Bad - hardcoded key
const res = await fetch(url, {
  headers: { "x-api-key": "prl_abc123..." },
});
 
// ✅ Good - environment variable
const res = await fetch(url, {
  headers: { "x-api-key": process.env.PARALLELE_API_KEY! },
});

Server-Side Only

API keys should only be used in server-side code:

// ✅ Server Component (Next.js)
export default async function Page() {
  const res = await fetch("https://parallele.ai/api/public/content", {
    headers: { "x-api-key": process.env.PARALLELE_API_KEY! },
  });
  const content = await res.json();
  return <div>{content["hero.title"]}</div>;
}

Proxy Pattern for Client Components

If you need content in client components, create an API route:

app/api/content/route.ts

import { NextResponse } from "next/server";
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const locale = searchParams.get("locale") || "fr";
 
  const res = await fetch(
    `https://parallele.ai/api/public/content?locale=${locale}`,
    { headers: { "x-api-key": process.env.PARALLELE_API_KEY! } }
  );
 
  const content = await res.json();
  return NextResponse.json(content);
}

Then fetch from the client:

components/hero.tsx

"use client";
 
export function Hero() {
  const [content, setContent] = useState({});
 
  useEffect(() => {
    fetch("/api/content?locale=en")
      .then(res => res.json())
      .then(setContent);
  }, []);
 
  return <h1>{content["hero.title"]}</h1>;
}

Error Responses

401 Unauthorized

Returned when the API key is missing or invalid:

{
  "error": "Invalid or missing API key"
}

Common causes:

Missing x-api-key header
Incorrect API key
Deleted or revoked key

Authentication

On this page