Start here

Never built an app

Build your first app in a chat with Claude

Never written code? This is for you. You describe your app to Claude, and NodeGX Studio opens inside the conversation so you can watch it being built and change it yourself.

Who does what

1. 1

   Download Claude

   Claude is the AI you’ll talk to. Download the Claude app for your computer and sign in. Building an app takes a lot of messages, so we suggest a paid plan. Pro is enough to start.

   Download Claude
2. 2

   Add NodeGX to Claude

   One double-click adds NodeGX to the Claude app. Then Claude can build apps with it, right in your chat.

   Before it installs, Claude shows this warning: “Installing will grant this extension access to everything on your computer. Any developer information shown has not been verified by Anthropic”. That’s normal for an extension you download from a website, which Anthropic hasn’t checked. NodeGX’s source code is on GitHub, so anyone can read what it does.

   Mac with Apple silicon nodegx-0.2.9-darwin-arm64.mcpb Mac with an Intel processor nodegx-0.2.9-darwin-x64.mcpb

   Not sure which Mac you have? In the Apple menu, choose About This Mac. An Apple M chip means Apple silicon. An Intel processor means Intel. The extension is for Macs for now.

   Open the file you downloaded. Claude opens an install window with the warning above in it. Choose Install.

3. 3

   Tell Claude your idea

   Start a new chat, copy this message in, then fill in the gaps in your own words. It doesn’t need to be perfect. Claude will ask about anything that’s missing.

   Need an idea? Running club sign-ups Class bookings Plant watering Student quiz

   Message 1 · your idea Copy

   Hi Claude! I'd like to build an app with NodeGX. About me: I'm new to this. I've never built an app and I don't know how to code. Please use plain words, explain any technical word the first time you use it, and ask me one question at a time. Before we build anything, help me plan it. Tell me if my idea is too big for a first version. My idea: Who it's for: The problem it solves: Something like it I've seen:

   Claude will ask you questions before it builds anything. That’s called planning, or “scoping”. It will probably ask about things like:

   • Does anyone need to log in?
   • Who can see what?
   • What does the app need to remember?
   • What do people see the first time, before anything is added?
   • Phone, computer, or both?
   • Who adds, changes or deletes things?
   • Does it send emails, or take payments?
   • What should it not do yet?

   You don’t need the answers now. It’s fine to say “I don’t know. What would you suggest?”

   Words Claude might use, in plain English

   Front end

   The part of the app people see and click.

   Back end

   The part that works behind the scenes: it saves things and does jobs nobody sees.

   Database

   Where the app keeps things, so they’re still there tomorrow.

   Logic, workflow

   The rules. “When someone clicks Book, save it and show a thank-you message.”

   Log in, auth

   People proving who they are, usually with an email and password.

   Stack

   The set of tools an app is built with. With NodeGX, this is already decided for you.

   Hosting, cloud

   Renting a computer on the internet that runs your app, so other people can use it.

   Deploy

   Putting your app onto that computer.

   Domain

   Your app’s web address, like myrunningclub.com.

   MCP, connector, extension

   How Claude talks to NodeGX. You add it in step 2.

   If Claude uses any other word you don’t know, ask “What does that mean?” Every time.

4. 4

   Watch it being built

   When Claude’s summary of the plan sounds right, ask Claude to build the app. NodeGX Studio opens inside the chat. The app comes together in it a little at a time. Claude asks permission before it uses NodeGX. Click Allow.

   Message 2 · build it Copy

   That plan sounds right. Please build it in NodeGX Studio, a little at a time, and tell me what you're doing as you go, in plain words.

   The Hold button If Claude changes something you didn’t want, press HOLD at the top of Studio. Claude stops and won’t change anything until you press Release. Type what you saw in the box beside it, like “you just made the background grey”.
5. 5

   Make it yours

   You can change anything in Studio: the words, the colours, the pictures, where things go. Claude sees what you changed and carries on from there. The first version is rarely perfect. Tell Claude what you see and what you wanted, like “The list shows everyone, but I only want people coming on Saturday.”

