Toss Unveils AI Admin Creation Platform 'TOI'… Achieves 1.3s Loading with In-Browser Preview Runtime

Toss has unveiled its internal admin creation platform TOI, introducing Preview Runtime technology that executes and validates AI-generated React code in real time within the browser. TOI operates by generating code based on schemas when screens are requested in natural language after API registration, producing 439 projects and 2,418 sub-pages from February to August 2026.

Evolution of the Execution Environment

Initially, the team attempted to connect the Next.js Dev Server via iframe, but encountered issues where compilation errors were not isolated in multi-user environments. Subsequently, Sandpack was applied, successfully achieving per-user isolation; however, adoption was put on hold due to performance issues where initial screen display took 47 seconds caused by package download delays, and the technical complexity of connecting internal packages.

In-Browser Build and Package Optimization

TOI utilizes esbuild-wasm to transform TypeScript and JSX within the browser, implementing a Virtual File System to resolve import paths. Dependency packages are excluded from the build target, and package combinations installed via Yarn are pre-built using Vite and uploaded to S3. The browser links packages on demand via import map, with identical package combinations sharing hashes to skip rebuilds and utilize caches.

Performance and User Experience

Adopting full document replacement instead of HMR ensured stability similar to transaction commits, maintaining the previous healthy screen upon build failure. By moving repetitive package download tasks to pre-builds, the time to first screen display after Preview Runtime setup was reduced to 1.3 seconds. TOI separates policies (security, masking) from screens (UI) for management, suggesting that as AI code generation costs decrease, defining product value and UX design are emerging as core roles for engineers.