It looks like you're running in a browser-like environment

The AI SDK refused to run in the browser, because your secret API key would be visible to anyone who opens the page.

Browser console
OpenAIError: It looks like you're running in a browser-like environment. This is disabled by default, as it risks exposing your secret API credentials to attackers. If you understand the risks and have appropriate mitigations in place, you can set the `dangerouslyAllowBrowser` option to `true`, e.g., new OpenAI({ apiKey, dangerouslyAllowBrowser: true }); https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety

Also appears as

  • AnthropicError: It looks like you're running in a browser-like environment. This is disabled by default, as it risks exposing your secret API credentials to attackers. If you understand the risks and have appropriate mitigations in place, you can set the `dangerouslyAllowBrowser` option to `true`, e.g., new Anthropic({ apiKey, dangerouslyAllowBrowser: true });

Prompt to fix it

My app shows "It looks like you're running in a browser-like environment" from the OpenAI or Anthropic SDK. The SDK and my secret API key are in frontend code. Move every AI call into a server route that reads the key from a server-only environment variable (no VITE_ or NEXT_PUBLIC_ prefix), and have the frontend call that route with fetch. Remove the SDK from client code, require a signed-in user on the route if the app has accounts, and tell me whether the key was ever exposed so I can rotate it. Don’t set dangerouslyAllowBrowser: true.

Paste into Layerwise or any AI coding tool.

What it means

The OpenAI and Anthropic SDKs check where they’re running. When they detect a browser, they stop with this error before sending anything, because the API key you passed would ship inside your JavaScript. Anyone can open DevTools, copy the key, and run up charges on your account.

AI coding tools often put the API call inside a React component, next to the button that triggers it. The fix is to move the call to the server: a small route, such as a Next.js Route Handler, a Supabase Edge Function, a Cloudflare Worker, or an Express endpoint, holds the key and calls the model, and the page calls that route.

The message suggests dangerouslyAllowBrowser: true. That turns off the check and leaves the key exposed, so keep it for local experiments or apps where each person enters their own key. Also check variable names: anything prefixed VITE_ or NEXT_PUBLIC_ is built into the browser code, so a secret key stored there is already public.

Common causes

  • The AI SDK is imported and called inside a React component or other browser code.
  • The project has no backend yet, so the generated code calls the AI API straight from the page.
  • In Next.js, the file that calls the SDK is a client component marked "use client", or is imported by one.
  • The key was put in a VITE_ or NEXT_PUBLIC_ variable so the browser could read it, which also publishes it.

How to fix it

  1. Create a server route that calls the AI SDK, such as app/api/chat/route.ts in Next.js or a Supabase Edge Function.
  2. Read the key there from a server-only variable like OPENAI_API_KEY, with no VITE_ or NEXT_PUBLIC_ prefix.
  3. Change the component to fetch your route, and remove the SDK import from browser code.
  4. Require a signed-in user on the route and add a rate limit, so strangers can’t use it to spend your credit.
  5. If the key was ever in browser code or a public repository, revoke it and create a new one in the provider’s dashboard.

Example fix

// app/api/chat/route.ts runs on the server, so the key stays private.
import OpenAI from 'openai';

const openai = new OpenAI(); // Reads OPENAI_API_KEY.

export async function POST(request: Request) {
  const { prompt } = await request.json();
  const response = await openai.responses.create({
    model: 'gpt-6-luna',
    input: String(prompt)
  });
  return Response.json({ text: response.output_text });
}

// In the component, call the route instead of the SDK:
// const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ prompt }) });
// const { text } = await res.json();

Related errors

All errors
AuthenticationError: 401 Incorrect API key provided: sk-proj-************************************************bb0A. You can find your API key at https://platform.openai.com/account/api-keys.

Incorrect API key provided

The AI API rejected the key your code sent: it has a typo, was revoked, or isn’t the key you think the app is using.

You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive. Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

You’re importing a component that needs useState

A Next.js Server Component used a browser-side React feature like useState, which only works in files marked as Client Components.

remote: error: GH013: Repository rule violations found for refs/heads/main. remote: remote: - GITHUB PUSH PROTECTION remote: ————————————————————————————————————————— remote: Resolve the following violations before pushing again remote: remote: - Push cannot contain secrets remote: remote: remote: (?) Learn how to resolve a blocked push remote: https://docs.github.com/code-security/secret-scanning/working-with-secret-scanning-and-push-protection/working-with-push-protection-from-the-command-line#resolving-a-blocked-push remote: remote: remote: —— OpenAI API Key ———————————————————————————————————— remote: locations: remote: - commit: 3f9c2a1d8e7b6c5a4f3e2d1c0b9a8f7e6d5c4b3a remote: path: .env:2 remote: remote: (?) To push, remove secret from commit(s) or follow this URL to allow the secret. remote: https://github.com/acme/my-app/security/secret-scanning/unblock-secret/2pXk9vQmT4bL7nRw1sYc8ZfHj3e remote: To https://github.com/acme/my-app.git ! [remote rejected] main -> main (push declined due to repository rule violations) error: failed to push some refs to 'https://github.com/acme/my-app.git'

GH013: Push cannot contain secrets

GitHub found an API key or other secret in the commits you tried to push and blocked the whole push so the secret wouldn’t land in the repository.

Access to fetch at 'https://api.example.com/items' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Blocked by CORS policy

The browser hid a response from another site because that server never said your site is allowed to read it.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs