Code (IDE)

The AI code editor & auto-fixer — a Cursor-style coding assistant that runs in your browser. Create apps, fix bugs, audit whole projects, and push to GitHub without installing anything. Living document — we expand it as the product grows.

1. What is the IDE?

The Genexti IDE is an AI-powered code editor on the web. It can create apps in many languages, fix bugs, audit an entire project, explain code, search your files, and connect to GitHub — all in the browser, nothing to install.

Who it's for: developers and makers who want an AI coding partner, and beginners who want to build or fix apps with AI doing the heavy lifting.

Where it wins: it's on the web (any machine), it's part of the same account as the Website Builder and Flow, and the AI is included — you don't wire up your own API key to get started.

2. Getting started

1. Go to your Pro Dashboard (Developer mode) — or open the Code pillar from the launcher.
2. Click New Project → name it → pick a stack (HTML, React, Next.js, Vue, PHP, Python, Laravel, Flutter…).
3. It opens in the /ide editor.

You can also describe an app on the simple dashboard and it opens the IDE and starts building automatically.

3. The screen layout

• Left — Files & actions: the file tree plus buttons: Save, Audit, New File, Import (files/ZIP), GitHub, Commit & Push, Export (ZIP), Projects, and Search.
• Middle — Editor + Preview: the Monaco code editor on top (the same engine as VS Code), with a live preview below for web stacks.
• Right — Genexti AI: the chat panel with 5 modes (below), plus Custom Rules and @-mentions.

4. The 5 AI modes (just above the message box)

Type at the bottom and press Enter. Use @ to add specific files to the AI's context (§9). Shift+Tab cycles the modes.

One chat, not five

The mode is not a separate chat — it's a setting for your next message. There is a single conversation, and switching mode changes how the AI answers what you type next, not where you are. That's deliberate: a real job usually goes Plan → Agent → Debug on the same problem, and splitting that across five chats would cut the thread in half.

Each message is labelled with the mode it was sent in (💬 ASK, 📋 PLAN, and so on), so you can always see how any answer was produced. Agent messages aren't labelled — it's the default.

Your conversation is saved with the project

Close the tab, refresh, come back tomorrow — reopening a project brings its chat back with it, so you can see what you asked for and carry on. The most recent 60 messages are kept.

⚠️ The chat is your record, not the AI's memory. Each request is answered from your current code plus the message you just sent — the AI does not re-read the earlier conversation. So don't say "do that thing we discussed"; say what you want. Your code is what the AI remembers.

5. Creating code with AI (Agent mode)

1. Switch to ⚙️ Agent.
2. Type what you want — e.g. "create a to-do app with add, complete and delete, saved to localStorage".
3. The AI generates the files; they appear in the tree and editor, and the preview updates for web stacks.
4. Keep chatting to extend it — "add a dark-mode toggle", "make it responsive".

Attaching an image (your logo, a screenshot, a photo)

• Click the 📷 button next to the message box, pick the image, and say what to do with it — "use this attached logo in the app", "build this screen", "use this photo in the hero".
• The AI sees the picture, and your code gets a short hosted link to it — not the whole image pasted into the file. That keeps the file readable and, more importantly, means later edits ("make the theme red") can never damage it.
• Attach as many images as you like, across as many messages as you like. Every one of them survives every later edit, in every stack.

Asking for a photo you haven't got

Say "add a technology image below the My Projects title" and you get a real photograph, not a coloured banner with the word "Technology" on it. Genexti keeps a library of verified photos and drops in one that suits your keywords, so an image box is never empty. Ask for different subjects ("team", "modern office", "dashboard") and you get different pictures. If you want a specific picture instead, attach it — an attached image always wins.

6. Editing code by hand

• Click a file in the tree to open it; type to edit. Auto-saves.
• File tree: hover a file/folder → ⋮ (or right-click) → Rename / Delete. Folder structure is preserved.
• New File adds a file anywhere in the tree.

7. Edit-on-selection (highlight → transform)

1. Select code in the editor.
2. Right-click → the ✨ Genexti menu, or press Ctrl+K:
   • Improve / fix · Convert to TypeScript · Add comments · Explain this · Edit selection (Ctrl+K) for a custom instruction.
3. The selection is rewritten in place. Press Ctrl+Z to undo.

8. Debug mode (two-step, safe)

• Switch to 🐛 Debug → the AI scans the open file and returns a numbered list of bugs (what and where).
• Review the list, then Fix All applies the fixes. You stay in control — nothing changes until you say so.

9. @-mentions (focus the AI on specific files)

• In the chat, type @ → a list of your files appears → pick one or more.
• The AI then concentrates on exactly those files — essential in big projects so it doesn't wander.

10. Custom Rules (your AI "constitution")

• Open Custom Rules (project header) → write rules like "Always use TypeScript", "no inline styles", "prefer async/await", "keep components under 200 lines".
• The AI follows these in every action, in every mode. Set once, applies everywhere.

