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".

Watching it work

A big build takes time — writing a whole app is a lot of code, and thirty to sixty seconds is normal. You do not have to guess whether anything is happening:

• The status line tells you which part it is on, and it changes as the work moves — "Reading your project", then "Writing the code". It is reporting what is actually happening, not counting.
• Every file appears in a list as it is written, with a spinner on the one being written now and a tick on the ones already done. That list is the real thing — those files exist.
• Stop ends it at any time. Nothing is changed, and your message goes straight back into the box so you can edit it and send again.

If the connection drops part-way, it says so and changes nothing. It will never tell you a build finished when it did not.

When it makes a mistake, it fixes the mistake

Every file the AI writes is checked before it is saved, and a file that does not compile never reaches your project. That much has always been true. What is new is what happens next.

If a file comes back with a syntax error, the IDE now shows the AI its own error — the exact message and the exact line — and has it correct itself, before you see anything. You will see the status line say "Correcting a mistake in the code" while it does. When it works, the file is saved and a short note at the end of the reply tells you which file was corrected and what was wrong with it. Nothing is fixed behind your back.

If the second attempt is still wrong, your file is left exactly as it was and the reply says so plainly. It will never save broken code, and it will never quietly replace a long file with a short one that happens to compile.

Pop-up boxes that match your app

Deleting something always asks first. In an app you build, pressing Delete, Remove or Clear all opens its own box, styled to fit the page, with Cancel and Delete buttons. Nothing is deleted until you press Delete. It never uses the browser's plain grey box that shows the website's address. Short messages like "Saved" appear inside the page the same way.

This happens by itself in React, Next.js, Vue and HTML apps. Cancel (or pressing Escape, or clicking outside the box) keeps things as they are; only the Delete button goes ahead.

If the AI writes a question in a way the IDE cannot swap safely, the IDE asks the AI to rebuild that part and checks the grey box is really gone. If it still cannot, your app is left working exactly as before, the reply tells you, and the first suggestion button offers to fix it.

An app built before this change keeps its old box until the AI next changes that file.

The code always fits the project you chose

A plain HTML project gets plain HTML and ordinary JavaScript. If the AI slips and writes React into an HTML page — which a browser cannot run, so the page would open blank — the IDE spots it and has the page rebuilt properly before you see it, keeping every feature, word and style. The same check covers React, Vue and Python projects. When a page is rebuilt, the reply tells you. On the rare occasion it cannot be rebuilt, your file is left exactly as it was, the reply says the page may not display, and the first suggestion button offers to rebuild it.

Every page you ask for gets built

If you ask for a site "with menu, booking, gallery, reviews and contact pages", the IDE checks that each of those pages exists. Any that are missing are written straight away, copying the menu bar, footer and styling of the pages already there. If one still cannot be built, the reply says plainly that it was not created — it will never tell you a page exists when it doesn't — and offers to add it with one tap.

If a build gets cut short, it is retried, not handed to you half-written

The AI writes your project as a live stream, and that stream can stop part-way through for reasons that have nothing to do with you — the service being busy is the common one. When that happens the half-written result is thrown away and another attempt is made straight away, so what reaches your project is always a complete answer. Your existing files are never touched by an attempt that failed. In the rare case where every attempt in a row is cut short, the reply says so honestly and asks you to send the message again — rather than applying half a build and leaving you to find the gaps.

A busy moment no longer gets you a thinner site

The IDE writes big builds with its strongest AI model and keeps a lighter one in reserve for when the strong one cannot answer. When the service is busy, one connection can say "try again later" in a fraction of a second while the next one is free. The IDE now simply moves on to the next connection and gives it the full time a real build needs, instead of treating that quick refusal as the end of the strong model. It also spreads requests across its connections rather than always starting on the same one. What you get is the full, detailed site far more often: in our own tests the same restaurant request came back as six complete pages every time, even when two connections in a row were busy.

Your logo and pop-ups look right on every page

When the AI builds a site with several pages, the IDE gives every page the same menu bar and footer as your home page, and highlights the link for the page you are on. That step used to mistake your logo for the highlighted "Home" link: on every page except the home page, the logo turned into a plain link and the current page's link took on the logo's big bold look. It also replaced each page's own styling with the home page's, which could make a pop-up (such as "Cancel Reservation?") open by itself with buttons that did nothing. Both are fixed: your logo keeps its look on every page, only the page you are on is highlighted, buttons such as "Book Now" are left alone, and a page's own styling is never removed.

Your site has a working menu on a phone

On a phone there is no room for a full row of menu links, so a website hides them behind a menu button (☰). Sites the AI built used to hide the links and then leave the button doing nothing, or leave it out altogether, so a visitor on a phone could not reach any other page. The AI now builds a menu button that opens a panel listing every page, and in a site with several pages it works on every page, not only the home page. We have checked this on new HTML and React sites; PHP, Vue and Next.js projects get the same instruction. When the IDE adds a page you asked for, its link goes into that phone menu too, not only into the menu bar you see on a laptop.

A site you built before this: ask "add a working phone menu: a ☰ button that opens a panel with every page link".

A site you built before this fix: ask the AI for any small change and the menu bar on every page is put right. If a pop-up on one of those pages still opens by itself, ask "fix the pop-up so it stays hidden until I click the button".

On a big project, it reads the files your question is about

There is a limit to how much code the AI can hold in one conversation, and a large imported project can be past it. It now works out which files your question is actually about and reads those first — the file you named, the file you have open, the files that one imports, and the files that mention what you asked about. Anything that still does not fit is named at the end of the reply, so you always know what it did not see.

