Openrouter API request

Ask us anything
1

Hey!
Any hints how we can utilise openrouter api?
I would appreciate any help!

fetch(“https://openrouter.ai/api/v1/chat/completions”, {
method: “POST”,
headers: {
“Authorization”: “Bearer <OPENROUTER_API_KEY>”,
“HTTP-Referer”: “<YOUR_SITE_URL>”, // Optional. Site URL for rankings on openrouter.ai.
“X-Title”: “<YOUR_SITE_NAME>”, // Optional. Site title for rankings on openrouter.ai.
“Content-Type”: “application/json”
},
body: JSON.stringify({
“model”: “google/gemini-2.0-flash-001”,
“messages”: [
{
“role”: “user”,
“content”: [
{
“type”: “text”,
“text”: “Hello”
},
]
}
]
})
});

2

Hi @Mikee :waving_hand:

The first thing to note is that it’s not safe to make this call from a frontend.

Why?

Because:

  • The Authorization header contains your OpenRouter API key.
  • If this is in the frontend (e.g. WeWeb), any user can view the API key by checking the browser’s dev tools.
  • This exposes your key to misuse, which could lead to:
    • Unexpected charges (if it’s tied to billing).
    • Abuse of your usage quota.
    • Potential suspension of your API access due to abuse.

:white_check_mark: Safe Approach

  1. Move the fetch call to a backendr (e.g. Xano, Supabase).
  2. Keep the API key secret on the server.
  3. Have your frontend send a request to your backend (e.g. calling a Xano endpoint or invoking a Supabase edge function).
  4. Your backend makes the actual call to OpenRouter and sends the result back to the frontend.

Does that make sense?

3

Hey, @Joyce. Is it possible to make a backend call from WeWeb? Server-side api call?

4

No, with the REST API plugin, you can proxy your request to bypass CORS issues but the call will still be made from the frontend. That’s why I recommend you setup the call to OpenRouter in your backend and then trigger that call from WeWeb.

5

By the way, if you use Supabase as your backend, you can ask WeWeb AI to create the edge function for you:
CleanShot 2025-04-24 at 12.07.34

Once that was created, you can invoke it anywhere in your WeWeb app.

Another approach would be to create a webhook in Zapier, n8n, or Make and then make an API call to that webhook.