11. Audit → Fix → Deep Clean (whole-project quality)

• 🔍 Audit Project → scans the whole codebase → a report split into Must-Fix (Bugs, Security) vs Suggestions (Performance, UX).
• 🔧 Fix These Issues (on the report) → fixes the flagged files → review the diff → Accept.
• 🧹 Deep Clean (fix until clean) → automatically audits and fixes in up to 3 passes, with live progress and a Stop button.
• Think of Audit as a senior engineer's review; Deep Clean as "keep going until it's tidy".

12. Code search

• Open Search to find text across all files in the project (not just the open one) — jump straight to the file and line.

13. Importing existing code

• Import Files / ZIP → upload individual files, a folder, or a .zip; the folder structure is preserved.
• GitHub (§14) → import a repo by URL or from your connected account (public and private).

14. GitHub (connect, import private repos, push)

1. Click GitHub → Connect GitHub → authorize (one-time OAuth).
2. Your repos list appears → click one to import (public and private).
3. Commit & Push: edit your project → Commit & Push → choose repo/branch + a commit message → it pushes a real commit and links it back in the chat.

15. Preview & supported stacks

• Web stacks (HTML, React, Vue, Next, PHP) preview live in the browser as you edit.
• ⛶ Full screen — the button on the right of the preview's title bar expands it to fill the window. Press Esc or the ✕ to come back. Essential for games, dashboards and anything with a real canvas, and the easiest way to show someone what you've built. Whatever is running keeps running — a game does not restart when you toggle.
• Python runs interactively in an in-browser console.
• Laravel renders your Blade views using the demo data the AI seeded in your controller — so a @foreach gallery shows one card per project, @if blocks resolve, {{ $variables }} are filled in, and @extends/@section compose the page inside its layout. What a browser cannot do is run PHP: routing, database queries, sessions and form submissions all need a real server.
• On Laravel and Flutter the IDE explains itself as you go: the stack picker says what the preview will do before you choose, a "How this stack works" card appears once when you open the project (three steps: build here → Export → run it), and the AI's "done" message tells you what you're actually looking at rather than sending you to a preview that can't show it.
• Flutter builds a native app rather than a web page, so there is nothing for the pane to render — it shows your finished lib/main.dart instead. (If the AI also made an HTML landing page for the app, that is previewed.)
• On both, the bar at the top of the preview is a "Run it locally" panel — click it to expand the exact commands you need, each with a Copy button: · Laravel → composer install then php artisan serve (opens on http://localhost:8000) · Flutter → flutter create ., flutter pub get, then flutter run (add -d chrome for the browser) Running these two stacks inside Genexti itself is on the roadmap.
• For these two stacks, Export gives you a COMPLETE, runnable project — not just your files. Genexti adds the framework skeleton around your code: for Laravel a composer.json, artisan, bootstrap/, public/index.php, the writable storage/ folders and a .env with an application key already generated for that project (so it starts with no database and no extra setup); for Flutter a pubspec.yaml, lint config and a starter test. Anything you wrote yourself is never overwritten. Both were tested by exporting a real project and running it: Laravel served the page on localhost:8000, and the Flutter project passed flutter analyze, flutter test and flutter build web. Push sends the same complete project to GitHub — minus .env, which holds your key and is gitignored.
• A large multi-file framework project can't fully boot inside the in-browser preview — that's expected. Edit/fix/export it and run it in its own dev server. Your code is correct; only the in-browser sandbox is limited.

Clicking links inside the preview

The preview is a sandbox, so links behave like this — the same on every stack, and on a shared link:

• An in-page link (#projects, #contact — the usual one-page nav) scrolls to that section, exactly like the published site will.
• A link to another page of your project (about.html, /services) switches the preview to that file. If you haven't created that page yet you get a friendly "Page Not Created Yet" card — that's the preview telling you the page is missing, not an error.
• A link to another website opens in a new tab, so you never lose your place.
• Nothing a generated app does can navigate the preview away from your app.

16. Generated-site style switcher

• When the AI generates a website-style app, you can switch its visual style from the success message — it re-skins the generated app (colours/layout) while keeping your content. Your chosen style persists when you reopen the project.

17. Saving, reopening, exporting, sharing

• Save Project (it also auto-saves). Reopen from Projects — your files persist to your account.
• Export / Download (ZIP) to get the whole project as a .zip. For Laravel and Flutter the ZIP also contains the framework skeleton, so it runs with the commands in the preview panel (§15).
• Rename / Duplicate / Delete projects from the Projects list.
• Share a project via its share link so others can view it.

18. Your account menu (bottom of the sidebar)

Click your name at the bottom of the sidebar. One menu, the same on every page:

• Website Builder · Code IDE · Flow Automation — jump straight to another tool.
• Profile & avatar — pick an emoji avatar (or upload a photo in Settings).
• Settings · Billing & plan
• Support · Help centre · Feedback · Refer & Earn
• Genexti.com — back to the public site.

These used to be listed down the sidebar of every tool as well. They now live in one place — the sidebar shows the tool you're working in, your account sits behind your name. See the Account & Settings guide.

19. Undoing an AI change

If the AI edits your files and you don't like the result — or it breaks the preview — you can put everything back.

• In the left sidebar, just above the blue "Save Project" button, there's ↩ Undo last AI change.
• It's greyed out until the AI has actually edited something, then turns amber. Click it and every file returns exactly as it was before that edit.
• Click again to step back another edit — up to 10 in a session.
• It restores the whole project, not just the files the AI rewrote, so a change that deleted or added a file is undone too.
• It survives a page refresh. The last few snapshots are kept in your browser, so reloading the page — which is the natural reaction when a preview breaks — no longer loses your working version.

Changed your mind? Redo (added 2 Aug 2026)

• There's a small ↪ button beside the Undo button. It's greyed out until you undo something; after that, click it to put the change back. A redo can itself be undone, so you can flick between the two versions freely.
• ⚠️ Asking the AI for something new clears the redo. Once you've built on top of the undone version, the old one belongs to a path you didn't take, and putting it back would overwrite the work you just did. Undo still goes back step by step as always.

⚠️ This is not Ctrl+Z. Ctrl+Z is the editor's own undo for text you typed. An AI edit replaces whole files without going through the editor, so Ctrl+Z can't reach it. Use the button.

20. Keyboard shortcuts

• Ctrl+K — edit the current selection with an instruction.
• Ctrl+Z — undo your own typing (and AI selection edits made with Ctrl+K).
• Esc — leave the full-screen preview.
• Standard Monaco editing shortcuts (multi-cursor, find, etc.) all work.

21. Plans & limits

• Free: a couple of projects to try it out.
• Paid: more/unlimited projects and priority AI.
• See Billing to upgrade.

22. FAQ / troubleshooting

• The preview is blank / "Full project — preview unavailable" → it's a full framework project; the in-browser preview runs single small apps. Your code is fine — export and run it locally.
• An image box shows but the picture doesn't load → fixed 27 Jul 2026 (the AI used to invent image addresses that don't exist). Ask for any small change and the file is rewritten with real, checked photos.
• "Preview compile error — Unexpected token" right after I added a logo and then asked for another change → fixed 27 Jul 2026. Older projects that already have an image baked into the code repair themselves: ask the AI for any small change (or press Auto-fix) and the file comes back valid. If the picture itself looks broken afterwards, attach it once more — it is stored as a link now, so it will not happen again.
• The preview showed Genexti itself after I clicked a link → fixed 27 Jul 2026. Hard-refresh once; if you still see it, tell us which stack and which link.
• My chat was empty after I refreshed → fixed 2 Aug 2026. Your conversation is now saved with the project and comes back when you reopen it (last 60 messages). Chats from before that date were never stored and cannot be recovered.
• My app looks cut off in the preview pane but fine in Full Screen → the preview is a real browser at the pane's actual width (roughly a tablet), so it is showing you the truth: the layout needs to work at that size too. Click ⛶ Full Screen to see it wide, and ask the AI "make the layout responsive — stack the cards and collapse the sidebar on small screens". New projects created from 2 Aug 2026 are built responsive by default.
• Why is everything in one App.jsx? For most apps that is normal and completely fine — the preview handles any number of files. Once a project gets big, ask "split this into separate component files"; smaller files also make later AI edits more reliable, because the AI can see each one in full.
• A number on screen keeps changing by itself → fixed 2 Aug 2026 for new work. Statistics must be calculated from your real data, never invented. If an existing project still does it, ask "calculate this from the actual data instead of a random number".
• My Laravel gallery/list shows only one empty card → fixed 28 Jul 2026. The preview used to delete the @foreach loop and blank out every {{ $variable }}, so a six-project gallery rendered as a single card with no text in it. It now runs the loop against your controller's demo data. Reopen the project to see it.
• My Laravel page still looks empty → the preview can only use data your controller defines as a plain array (which is what the AI writes by default). If the data comes from a database query (Project::all()), there is nothing for a browser to fetch — run it locally with the two commands in the panel at the top.
• An AI reply spins then stops → retry; if it persists, contact support. Genexti AI automatically switches to a backup provider if the main one is having a moment, so a total outage is rare — a single hiccup usually clears on the next try.
• GitHub says "repo is private" → connect GitHub first (§14), then private repos import fine.
• Audit always shows some issues → an AI audit is an advisor. Clear the Must-Fix items; "Suggestions" will always have a few by design.
• A fix says the backend needs updating → the per-file fix engine needs the latest backend deployed; try again after that.

TODO (expand later)

• Screenshots/GIFs per feature.
• A "build your first app" end-to-end tutorial.
• GitHub OAuth screenshots.
• Per-stack tips (React vs Next vs PHP vs Python).
• Video walkthrough.