How I built a coherent platform with 60+ AI tools, BYOK routing, bilingual support, live telemetry, and PWA capabilities — all in a single HTML file with zero build step.
Building individual AI tools is easy. Building a coherent platform with 60+ tools, BYOK routing, bilingual support, live telemetry, and PWA capabilities — all without a build step — is a different class of problem.
60+ tools need a consistent UI framework, shared state management, and a unified design language. Without a build step, you can't use JSX, TypeScript, or CSS modules.
Users bring their own API keys. The platform needs to route every request correctly, handle key rotation, respect rate limits, and provide clear error feedback.
Every tool name, description, parameter, and error message exists in English and French. Keeping them in sync across 60+ tools without a translation management system is non-trivial.
A single-page application architecture built around a shared runtime pattern. Every tool is a data object — not a separate component.
React 19 ESM imports loaded directly in the browser. No Vite, no Webpack, no npm. The entire platform is a single HTML file + one JavaScript file.
Every tool is defined as a configuration object in the data layer. The same rendering engine handles all 60+ tools. Adding a new tool means adding one data block.
User opens browser → index.html ├── Loads React 19 (esm.sh), htm, GSAP ├── Loads copy-en.js or copy-fr.js (bilingual) ├── Loads main.js (SPA runtime + tool definitions) └── React renders the SPA User selects a tool ├── Tool configuration read from data registry ├── UI renders the tool's input fields (form) └── User provides input + API key User submits ├── BYOK router validates the API key ├── Request sent to OpenRouter (or custom endpoint) ├── Response streamed back to the UI ├── Telemetry recorded (localStorage) └── Cross-tab sync updates other open tabs State Management ├── React state for active tool/inputs ├── localStorage for API keys + history ├── BroadcastChannel for cross-tab sync └── PWA cache for offline tool definitions
Real metrics from a production AI tools platform — not a demo, not a landing page.
Live, functional AI tools across 7 categories
Images, Chat, Code, Audio, Vision, Writing, Research
Configurable context window for long-form tasks
Full bilingual support — English and French
No Vite, no Webpack, no npm. ESM imports directly in browser
Bring Your Own Key — users supply their own API endpoints
Service worker, offline support, install prompt
Real-time usage tracking across all 60+ tools
A complete AI tools platform — not a collection of demos, a production workspace.
Users bring their own OpenRouter API key or custom endpoint. The platform validates, routes, and handles errors transparently.
60+ tools organized into 7 categories with filtering, search, and a unified grid layout. Find the right tool fast.
Each tool can use a different model. From GPT-4 to Claude to Qwen 1.5B self-hosted. Model selection is per-tool and user-configurable.
Every tool usage is tracked in real-time. See which tools are used most, how many tokens consumed, and what models are popular.
Full EN/FR support with instant language toggle. Every tool name, description, and label is translated. Adding a third language is one data file away.
Install as a standalone app. Service worker caches tool definitions for offline use. Cross-tab sync keeps state consistent.
A build step adds complexity, dependencies, and attack surface. For a project this size, the tradeoff isn't worth it. The configuration-driven architecture — where every tool is data, not code — makes the platform scalable without any compilation step.
Tool configuration lives in data files. Tool rendering lives in the runtime. Adding a tool never requires touching the rendering engine.
Edit a data file, rsync to server, done. No CI/CD, no build step, no broken deploys from transpilation errors. The mean time to ship a new tool: 5 minutes.
The data format is plain JavaScript objects. A designer or PM can add a new tool by copying an existing block and changing the values. No developer needed.
I build AI tools platforms that scale from 1 to 100+ tools without build complexity. Configuration-driven, BYOK-ready, bilingual by default. Your brand, your infrastructure, your users.