Building an AI Application in a Single HTML File

Can you build an AI application in a single HTML file? ChatJPT shows that you can. The file contains roughly 19,000 lines and is just over one megabyte. Everything is inside: the interface, styles, logic, and translations. Yet it communicates with 16 AI providers and generates images, videos, and voices. Here is how it works.

Why Build an AI Application in a Single HTML File?

A single file means practically no installation. Download it, open it in Chrome, Edge, Firefox, or Safari, and you’re ready. There are no dependencies to install, no build process, and no server to launch.

This choice also changes development. Every modification can be checked by refreshing the page. Distribution is straightforward: one release equals one file, named after its version, such as ChatJPT_1_35_2.html. This speed partly explains the history of ChatJPT and its 47 versions in five months.

Plain JavaScript, Without a Framework

The file follows a consistent structure: header and CSS styles, then the interface, followed by a single main script. There is no React, Vue, or build tool. Regular JavaScript functions handle each step: submitting requests, streaming replies, rendering content, and persisting data.

Provider features are defined in configuration tables instead of being scattered throughout the code. For example, one table lists each provider’s image models. The interface reads that table: when a provider is listed, the Image tab becomes available automatically. Adding a model often takes just one new entry.

Colors use CSS variables, enabling light and dark themes. Finally, every piece of visible text exists in three languages: French, English, and Spanish.

Calling APIs Directly from the Browser

An AI application in a single HTML file has no server. The browser therefore calls each provider’s API directly. This introduces one major constraint: CORS.

By default, a browser prevents a page from reading responses from another domain unless that domain explicitly permits it. MDN explains this mechanism. Before a provider is added, ChatJPT runs a real request from Chrome with the file opened locally. If the provider blocks the request, it is not integrated.

This test has ruled out several services. For example, Z.ai’s direct API blocks browser access, so its GLM models are accessed through Alibaba, which permits it. Similarly, Alibaba video is offered only in regions where task polling is available to the browser.

Strict Security Measures

Displaying AI-generated text carries risks: a response might contain malicious code. ChatJPT therefore uses several safeguards:

• Sanitization: Each response is converted to HTML and cleaned with DOMPurify before display.
• Library integrity: The three external libraries (DOMPurify, PDF.js, and highlight.js) are loaded with integrity checks. If a downloaded file does not match its expected fingerprint, it is rejected.
• Isolated preview: When an AI generates a webpage, the preview opens in an isolated frame without access to the application’s storage. Your API keys remain out of reach.
• Encrypted keys: API keys are encrypted in browser storage. This prevents casual direct reading, but does not replace the need to secure your computer.

Streaming and Different Response Formats

Each provider has its own response format. The display, however, should stay consistent: text appearing live, a collapsible reasoning section, sources, and charts. ChatJPT addresses this with API-family-specific calling functions and a stream reader that normalizes each format. A single rendering function then takes over.

Many providers use an OpenAI-compatible format. For them, a configuration entry defining the API endpoint is often enough; the rest is handled generically.

Testing Without a Server

The project has no build pipeline. Tests therefore run in a real browser. Automated scenarios simulate provider responses to verify the interface; then each feature is tested with a real API key. Every release also checks all three languages and both themes.

Developed with AI Assistance

ChatJPT is developed with the assistance of a coding agent, Claude Code. The developer decides on features, validates technical choices, and tests in real conditions; the assistant writes and checks code. This method echoes ChatJPT’s Vibe Coder mode, designed to help beginners create things without knowing how to program.

In Summary

An AI application in a single HTML file comes with constraints: no server, browser-accessible providers, and uncompromising security. In return, it remains lightweight and transparent. These are not merely technical decisions; they come from the ChatJPT philosophy.