FRANZAI BRIDGE

Use official OpenAI, Gemini, Anthropic, and Mistral SDKs in any web app. No CORS. No backend. No bullshit.

INSTALL NOW TRY DEMO
STATUS: Checking...

WHAT IT DOES

OFFICIAL SDKs

Use the real OpenAI, Gemini, Anthropic, and Mistral SDKs. Not wrappers. The actual official packages from npm, loaded via ESM.

NO CORS ISSUES

All API calls route through the Chrome extension. Works on localhost, file://, GitHub Pages, any static host. Zero backend needed.

SECURE BY DESIGN

Dual allowlist: you control which sites can use franzai AND which API targets they can reach. Keys stored in extension, never exposed to pages.

INSTALLATION (DEV MODE)

Chrome Web Store submission pending. For now, install manually:

1

CLONE THE REPO

git clone https://github.com/franzenzenhofer/franzai-bridge.git
cd franzai-bridge
npm install
npm run build
2

LOAD IN CHROME

  1. Open chrome://extensions
  2. Enable Developer mode (top right toggle)
  3. Click Load unpacked
  4. Select the dist/ folder from the cloned repo
3

CONFIGURE API KEYS

  1. Click the FranzAI extension icon in Chrome toolbar
  2. In the side panel, go to Keys tab
  3. Enter your API keys: OpenAI, Gemini, Anthropic, Mistral
4

ENABLE THIS SITE

  1. In the side panel, go to Sites tab
  2. Enable localhost or add your domain
  3. Reload this page

PREPARE YOUR HTML

Two steps: include the loader in <head>, then use the API.

STEP 1: Add to <head> 
<script src="https://bridge.franzai.com/franzai.js"></script>

Pin version: /v/0.1.5/franzai.js

STEP 2: Use the API 
<script type="module">
  const franzai = await window.franzaiReady;
  const openai = await franzai.createOpenAI();
  // Use the SDK...
</script>
FULL EXAMPLE: your-page.html 
<!DOCTYPE html>
<html>
<head>
  <script src="https://bridge.franzai.com/franzai.js"></script>
</head>
<body>
  <script type="module">
    const franzai = await window.franzaiReady;
    const openai = await franzai.createOpenAI();
    const r = await openai.chat.completions.create({
      model: 'gpt-5-mini',
      messages: [{ role: 'user', content: 'Hello!' }]
    });
    console.log(r.choices[0].message.content);
  </script>
</body>
</html>

SDK EXAMPLES

OPENAI gpt-5-mini 

const openai = await franzai.createOpenAI();
const r = await openai.chat.completions.create({
  model: 'gpt-5-mini',
  messages: [{ role: 'user', content: 'Hello!' }]
});
console.log(r.choices[0].message.content);

GEMINI gemini-3-flash 

const genAI = await franzai.createGemini();
const model = genAI.getGenerativeModel(
  { model: 'gemini-3-flash' },
  { customFetch: franzai.fetch }
);
const result = await model.generateContent('Hi!');
console.log(result.response.text());

ANTHROPIC claude-haiku-4.5 

const anthropic = await franzai.createAnthropic();
const msg = await anthropic.messages.create({
  model: 'claude-haiku-4.5',
  max_tokens: 1024,
  messages: [{ role: 'user', content: 'Hi!' }]
});
console.log(msg.content[0].text);

MISTRAL ministral-8b-latest 

const mistral = await franzai.createMistral();
const res = await mistral.chat.complete({
  model: 'ministral-8b-latest',
  messages: [{ role: 'user', content: 'Hi!' }]
});
console.log(res.choices[0].message.content);

LIVE DEMO

RESPONSE 
Ready to test...

HOW IT WORKS

┌─────────────────────────────────────────────────────────────────────────────┐
│  YOUR WEB PAGE                                                              │
│  ┌──────────────────┐                                                       │
│  │ window.franzai   │ ────→ Your code calls franzai.createOpenAI(), etc.   │
│  └────────┬─────────┘                                                       │
│           │                                                                 │
│           ▼                                                                 │
│  ┌──────────────────┐                                                       │
│  │ Content Script   │ ────→ MAIN world: API surface + SDK lazy-loading     │
│  │ (main.ts)        │                                                       │
│  └────────┬─────────┘                                                       │
│           │ postMessage                                                     │
│           ▼                                                                 │
│  ┌──────────────────┐                                                       │
│  │ Content Script   │ ────→ ISOLATED world: Relay to service worker        │
│  │ (isolated.ts)    │                                                       │
│  └────────┬─────────┘                                                       │
└───────────┼─────────────────────────────────────────────────────────────────┘
            │ chrome.runtime.sendMessage
            ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  CHROME EXTENSION (Service Worker)                                          │
│  ┌──────────────────┐     ┌────────────────┐     ┌────────────────────────┐ │
│  │ Site Allowlist   │ ──→ │ Target Allow   │ ──→ │ Execute fetch() with   │ │
│  │ Check: Can this  │     │ Check: Can     │     │ your API key. Return   │ │
│  │ page use franzai?│     │ reach this URL?│     │ response to page.      │ │
│  └──────────────────┘     └────────────────┘     └────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