I've been building OrinIDE for a while now — a browser-based code editor that runs locally via npx, with a real terminal, a real file system, and AI chat powered by OpenRouter. No cloud accounts, no subscriptions, no uploading your code anywhere.
Today I pushed v1.0.7, and honestly this is the update I've been wanting to build for months.
The problem I kept running into
Every time I asked the AI to make a change, I had to babysit it. "No, look at this file too." "Don't rewrite the whole thing, just change the title." "The colors are defined in main.css, not here."
It got annoying fast. The AI only ever saw whatever file you had open at that moment. And when it did make edits, it would spit back the entire file — 300 lines of HTML for a two-word change. Wasteful, slow, and easy to accidentally break something in the copy-paste.
v1.0.7 fixes both of these properly.
What's new
1. Project-wide AI context
Before this update, the AI only saw the file currently open in the editor. Now it reads every file in your project before each message.
There's a new backend endpoint (POST /files/batch-read) that walks your entire project folder, skips node_modules, .git, and binary files, and sends up to 800 KB of source files to the AI as context. All text files — JS, CSS, HTML, Python, JSON, markdown, whatever you have.
In practice this means you can say things like:
"Update the button color in
components/button.cssto match the accent color defined intheme.css"
And it actually works, because the AI can see both files. You don't have to open theme.css first, copy the color, paste it into chat. It just does it.
Or:
"Add a dark mode toggle that respects the existing CSS variable structure"
And it knows what your CSS variable structure is without you explaining it.
2. Surgical edits — no more full rewrites
This one changed how I use the tool day to day.
Before: ask AI to change a heading → AI returns the entire 400-line HTML file → you click Apply → the whole file gets overwritten.
Now: ask AI to change a heading → AI returns only the changed part in a patch format → only that specific text in the file gets replaced. Everything else stays exactly as it was.
The format the AI uses looks like this:
@@patch:index.html
<<<search
<title>My App</title>
===
<title>Nandan's Portfolio</title>
>>>
The backend (POST /files/patch) does an exact string match and replaces only that portion. If the search string isn't found — say the file changed since the AI read it — it reports the failure with a specific warning instead of silently corrupting anything. The diff viewer still works too, showing you exactly what changed before and after.
For small edits this is so much faster. The AI response is shorter, applying it is instant, and you're not risking accidentally wiping something you didn't intend to change.
3. Skills system
This one's about turning the AI into a specialist instead of a generalist.
There are four built-in skills:
- Frontend — pixel-perfect responsive UI, CSS variables, semantic HTML, accessibility
- Cinematic — Three.js, WebGL, custom GLSL shaders, particle systems
- Backend — Express.js, REST API structure, JWT auth, error handling
- Game Dev — browser game loop, physics, Canvas 2D, Three.js games
When you activate a skill, its full instruction set gets injected into the AI system prompt on every message. So instead of you having to say "use CSS Grid, not floats, and make sure it's mobile-first" every single time — you just activate Frontend skill and it follows those rules automatically.
You can also create your own custom skills with any instructions you want. Name it, write the rules, save. It lives in localStorage and persists across sessions.
@mention autocomplete — type @ in the chat input and a dropdown appears listing all your skills. Arrow keys or click to pick one. Selecting via @mention also activates it automatically.
4. HTML preview inside chat
When the AI generates HTML, there's now a Preview button right on the code block. Click it and the HTML renders in a sandboxed iframe inside the IDE — no new tab, no copy-pasting into a file first, no waiting for Apply.
There's also a New Tab button that opens it as a full page via a Blob URL if you want to see it properly sized.
This is genuinely useful for quick iteration. Generate a component, preview it, ask for changes, preview again — all without leaving the chat panel.
5. Free image API + image picker
When you ask the AI to generate a portfolio or any image-heavy site, it used to fall back to via.placeholder.com gray boxes. Not anymore.
There's now a built-in ImageAPI module backed by picsum.photos and loremflickr.com — no API key, no registration, no rate limits for normal use. 20 categories: person, hero, nature, city, technology, food, travel, business, abstract, banner, team, product, interior, fashion, animals, education, and more.
The AI system prompt now includes a reference sheet of real image URLs for every common section type — hero backgrounds, profile photos, project thumbnails, team members. So when it generates a portfolio site, it uses actual photos that look real.
There's also an Image Picker — a visual grid modal in the toolbar. Browse by category, click any image to copy its URL and append it to the chat input.
Install / update
npx orin-ide
If you already have it installed globally:
npm update -g orin-ide
You'll need an OpenRouter API key for the AI features — free tier is available and works well for most use cases.
A bit of context
I build everything for this project on my Android phone using Termux. No laptop, no desktop. Just a phone, a terminal emulator, and Node.js. That constraint shapes a lot of the decisions — single npx command, no build step, vanilla JS with no framework, everything self-contained.
OrinIDE started as a personal tool because I wanted a proper IDE experience on Termux without fighting with electron or VS Code's remote setup. Somewhere along the way it became something I wanted other people to actually use.
v1.0.7 is the version where the AI stops feeling like a chatbot you're manually feeding context to, and starts feeling like it actually lives inside your project.
Links: