A multi-page chat studio for OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere and Groq — compare up to three LLMs side by side, in one session.

Overview · Features · Getting started · Privacy & legal · Development · Resources

Read this in other languages:English · Français · Español · Deutsch · Italiano · Português · 汉语 · 日本語 · 한국어 · Русский

---

Converser avec l'intelligence. A quiet, editorial interface for interrogating several language models in parallel, comparing their voices, and composing the right answer.

PolyChat AI is a single-page web app that talks to seven AI providers — OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere and Groq — each configured independently with your own API key (BYOK). Its signature feature is multi-page composition: open up to three chat columns side-by-side inside a single session, pick a different provider and model in each, and stream their answers in parallel — perfect for benchmarking, prompt iteration, or simply getting a second opinion.

Everything lives in your browser. No accounts, no server, no telemetry: sessions, settings and consent are stored in localStorage, and your API key never leaves the device.

---

Overview

Interface	French-language UI, editorial layout (Fraunces · IBM Plex · JetBrains Mono)
Providers	OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere, Groq — configured independently, mixed per column
Composition	1, 2 or 3 parallel chat columns per session, model per column
Streaming	Live token streaming with per-window stop and regeneration
Markdown	react-markdown + remark-gfm (tables, task lists, code blocks)
Theming	Light / dark, persisted across sessions
Storage	localStorage only — no backend, no cookies, no remote DB
Legal	RGPD/CNIL consent gate on first load, French legal documents in-app

Features

• Multi-page composition — open up to three chat columns inside one session. Broadcast a single message to all columns, or send a targeted one to the focused window.
• Seven providers, one interface — OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere and Groq, each with its own key and default model. Six of them relay through a same-origin proxy (api/proxy.ts) to work around browser CORS; OpenRouter still calls the browser directly, unchanged.
• Streaming with control — AbortController-based cancellation per window, regenerate any assistant message with one click, stop everything at once.
• Session history — sidebar grouped by Aujourd'hui / Hier / date, with inline search, rename and delete. Empty sessions are pruned automatically.
• Model picker — searchable dropdown sourced live from /api/v1/models. Set per-window.
• Generation controls — system prompt, temperature and max-tokens in Settings, applied to every request.
• Markdown rendering — full GFM in the assistant messages, including tables, task lists and code fences.
• Theme toggle — light and dark variants, persisted, pre-paint script in index.html avoids the flash on reload.
• Keyboard-friendly — focus traps in modals, Esc to dismiss, Tab cycling, skip-link to main content, ARIA roles on the column switcher.
• Data sovereignty — export everything (settings, sessions, consent) as a single JSON file, or wipe all three stores in one click.

Getting started

Prerequisites

• Node.js 20 or newer
• An API key from at least one supported provider — OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere or Groq

Install and run

git clone https://github.com/Teeflo/PolyChat-AI.git
cd PolyChat-AI
npm install
npm run dev

The dev server starts on http://localhost:5173. Open it, click Configurer la clé in the empty state, pick a provider tab, paste its key, and you're in.

Build and preview

npm run build # tsc -b && vite build — type-check + bundle
npm run preview # serve dist/ locally

The build script is the verification gate: it runs tsc -b (which catches type errors) before bundling. There is no test runner in this project — see Development for the full command list.

Configuration

All configuration happens in Settings (Ctrl/⌘ + K) and is persisted in localStorage["polychat-settings"].

Field	Description
Fournisseur	One tab per provider (OpenRouter, OpenAI, Anthropic, Google Gemini, Mistral, Cohere, Groq) — each with its own key, help link and default model, stored XOR-obfuscated in localStorage (see Security below).
Fournisseur actif	Which configured provider is used to create brand-new sessions; existing windows keep whichever provider they were created with.
Modèle	Per-window model picker, grouped by provider, sourced live from every configured provider's model list.
Thème	Clair / Sombre.
Prompt système	Prepended to every request in the session.
Température	Sampling temperature, 0.0 – 2.0.
Longueur max	Max tokens per response (Court → Très long presets).

Tip

The very first launch shows a two-step empty state: configure your key, then choose a model. The settings modal also lets you open the privacy panel to manage consent at any time.

Privacy & legal

This is a French-language application and respects RGPD / CNIL guidelines by design.

• First-load consent gate — the app blocks until you accept the current legal version. The version is tracked in src/hooks/useLegal.ts (CURRENT_LEGAL_VERSION); bump it whenever the legal text changes meaningfully.
• Google Fonts are consent-gated — they are not declared in index.css. They are injected by src/services/fontLoader.ts only after you grant fontsConsent in the privacy modal. The pre-paint script in index.html reads polychat-legal to set data-fonts before the first paint, so there is no flash.
• No tracking, no cookies, no backend — only three localStorage keys are used: polychat-settings, polychat_history, polychat-legal.
• Data export — exportAllUserData() in src/services/dataExport.ts bundles settings, sessions and consent into a downloadable JSON.
• Full wipe — clearAllUserData() removes all three keys. Accessible from the privacy modal.
• In-app legal documents — Privacy, Terms, Cookies, AI notices, Legal notices are rendered from src/legal/documents.ts and reachable from the sidebar footer and modals.

Important

The polychat-settings key holds every provider's API key XOR-obfuscated via src/services/crypto.ts. This is obfuscation, not encryption — the key and the obfuscation function both ship in the JS bundle. Don't rely on it against a determined local attacker. For the six non-OpenRouter providers, requests are relayed through api/proxy.ts (a same-origin Vercel Edge Function, mirrored in dev by a Vite middleware) to work around browser CORS — the proxy validates the target provider against a hardcoded server-side allow-list, forwards your key on each request, and never logs or stores it. The root .env file is leftover and not read by the app; the settings modal is the only source of truth for the keys.

Development

npm run dev # Vite dev server with HMR
npm run build # tsc -b + vite build (type-check gate)
npm run lint # ESLint flat config (React Hooks + react-refresh)
npm run format # Prettier — 2 spaces, single quotes, 100 cols
npm run preview # Serve the production build locally

There is no test runner in this repository — vitest and jest are not installed. Treat npm run build as the green light: if tsc -b passes, the app is type-safe.

Note

The hand-written CSS in src/index.css (~71 KB) is the only styling layer. The tailwindcss and @tailwindcss/postcss packages listed in package.json are not used and have no PostCSS config. Do not introduce Tailwind without explicit owner approval.

Project layout

src/
├── components/ # Flat — one file per component, PascalCase
│ ├── ChatColumn.tsx # One of up to 3 parallel chat columns per session
│ ├── ChatInput.tsx
│ ├── MessagesArea.tsx # react-markdown + remark-gfm rendering
│ ├── ModelSelector.tsx # Searchable, grouped by provider
│ ├── SettingsModal.tsx # One tab per provider
│ ├── Sidebar.tsx # Session list grouped by date
│ ├── TopBar.tsx
│ ├── ConsentGate.tsx # RGPD/CNIL first-load gate
│ ├── LegalModal.tsx
│ ├── PrivacyModal.tsx
│ ├── LegalFooter.tsx
│ └── FAQModal.tsx
├── hooks/ # Zustand stores
│ ├── useChatStore.ts # sessions[], activeSessionId, focusedWindowId
│ ├── useSettings.ts # providers{}, activeProvider, theme, systemPrompt…
│ └── useLegal.ts # legalAccepted, fontsConsent, version
├── services/
│ ├── openRouter.ts # OpenRouter client — unchanged, still a direct browser fetch
│ ├── providers/ # Common adapter interface + one implementation per provider
│ │ ├── types.ts # ProviderAdapter, StreamChatArgs
│ │ ├── registry.ts # getProvider(id), ALL_PROVIDERS
│ │ ├── openaiCompatible.ts # Shared factory: OpenAI, Mistral, Groq
│ │ ├── anthropic.ts, google.ts, cohere.ts, openrouter.ts
│ │ └── proxyClient.ts, sse.ts, errors.ts # Proxy fetch, SSE parsing, error normalization
│ ├── localStorage.ts # Save/load sessions with migration
│ ├── crypto.ts # XOR obfuscation helpers
│ ├── fontLoader.ts # Injects Google Fonts only after consent
│ └── dataExport.ts # exportAllUserData, clearAllUserData
├── legal/
│ └── documents.ts # All French legal text
└── types/index.ts # Message, Model, ProviderConfig, Settings, PageWindow, ChatSession
api/
├── proxy.ts # Vercel Edge Function entry point
└── _proxyHandler.ts # Shared allow-listed relay logic (also driven by the Vite dev middleware)

Resources

• OpenRouter documentation — the original API PolyChat talks to
• OpenAI, Anthropic, Google Gemini, Mistral, Cohere and Groq documentation — the six other providers PolyChat can talk to
• React 19 release notes — concurrent features used for streaming
• Vite guide — dev server and build
• Zustand persist middleware — the three localStorage stores
• CNIL — Guide RGPD développeurs — privacy-by-design reference

Getting help

• In-app FAQ — open the sidebar and look for the help link; the FAQ modal routes to settings, legal documents and the privacy panel in one click.
• Bug reports — open an issue on the repository with reproduction steps and the output of npm run build and npm run lint.
• Security disclosures — please use a private channel rather than filing a public issue for anything marked security in Privacy & legal.

_{Composé sur papier numérique — sérif Fraunces · grotesk IBM Plex · mono JetBrains}