For a whole-project job on a large codebase, Audit Project is still the right tool: it reads everything, in batches, and nothing is left out.

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 — a plain script runs interactively in an in-browser console. A Flask app is previewed as a web page: your Jinja templates render using the demo data the AI seeded in app.py, so {% for %} loops show one card per row, {{ variables }} are filled in, and {% extends %}/{% block %} compose the page inside its layout. The nav works, and a detail page behind a dynamic route (@app.route('/services/<slug>')) opens the row you clicked. What a browser cannot do is run Python: databases, form posts, sessions and login all need a real server — use the Run it locally panel for the commands.
• 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.
• The nav highlights the page you are on — on both Laravel and Flask. The preview knows which page it is showing, so the normal way of writing it works: request()->routeIs('about') or request()->is('about') in Blade, request.endpoint or request.path in Jinja. Whichever link matches the current page is the one that lights up, and the same code is correct in the project you export. (Fixed 22 Aug 2026. Before that a link written this way could stay highlighted on every page — if you have an older project showing that, ask the AI to "highlight the current page in the nav" and it will be rewritten properly.) ⚠️ One thing to avoid: if a link is given a fixed active class instead of a condition, it is the current page everywhere by definition, and no preview can tell otherwise. That is the one case worth re-prompting.
• 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. The newest project you created is always first; opening an old project does not move it.
• 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: 2 code projects and 100 AI requests a day.
• Starter: unlimited code projects and 1,000 AI requests a day.
• Pro: unlimited code projects and 5,000 AI requests a day.
• What counts as one AI request: each message you send the AI — a build, a question, a fix, a rewrite of selected code. However much work the AI does behind the scenes for that one message (for example writing a page it missed the first time), it counts once. A message that is refused before it reaches the AI does not count.
• The allowance is shared with the Website Builder and Flow, and resets once a day (at midnight UTC).
• When you reach it: the AI tells you so in the chat, and nothing in your project is changed. Your code is never touched by a request that was over the limit.
• 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.
• My Flask home page is blank — just the nav and the footer → fixed 16 Aug 2026. The preview was opening templates/base.html, which is your layout: a nav and a footer wrapped around the hole the page goes in. It now opens the page itself. (If you ever want to look at the layout, click it in the file tree — choosing it deliberately still works.) Reopen the project to see it.
• "Read More" on a Flask page says "Page Not Created Yet" → fixed 16 Aug 2026. A detail page is usually one template served by a dynamic route — @app.route('/services/<slug>') — so there is no file called web-design for the preview to open. It now follows the route to the template and shows the row you clicked. If it still says this, the page really has not been built: ask the AI for it.
• 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.

23. Your first app, start to finish

From an empty account. About ten minutes.

1. Open Code.
2. New project → pick a stack. If you're not sure, choose HTML for a website or React for something interactive.
3. Describe what you want in the AI box, in one go and in plain English: "a task list where I can add tasks, tick them off and delete them, saved in the browser". Detail helps — say what the screens are, what the data is, and how it should feel.
4. Watch the files appear on the left and the app appear in Preview. It runs as it's written.
5. Try it in the preview like a real user. Click everything.
6. Something wrong? Say what you see, not what to change: "ticking a task doesn't cross it out" works better than "edit line 40". The AI reads your whole project.
7. Not what you wanted at all? Press Undo (section 19). An AI edit is a single step you can take back, and Redo brings it forward again.
8. Ask for the polish in a second pass: "make it work well on a phone", "use a dark theme", "show a count of tasks left".
9. Run Audit → Fix (section 11) before you call it finished. It checks the whole project, not just the file you're looking at.
10. Export to download the complete project, or Push to send it to GitHub (section 14).

One habit worth building: ask for one change at a time and check the preview between each. Three requests in one message is where the confusion starts.

24. Tips for each stack

Everything below is about how the in-browser preview behaves. Your exported code is a normal project either way.

• HTML — the most predictable. Multi-page sites work: a link to about.html switches the preview to that page, and detail pages that read ?id= from the address work too. In-page links like #contact scroll, exactly as the published site will.
• React and Vue — the preview runs your app from a single file rather than bundling a folder of components, so ask for one file. If you want a many-file structure, build it, then Export and run it in your own dev server. Vue especially: "single-file component" means one file, so say "one file, no router" if the preview comes up blank.
• Next.js — previews live, like React. Server-side pieces (API routes, server components hitting a database) need a real server, so export those.
• PHP — the preview genuinely runs your PHP, so loops and variables produce real output instead of raw code on the page. Database calls still need a server.
• Python — a script runs in an interactive console in the browser; ask for a single script you can run and watch (Python here is a browser runtime, so there is no pip). A Flask app previews as a real page instead: templates render with the demo data seeded in app.py, the nav switches pages, and Read More behind a dynamic route opens the row you clicked. Anything needing a live server — a database, a form post, login — needs Run it locally.
• Laravel — Blade views render using the demo data the AI seeded in your controller, so galleries and @if blocks look right. Routing, databases, sessions and form posts need a real server: use the Run it locally panel above the preview for the exact commands.
• Flutter — builds a native app, so there is nothing for a browser pane to show; you'll see your finished lib/main.dart. Export and flutter run to watch it move.

If a large multi-file framework project won't fully boot in the preview, that is expected and your code is fine. Edit and fix it here, export it, run it there.