The latest articles on DEV Community by enigmaticsloth (@enigmaticsloth). https://dev.to/enigmaticsloth https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3829536%2F9a0b6b2b-9129-48e4-8065-83dcafaf3295.jpeg https://dev.to/enigmaticsloth en enigmaticsloth Tue, 17 Mar 2026 13:28:57 +0000 https://dev.to/enigmaticsloth/i-built-an-ai-workspace-in-4-days-with-zero-frameworks-the-llm-controls-the-entire-ui-8fc https://dev.to/enigmaticsloth/i-built-an-ai-workspace-in-4-days-with-zero-frameworks-the-llm-controls-the-entire-ui-8fc <h2> What I built </h2> <p><a href="https://enigmaticsloth.github.io/sloth-space/index.html#home" rel="noopener noreferrer">Sloth Space</a> is an AI-native workspace with three modes — slides, docs, and sheets. You describe what you need in natural language, and the AI drafts it in seconds.</p> <p><strong>Source:</strong> <a href="https://github.com/enigmaticsloth/sloth-space" rel="noopener noreferrer">github.com/enigmaticsloth/sloth-space</a></p> <h2> The interesting part: unified architecture </h2> <p>The three modes aren't three separate apps bolted together. They share one state object, one intent router, one context menu system, one save pipeline, and one interaction model (single-click select, double-click edit). The AI sees the entire app as one system, not three.</p> <p>~30 ES module files, pure vanilla JS, zero build step, zero frameworks.</p> <h2> The AI controls the UI </h2> <p>This is the part I'm most excited about. The LLM doesn't just generate text — it operates the application interface directly.</p> <p>27 whitelisted JS functions are exposed to the model. It can switch modes, create projects, organize files, link documents together, and navigate — all from a single chat input.</p> <p>Try typing: <em>"Create a project called Q2, write a budget report and put it in there"</em></p> <p>The system runs this as a multi-step sequence:</p> <ol> <li>Create project "Q2"</li> <li>Switch to doc mode</li> <li>Generate budget report</li> <li>Auto-link the doc to the project</li> </ol> <p>With a Monet-orange overlay showing each step in real-time.</p> <h3> How it works under the hood </h3> <ul> <li>An intent router (Llama 8B on Groq free tier) classifies every user input into one of 11 intents</li> <li>The router returns JSON with function names + arguments</li> <li> <code>executeUIActions()</code> does whitelist check → schema validation → execution</li> <li> <code>resolveActionRefs()</code> handles fuzzy name-to-ID resolution — "open that file" finds the right file</li> <li>Destructive actions require user confirmation before execution</li> <li>Context memory lets the AI resolve "that file" or "open it" from recent actions</li> </ul> <h2> Cross-file context injection </h2> <p>Link files to a project, and the AI reads ALL of them when generating new content.</p> <ul> <li>"Summarize this project" → reads every linked doc and sheet</li> <li>"Create slides from the research" → cross-references all project files</li> <li>Mention any file by name in chat → AI pulls it into the prompt automatically</li> </ul> <p>No copy-pasting between files. No manual context-setting.</p> <h2> Tech stack </h2> <ul> <li>Pure vanilla JS ES modules — no React, no Vue, no bundler</li> <li>All state in one <code>S</code> object (no state management library)</li> <li>All module exports auto-bound to <code>window</code> via <code>Object.entries</code> loop</li> <li>CSS split into 14 module files</li> <li>Supabase for optional cloud sync + GitHub OAuth</li> <li>BYO API key — works with Groq, OpenAI, Grok, Ollama, Claude</li> <li>PPTX export, 5 slide themes, 18 spreadsheet formulas</li> </ul> <h2> Built solo in 4 days </h2> <p>Would love to hear thoughts — especially on the "LLM as UI controller" pattern. Is giving the model direct (whitelisted) control over the interface the right direction, or is there a better way to sandbox it?</p> javascript ai webdev showdev