6. 6

   Put it online (when you’re ready)

   For other people to use your app, it needs to run on a computer that’s always on the internet. This is called hosting. Here’s roughly what it costs:

   App that only shows pagesNothing saved, no log-ins. Netlify has a free plan.free

   App that saves thingsLog-ins, bookings, lists. A small rented server from Hetzner, DigitalOcean or Hostinger.~$4–7 / month

   Your own web addressA domain name, like myrunningclub.com.~$10–15 / year

   Don’t get caught out

   • A first app doesn’t need anything more expensive than this. If someone offers you a big package, you don’t need it.
   • Very cheap prices often mean paying a year or two up front. Check the monthly price, and the price when it renews.

   Once you’ve rented a server, ask Claude how to put the app online. Claude walks you through it and sends the app there.

Trying ideas

Build with your AI coder, on parts you can change

Set up a folder for NodeGX before your AI coder starts. Then say what you want to make. It plans the app with you and builds it from NodeGX parts. You don’t need an editor today. The app is saved in an open format. Any NodeGX editor can open it later, including one you build yourself.

1. 1

   Install Node.js

   Node.js runs the setup commands. If you don’t have it yet, download and install it.

   Download Node.js
2. 2

   Set up a folder for your AI coder

   Claude Code Cline Mistral Vibe Claude Desktop

   In a terminal, run these three lines. When Claude Code asks whether to use the nodegx server, say yes.

   npm create nodegx my-apps
   cd my-apps
   claude

3. 3

   Say what you want to make

   A landing page for your band, a habit tracker, a quiz for your class. Your AI coder asks a few questions first. Then it writes a brief and a plan into the project and builds it.

4. 4

   See it running

   Your AI coder tells you the app’s folder name. Run this to open it in your browser. The page reloads each time the app changes.

   npx @nodegx/preview my-app --open

5. 5

   Change it yourself

   Every part lists its settings. Change things whenever you’re ready. Open the project in NodeGX Studio (coming soon) or in the NodeGX editor. Or ask your AI coder to build you an editor of your own, showing only what you want to touch.

6. 6

   Take it with you

   See first what will come across, then write the app as React source. This needs Node.js 22 or later.

   npx @nodegx/export export --dry-run my-app

   Code export is in alpha. Explore the code and build on it, but don’t ship a production app from it yet.

   Making a game? In the games we’ve built, the 3D world is plain code and the menus beside it are NodeGX. That keeps the hard part small for your AI coder. The menus stay easy to change. A kit with what we’ve learnt from those games is next.

For a business

An app people rely on, and an editor that suits your team

Claude Code builds the app with you. Then you choose who changes it afterwards and which editor they use. Add the NodeGX backend for accounts and data, then put the app on a server you own.

1. 1

   Choose your editor

   Every one of them opens the same folder. You choose how deep to go.

   The way	what it is	what it shows	when
   The part in the chat	one piece of the app, live, in the conversation	that piece and the settings the AI chose for you to decide; Approve or Not that	a decision while it builds
   NodeGX Studio	an editor inside the chat, or in its own window on your computer	pages, elements, workflows, data, who can see what, a replay of what the app did, and the wiring underneath, read only	the day-to-day; changes you make yourself
   The NodeGX editor	a free download for your computer	every node and every wire, and you can change all of it	when you want to work at that level

   Under all three: the files. Developers put them in git and open them in VS Code. If none of that means anything to you, ask your AI coder to build you an editor that suits your understanding of the app, so you are never shown a thing you can't understand.

   For your computerComing soon

   NodeGX Studio

   It works in pages, elements and workflows, the way Bubble and n8n do. It opens inside your chat with Claude, or on its own. Design on the real app, set up data and who can see it, and replay a run step by step.

   Coming soon notify me

   Can’t wait? Run it from its source

   You need Node.js 22. In a terminal, run:

   git clone https://github.com/The-Low-Code-Foundation/nodegx-studio
   cd nodegx-studio
   npm install
   npm start

   For your computer0.4.3

   The NodeGX editor

   Every detail in one window. The page as a tree, the nodes and wires behind it, and the app running beside them. Click anything in the app and change it.

   Download NodeGX 0.4.3

   No tool to commit toToday

   The npm packages, and your own editor

   Not ready to pick an editor, or not editing yet? Build with the npm packages in step 2. Your app is saved in an open format that any NodeGX editor can open later. Claude can also build your team an editor that shows only what they should touch.

   See editors Claude has built →
2. 2

   Build it with Claude Code

   You need Node.js and Claude Code. In a terminal, run these three lines. When Claude Code asks whether to use the nodegx server, say yes.

   npm create nodegx my-apps
   cd my-apps
   claude

   Tell Claude who uses the app and what they need to do. Then say what it must never do. Claude asks questions first, then writes a brief and a plan into the project before it builds anything.

   Studio and the NodeGX editor both have a Connect Claude Code button, so Claude can keep building while you watch and change things.

3. 3

   Add accounts and data

   Ask Claude for sign-in and the data your app keeps. It sets up the NodeGX backend for the project, with its tables, its cloud functions and the rules for who can see which rows. The rules are a file in your project that you can read.

   See who can reach whose data in a real app →
4. 4

   Put it on a server you own

   1. Rent a Linux server running Ubuntu or Debian, with root login. Add a domain name if you want one.
   2. Let your computer log in to it.

      ssh-keygen -t ed25519
      ssh-copy-id root@your-server-ip

   3. Ask Claude to publish. For example: “Put this app on root@your-server-ip at app.example.com.” Claude sends the app, its backend, its rules and its functions. If the server is missing something, the message says what to install. Publishing again keeps your data.

   This is new this week. We’ve tested it on a test server so far, not yet with a hosting company.

5. 5

   If you outgrow NodeGX, leave with React

   When you know you need a framework, one command writes the app as React source. It tells you first what will and won’t come across. Code export is in alpha.

   See it on two apps →

Coming from Bubble

Bring your Bubble app into NodeGX Studio

Studio works the way a Bubble builder expects: pages, elements and workflows. It imports your app’s front end and its back end. The app then runs on your own machine. Claude Code can carry on building it with you.

1. 1

   Get NodeGX Studio

   The download is coming soon.

   Coming soon notify me

   Can’t wait? Run it from its source

   You need Node.js 22. In a terminal, run:

   git clone https://github.com/The-Low-Code-Foundation/nodegx-studio
   cd nodegx-studio
   npm install
   npm start

2. 2

   Get your app out of Bubble

   On the Growth plan or above, go to Settings, then General, then Export application. On another plan, you can save each page’s files from Chrome’s developer tools instead. The import guide shows how.

   Keep it on your computerSome of these files contain your app’s API keys.
3. 3

   Import it

   On Studio’s welcome screen, choose Import an app. Pick your export file or your folder of page files, then an empty folder for the new project. A large app takes about a minute.

4. 4

   Read the import report

   It sits beside the project and lists every placeholder and anything that needs a decision from you.

5. 5

   Bring your data across

   Export your data types as CSV from Bubble’s Data tab. Moving the rows in is a separate command for now, described in the import guide. Studio’s Data tab then offers to check and load them.

6. 6

   Keep building with Claude

   Studio has a Connect Claude Code button. Ask Claude to rebuild a plugin, wire a page or tidy a workflow, and watch it happen in Studio. When you’re ready, Studio publishes to a folder you can host anywhere, with its cloud functions.

Download · public alpha

Download the NodeGX editor

NodeGX is in public alpha: it builds real apps, and it still has rough edges. The changelog lists what changed in every release and what is known to be broken.

Prefer to watch first?

NodeGX also has lessons built in. Open NodeGX and click Learning at the top.

Want to learn more?

The NodeGX guide explains how to build apps with AI and NodeGX. It has two modes:

Stuck? Ask a person

Everyone gets stuck. No question is too small.