Konolith

A web-based, AI-assisted IDE for building 2D/3D games entirely in the browser.

VIDEO

Konolith lets you describe a game in plain language and watch an AI agent scaffold, write, debug, and run it live — using a full Monaco-powered editor, Phaser/Three.js tooling, and a real-time preview loop — without installing anything locally.

Built solo, end-to-end: product design, full-stack implementation, AI agent tooling, billing, and production deployment.

---

What it does

• AI coding agent — a tool-calling agent (file read/write/patch, project scaffolding, scene graph editing, build/run) that iterates autonomously against a live project, not just a chat window bolted onto an editor.
• Live preview with closed-loop debugging — the agent opens a real preview tab, waits for it to load, reads back the browser console, and self-corrects on runtime errors before handing control back to the user.
• Full in-browser IDE — Monaco editor, file tree, scene/object explorers, asset manager, multi-project workspace, session persistence — the whole thing runs from a browser tab.
• One-click publishing — projects build via Vite, get obfuscated/minified, and go live at a clean /{username}/{slug} URL, backed by an async job queue so long builds never hit a gateway timeout.
• Kristalin credits + Paddle billing — a virtual currency meters AI usage (input/output token cost per model, admin-configurable without a redeploy); Paddle handles subscriptions and top-ups, including a guest-checkout flow with post-purchase account linking.
• Admin control plane — live AI model/pricing configuration, user management, moderation — all without touching code or restarting the server.

Architecture

``` client/ React 19 + Vite, Monaco, FlexLayout, react-i18next (TR/EN) server/ Node/Express, MySQL (mysql2), JWT auth, SSE streaming for agent runs Vite-on-demand build pipeline for user projects (Phaser/Three.js) javascript-obfuscator for published game bundles ```

• Multi-tenant file isolation — every user's projects live in their own cache namespace on disk; the agent, build pipeline, and publish flow all resolve paths through a single sandboxed accessor.
• SSE-driven agent loop — the AI's tool calls, iteration state, and UI actions (open file, switch project, run preview) stream to the client over Server-Sent Events, with per-user ownership enforced on every request/cancel/inspect endpoint.
• Async, lock-guarded publish pipeline — builds run in the background behind a job-status API (so Cloudflare-style proxies never time out mid-build), with a per-project build lock to prevent concurrent publishes from corrupting each other's output.
• Disk-aware cleanup — deleting a project or a user tears down every artifact it owns (cache, published bundles, chat sessions) instead of leaving orphaned files to accumulate.

Notable engineering problems solved

A sample of the harder bugs found and fixed during development — the kind that only show up under real usage, not in a demo:

• A URL-resolution bug where published games' relative asset paths silently dropped the slug segment, producing 404s that looked like a build race but weren't.
• A genuine concurrent-build race in the publish pipeline (shared temp config file + shared output directory) that surfaced only after making publish asynchronous.
• A timing bug where the agent's "wait, then read console logs" self-debugging step ran before the client had even opened the preview tab — so it always reported "no errors" regardless of reality.
• A critical authz gap where three agent-management endpoints had no auth at all, letting any user cancel or inspect another user's in-progress AI session.
• Cross-platform path handling (symlinked /tmp on macOS breaking Rollup's output resolution) that only reproduced in specific dev environments.

Stack

React 19 · Vite · Monaco Editor · FlexLayout · Node.js · Express · MySQL · JWT · Server-Sent Events · Phaser 3 · Three.js · Paddle Billing · Google OAuth · Docker · Cloudflare Tunnel

---

---

CONTACT

Eren Kocakgöl

E Mail : kocakgoleren@gmail.com

Konolith was built as a commercial product exploration and is shared here as a portfolio piece demonstrating full-stack product engineering: from AI agent architecture and real-time systems to billing integration and production infrastructure.